Raphael初始化，path，circle，rect，ellipse，image
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的更多相关文章
- EXTJS4自学手册——简单图形（circle,rect,text,path）
一.画圆形: xtype: 'button', text: '画图一个圆', handler: function (btn) { Ext.create('Ext.window.Window', { l ...
- area标签circle/rect/poligon坐标
<img src="images/02.gif" title="flower" usemap="#mm" /> <map ...
- 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 ...
- Raphael path 拖动实现
让 Raphael 的 Path 动起来 Raphaël 是一个很实用的线上矢量图操作 Javascript 库.使用简单,一个值得一提的卖点是通过抽象出共同的接口屏蔽了 SVG 和 VML 之间的差 ...
- Leaflet：Path、Polyline、Polygon、Rectangle、Circle、CircleMarker
下边介绍Vector Layer Path(Layer) Path是其他Vector Layer的父类,比如Polyline.Polygon.Rectangle.Circle.CircleMarker ...
- raphael 支持group(简)
raphael 不支持group,里面有的set方法,只是把对象数组存起来,方法调用的时候,遍历都调用下,但是在实际需求上面感觉group还是瞒有用处的,可以控制group下面的节点的交互 比如地图区 ...
- Raphael Js矢量库API简介：
Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...
- 利用raphael画图
raphael是一个js的矢量库,可以js操作DOM可以实现柱形图.走势图等一些基本的图形: 一.使用: 在html中设置<div class="my"></di ...
- SVG path d Attribute
Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C Recommendation 16 August 2011 http://www.w3. ...
随机推荐
- hrbustoj 1125 循环小数 II（小数变分数+极限思想）
#include<stdio.h> #include<string.h> #include<algorithm> #include<math.h> #i ...
- bootstrap中的居左和居右
1.pull-left和pull-right 2.text-left.text-center和text-right
- Android MulticastSocket IP组播
MulticastSocket是对等的关系,也就是他们通过IP多点组播保留的地址来相互接收在这个组的Socket发送的消息 我写了一个例子,MultiSocketB是一个service,用于先接收再发 ...
- c语言基础编程
作业: 1.二进制,八进制,十进制之间的相互转换 2.测试转义字符 3.测试强制类型转换 4.测试赋值运算符 = += -= *= /= %= <<= >>= ^= |= & ...
- 转载：ionic+nodejs开发遇到的跨域和post请求数据问题
转载自:http://www.cnblogs.com/ytu2010dt/p/5471366.html 最近学习ionic+nodejs开发混合app中遇到了一些问题,在此总结一下. 项目地址 htt ...
- (简单) POJ 3126 Prime Path，BFS。
Description The ministers of the cabinet were quite upset by the message from the Chief of Security ...
- stm32-ucos移植lwip-1（raw）
之前在裸机环境下移植了lwip,功能还是很强大的,但是就我看来,这和uip其实差别也不大,其实lwip更强大的功能需要在操作系统之下才能发挥出来,今天就来做这个 首先我们需要移植操作系统,系统选择uc ...
- K-means算法简介
K-means 算法是无监督的 聚类算法,算法简单,有效. K-means算法: 输入参数: 指定聚类数目 k,训练集 X 输出 : k 个聚类 算法描述: K-means 算法 是一个 迭代算法,每 ...
- (简单) POJ 3468 A Simple Problem with Integers , 线段树+区间更新。
Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...
- IOS_FMDB有关字典、数组存储及获取问题
http://blog.csdn.net/betterbb/article/details/25984455 FMDB存储字典或数组时会变成字符串存入sqlite里,但如果不将其转换成json格式存储 ...