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. POJ 3905 Perfect Election

    2-SAT 裸题,搞之 #include<cstdio> #include<cstring> #include<cmath> #include<stack&g ...

  2. HTTP Request header

    HTTP Request header HTTP协议详解 - 小坦克 - 博客园 HTTP Request header 当今web程序的开发技术真是百家争鸣,ASP.NET, PHP, JSP,Pe ...

  3. Eclipse 安装插件

    Eclipse 安装插件 本文介绍Eclipse插件的安装方法.Eclipse插件的安装方法大体有三种:直接复制.使用link文件,以及使用eclipse自带的图形界面的插件安装方法. AD: 做为当 ...

  4. 如何创建一个要素数据类 IField，IFieldEdit，IFields，IFieldsEditI，GeometryDef，IGeometryDefEdit接口

    如何创建一个要素数据类 创建要素类用到了IFeatureWorkspace.CreateFeatureClass方法,在这个方法中有众多的参数,为了满足这些参数,我们要学习和了解下面的接口. IFie ...

  5. PAT (Advanced Level) 1003. Emergency (25)

    最短路+dfs 先找出可能在最短路上的边,这些边会构成一个DAG,然后在这个DAG上dfs一次就可以得到两个答案了. 也可以对DAG进行拓扑排序,然后DP求解. #include<iostrea ...

  6. linux 细节 问题解决

    Ubuntu 12.04 启动时停在Checking battery state…… 1.在停止的界面按下Ctrl+Alt+F1 2.reboot halt

  7. [iOS]C语言技术视频-09-枚举的定义

    下载地址: 链接: http://pan.baidu.com/s/1o625Ee2 密码: 8kp5

  8. ORACLE odbc驱动相关

    驱动下载 http://www.oracle.com/technetwork/topics/winsoft-085727.html http://www.oracle.com/technetwork/ ...

  9. STM32标准IIC驱动

    IIC(Inter-Integrated Circuit)总线是一种由 PHILIPS 公司开发的两线式串行总线,用于连接 微控制器及其外围设备.也是目前很流行的通讯总线,使用IIC总线做产品能够很大 ...

  10. iOS 发布流程

    1.登陆苹果开发者中心http://developer.apple.com(99美元账号) 2.进入itunes connect 3.选择Manage Your Apps 4.选择Add New Ap ...