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. ...
随机推荐
- ubuntu14.04英文环境下安装中文输入法
ubuntu14.04英文环境下安装中文输入法 发表于1年前(2014-07-12 20:12) 阅读(4478) | 评论(0) 3人收藏此文章, 我要收藏 赞1 9月19日成都 OSC 源创会 ...
- Codeforces Round #364 (Div. 2)C. They Are Everywhere（尺取法）
题目链接: C. They Are Everywhere time limit per test 2 seconds memory limit per test 256 megabytes input ...
- UIStepper 缩放：UI的使用
// 实现文件:声明在对应的.h文件.继承至UIViewControllor - (void)viewDidLoad { [super viewDidLoad]; // 按钮 self.stp = [ ...
- 注解用法详解——@SuppressWarnings
一.前言 编码时我们总会发现如下变量未被使用的警告提示: 上述代码编译通过且可以运行,但每行前面的“感叹号”就严重阻碍了我们判断该行是否设置的断点了.这时我们可以在方法前添加 @SuppressWar ...
- SDOI2016 R1 解题报告 bzoj4513~bzoj4518
储能表 将n, m分解为二进制,考虑一个log(n)层的trie树,n会在这颗trie树上走出了一个路径,因为 行数 $ \le n$,所以在n的二进制路径上,每次往1走的时候,与m计算贡献,m同样处 ...
- (简单) POJ 1511 Invitation Cards，SPFA。
Description In the age of television, not many people attend theater performances. Antique Comedians ...
- python模块--ip地址转换为整数
python整数与IP地址转换 [转] 我们有时会将一个整数与IP地址进行互换,用python代码实现很简单 将一个整数如2000000,变为一个IP地址的方式 >>> import ...
- Spring--注入类型--setter
setter注入: package com.bjsxt.service; import com.bjsxt.dao.UserDAO; import com.bjsxt.model.User; publ ...
- HTML学习（五）链接
1.创建文本链接 <html> <body> <p> <a href="/index.html">本文本</a> 是一个 ...
- BZOJ 1257 [CQOI2007]余数之和sum ——Dirichlet积
[题目分析] 卷积很好玩啊. [代码] #include <cstdio> #include <cstring> #include <cmath> #include ...