path jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript" src="js/raphael.js"></script>

<script type="text/javascript" src="js/index004.js"></script>

</head>

<body>

</body>

</html>

path js:

$(function() {

    initRaphael();

});

function initRaphael(e) {

    // 这样会自动创建一个svg对象

    var paper = Raphael(0,0,300,300);

    var d = 'M10,30L60,30L10,80L60,80';

    var mark = paper.path(d);

    mark.attr({

        "stroke":"#F00",

        "stroke-width":3

    });

    mark.attr("fill","#00c");

}

other jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript" src="js/raphael.js"></script>

<script type="text/javascript" src="js/index005.js"></script>

</head>

<body>

<div id="container"></div>

</body>

</html>

other js:

$(function() {

    initRaphael();

});

function initRaphael(e) {

    // 这样会根据container这个ID找到该对象

    var paper = Raphael('container',500,500);

    var dot = paper.circle(250,150,100);

    dot.attr({

        fill:'red',

        stroke:'green',

        'stroke-width':3

    });

    var d = paper.ellipse(100,100,50,20);

    var rec = paper.rect(100,10,50,20);

    // 图片会产生相应的缩放

    var fluffy = paper.image('1.jpg',25,20,100,100);

    fluffy.attr('stroke','green');

    fluffy.attr('stroke-width',3);

    var png = paper.image('a.png',200,200,80,65);

}

Raphael初始化，path，circle，rect，ellipse，image的更多相关文章

  1. EXTJS4自学手册——简单图形（circle,rect,text,path）

    一.画圆形: xtype: 'button', text: '画图一个圆', handler: function (btn) { Ext.create('Ext.window.Window', { l ...

  2. area标签circle/rect/poligon坐标

    <img src="images/02.gif" title="flower" usemap="#mm" /> <map ...

  3. 1．编写一个Java应用程序，该程序中有3个类：Ladder、Circle和主类A。具体要求如下：Ladder类具有类型为double的上底、下底、高、面积属性，具有返回面积的功能，包括一个构造方法对上底、下底、高进行初始化。Circle类具有类型为double的半径、周长和面积属性，具有返回周长、面积的功能，包括一个构造方法对半径进行初始化。主类A用来测试类Ladder和类Circle的功能。

    Ladder package com.hanqi.test; public class Ladder { //属性 double shangdi,xiadi,gao,mianji; //构造方法 La ...

  4. Raphael path 拖动实现

    让 Raphael 的 Path 动起来 Raphaël 是一个很实用的线上矢量图操作 Javascript 库.使用简单,一个值得一提的卖点是通过抽象出共同的接口屏蔽了 SVG 和 VML 之间的差 ...

  5. Leaflet：Path、Polyline、Polygon、Rectangle、Circle、CircleMarker

    下边介绍Vector Layer Path(Layer) Path是其他Vector Layer的父类,比如Polyline.Polygon.Rectangle.Circle.CircleMarker ...

  6. raphael 支持group(简)

    raphael 不支持group,里面有的set方法,只是把对象数组存起来,方法调用的时候,遍历都调用下,但是在实际需求上面感觉group还是瞒有用处的,可以控制group下面的节点的交互 比如地图区 ...

  7. Raphael Js矢量库API简介：

    Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...

  8. 利用raphael画图

    raphael是一个js的矢量库,可以js操作DOM可以实现柱形图.走势图等一些基本的图形: 一.使用: 在html中设置<div class="my"></di ...

  9. SVG path d Attribute

    Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C Recommendation 16 August 2011 http://www.w3. ...

随机推荐

  1. Qt5：窗口居中显示

    QDesktopWidget* desktop = QApplication::desktop(); // =qApp->desktop();也可以move((desktop->width ...

  2. 关于css3的calc（）

    么是calc()? 学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运用中更好的使用他. calc()从字面我们可以把他理解为一个函数function.其实c ...

  3. Python之路： 面向对象

    Python是一门面向对象的语言,所以在Python中创建一个类和对象是很容易的.接下来了解一下面像对象的一些基本特征. 面向对象技术简介 类(class):描述具有相同的属性和方法的对象的集合.定义 ...

  4. 转发：iOS之textfield用法大全

    转发至:http://m.blog.csdn.net/article/details?id=8121915 //初始化textfield并设置位置及大小 UITextField *text = [[U ...

  5. 更改CI框架默认访问路径及去掉index.php

    下面是去掉index.php的操作 PHP CodeIgniter(CI)去掉 index.php - Langjun - 博客园 设置访问的默认路径是在

  6. NodeJs-- 新建项目实例

    安装Nodejs: 下载地址:http://nodejs.org 设置环境变量,例如我将nodejs装在D:/program文件夹下,则设以下为系统环境变量 D:\Program\nodejs 安装E ...

  7. js获取光标位置

    js获取光标位置   var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ ...

  8. Cookie mapping技术

    摘要: RTB竞价中的cookie mapping技术解决DSP的cookie跟ad change的cookie匹配问题. Cookie mapping分为两步:(1)google ad exchan ...

  9. 为HTTP分类作序

    作者:zccst 曾经,认为对HTTP已经非常熟悉了,觉得不需要学习什么,知道2014年春天,让我感觉到自己是如此的无知. 举例: 1,对HTTP头部信息知道多少?每一个字段分别都可以取哪些值,每一个 ...

  10. POJ3268Dijkstra

    题意:给定n个点,m条边,求所有顶点中到顶点x的来回最短距离 分析:考虑到数据范围,选用Dijkstra,用Floyd会超时 #include <iostream> #include &l ...