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. js实现input button从不可用变为可用

    有时候明明是些很简单的东西,因为自己的一些大意,可能就在那圈子里一直兜兜转转,好久都绕不出来. 所以我也愿意把这些很简单的愚蠢写出来,与君共享~ 首先大家知道<input>有一个名叫“bu ...

  2. IIS7无后缀URL部署问题 MVC4 MVC URL映射 windows server 2008

    前言和中间一段都是我找到问题的过程和思维方法.没兴趣的可以直接跳过看后面的问题和解决. 前言: 问题发生在站点完成后,部署到服务器上.以为这个是最轻松的工作.结果悲剧了.windows server ...

  3. hibernate--session的CRUD方法, delete, load,get,update,saveorupdate, clear, flush

    删除方法: 新建的对象立马被删除 @Test public void testDelete() { Teacher t = new Teacher(); t.setName("t1" ...

  4. MulticastSocket绑定端口的问题

    该文章由 Binkery 发布于 Binkery技术博客 http://www.binkery.com 如转载请注明出处,该文章的链接地址为 http://www.binkery.com/archiv ...

  5. Android Camera 调用流程总结

    1.总体介绍  Android Camera框架从整体上看是一个client/service架构.有两个进程,一个是client进程,可以看成AP端,主要包括Java代码和一些native层的c/c+ ...

  6. Post data using ajax in laravel 5

    转自:http://www.tuicool.com/articles/2u2mmmu Post data using ajax in laravel 5 to controller If you ar ...

  7. MySQL 表的命令

    1.查看表的结构: desc 表名; show columns from 表名; describe 表名; show create table 表名; 2.修改表名 rename table 原表名 ...

  8. Android小功能之垂直滚动条

    <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android=" ...

  9. STM32驱动DHT11温湿度传感器

    DHT11 是一款湿温度一体化的数字传感器.该传感器包括一个电阻式测湿元件和一个 NTC 测温元件,并与一个高性能 8 位单片机相连接.通过单片机等微处理器简单的电路连接就能够 实时的采集本地湿度和温 ...

  10. 网络请求工具--AFNetworking 分类： ios技术 2015-02-03 08:17 76人阅读 评论(0) 收藏

    在我们开发过程中,网络请求是必不可少的,对于网络框架,现在主流的大概只有三类:ASI框架: HTTP终结者(已经停止更新了),MKNetworkKit ,AFN.今天我就来浅谈一下这个AFN AFNe ...