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. ...
随机推荐
- FZU 2107 Hua Rong Dao（暴力回溯）
dfs暴力回溯,这个代码是我修改以后的,里面的go相当简洁,以前的暴力手打太麻烦,我也来点技术含量.. #include<iostream> #include<cstring> ...
- jQuery之call()方法的使用
最近在做项目时候,写了几行关于DOM操作的代码,在方法中使用了this,在后期重构的时候,想将这段分离出来做成一个方法. 最开始想的很简单,就直接分离出来使用方法名称调用即可. 但是实际操作的时候没有 ...
- 考分鄙视(exam)
考分鄙视(exam) 题目描述 Whence这个学期考了n次试,每一次都有一个0-20000之间的整数分数.Whence本来的状态应该是每一次考试都比前一次多一分(除第一次),但由于他很不稳定,偏差可 ...
- C语言数据类型的表示范围
1.C和C++语言中基本的数据类型有:字符型(char),整形(short, int, long), 浮点型(float, double) 类型 字节数 类型 字节数 char 1 short ...
- bzoj 3879 虚树
题目大意: 给一个字符串,多次询问k个后缀,求它们两两间LCP长度总和 分析: 转化为后缀树,用虚树求 注意: 后缀树中代表后缀的点都是叶子节点 题目中取模并没有卵用 #include <cst ...
- iOS之NSPredicate（正则表达式和UIBarController）
本文转发至:https://segmentfault.com/a/1190000000623005 NSPredicate,这个类和我上一篇博文中提到的valueForKeyPath一样很强大.它的使 ...
- $.when().done().then()的用法
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...
- python--字符串操作（删除，替换）
示例: 替换字符串开头和结尾处的空格 1. [代码][Python]代码 跳至 [1] [全屏预览] view source print? 01 # -*- coding: utf-8 -*- ...
- RealView编译器常用特有功能（转）
源:RealView编译器常用特有功能 一. 关键字和运算符 1. __align(n):指示编译器在n 字节边界上对齐变量. 对于局部变量,n 值可为 1.2.4 或 8. 对于全局变量,n 可以具 ...
- 现在开始使用 ES6
ECMAScript已经在2015年6月正式发布了,这门语言一直保持稳定快速的发展而且新功能也在慢慢被现在主流的 JavaScript 引擎所接受.不过要想在浏览器端或者 Node 端直接运行 ES6 ...