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. CodeForces 591B Rebranding

    水题 #include<cstdio> #include<cstring> #include<cmath> #include<vector> #incl ...

  2. UITextField和UIViewConteoller

    UITextField控件 UITextFiled常用属性和方法   UITextField是常用的文本输入控件,比如我们用的QQ的登录界面,词典输入要查询的单词都使用了文本框控件,如下图所示.之前介 ...

  3. Delphi 的绘图功能[10] - TFONT 类

    Delphi 的绘图功能[10] - TFONT 类 ;DEFAULT_CHARSET     = ;SYMBOL_CHARSET      = ;SHIFTJIS_CHARSET    = ;HAN ...

  4. ural1650 Billionaires

    Billionaires Time limit: 3.0 secondMemory limit: 64 MB You probably are aware that Moscow holds the ...

  5. ural1553 Caves and Tunnels

    Caves and Tunnels Time limit: 3.0 secondMemory limit: 64 MB After landing on Mars surface, scientist ...

  6. POJ 2482 Stars in Your Window

    线段树+离散化+扫描线 AC之后,又认真读了一遍题目,好文章. #include<cstdio> #include<map> #include<algorithm> ...

  7. 一道题看懂OC的文件管理：NSFileManager，计算文件包含内存大小

    计算文件夹下所有文件的大小 // 查看错误信息 __autoreleasing NSError *error; // 文件管理对象 NSFileManager *manager = [NSFileMa ...

  8. openstack controller ha测试环境搭建记录（五）——配置rabbitmq集群

    配置rabbitmq集群的步骤非常简单,因为其本身含集群功能,参考openstack官网文档:http://docs.openstack.org/ha-guide/controller-ha-rabb ...

  9. (中等) HDU 4979 A simple math problem. , DLX+重复覆盖+打表。

    Description Dragon loves lottery, he will try his luck every week. One day, the lottery company brin ...

  10. (中等) HDU 1495 非常可乐，BFS。

    Description 大家一定觉的运动以后喝可乐是一件很惬意的事情,但是seeyou却不这么认为.因为每次当seeyou买了可乐以后,阿牛就要求和seeyou一起分享 这一瓶可乐,而且一定要喝的和s ...