Raphael的set使用
Raphael的set使用
$(function() {
initRaphael();
});
function initRaphael(e) {
var paper = Raphael(0, 0, 500, 500);
var r1 = paper.rect(25, 25, 50, 50);
var r2 = paper.circle(125, 50, 25);
var r3 = paper.text(200, 50, 'H').attr('font-size', '60px');
var g1 = paper.rect(100, 100, 50, 50);
var g2 = paper.circle(200, 125, 25);
var g3 = paper.text(50, 125, 'H').attr('font-size', '60px');
var b1 = paper.rect(175, 175, 50, 50);
var b2 = paper.circle(50, 200, 25);
var b3 = paper.text(125, 200, '?').attr('font-size', '60px');
// 创建set的第一种方式,set不会创建一个<g>集合;
var red_group = paper.set();
red_group.push(r1,r2,r3);
red_group.attr('fill','red');
// 创建set的第二种方式
var green_group = paper.set(g1,g2,g3);
green_group.attr('fill','green');
var blue_group = paper.set(b1,b2,b3).attr('fill','blue');
b3.attr('fill','gray');
var text_group = paper.set(r3,g3,b3).attr('font-size',60);
var all_groups = paper.set(red_group,blue_group,green_group).attr('stroke-width',0);
// 可以进行统一的移动
all_groups.attr('transform','T150,0');
}
Raphael的set使用的更多相关文章
- 对Raphael画图标的一个jquery简单封装
公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery ...
- 关于 Raphael
Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQTouch,以及SVG.VML处理库Ra ...
- 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译(一)
(原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...
- svg―Raphael.js Library(一)
Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图. ...
- raphael绘制矢量图2
最近重新再次考虑了下raphael,也没办法把公司的项目给换成raphael的渲染了.大体上的效果稍微考了下其实并不难实现,难点大多集中在对路线以及子路线和方案的转换,以及位置的确定,几乎每操作一步都 ...
- Raphael实现商品来源去向图
数据可视化 是很多大数据分析的一项重要工作,甚至有专门的团队做这项工作.Web上的各种图形(饼状图,柱状图等)一直被flash所垄断,随着HTML5的发展,SVG和Canvas也逐渐走上舞台.这不,产 ...
- svg―Raphael.js Library
Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图. ...
- 强大的矢量图形库:Raphael JS 中文帮助文档及教程
Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...
- raphael画图
// 在坐标(10,50)创建宽320,高200的画布 var paper = Raphael(10, 50, 320, 200); // 在坐标(x = 50, y = 40)绘制半径为 10 的圆 ...
- Raphael 目标点沿路径不断移动
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" ...
随机推荐
- 转:WebTest的常见问题与解决
WebTest的常见问题与解决录制好一个WebTest,加上各种规则,编辑后运行并不会像我们想象的那么顺利成功,往往会碰到很多问题,运行不成功的情况比较多,这样我们就遇到了如何解决这些问题的情形.1. ...
- 集合-字典(Lookup/SortedDictionary)
Lookup<TKey, TElement>非常类似于Dictionary<TKey, TValue>,但是把键映射在一个值集上. 必须调用ToLookup方法创建Lookup ...
- eclipse代码提示配置
打开 MyEclipse 6.5,然后“window”→ “Preferences” 2.选择“java”, 展开, “Editor”, 选择“Content Assist”. 3.选择“Conten ...
- Git上传文件
最近开始折腾node.js,顺便学习了Git上传的相关知识,找了许多关于Git如何上传项目的相关资料,最终发现一篇比较简易完整的文章, 在此分享一下喜悦的心情!下文是使用Git上传的完整教程: 将文件 ...
- 二叉堆(C#)
参考:http://www.cnblogs.com/skywang12345/p/3610390.html using System; using System.Collections.Generic ...
- PHP Markdown 解析器Parsedown
PHP Markdown 解析器Parsedown http://parsedown.org/demo
- hibernate--session的CRUD方法, delete, load,get,update,saveorupdate, clear, flush
删除方法: 新建的对象立马被删除 @Test public void testDelete() { Teacher t = new Teacher(); t.setName("t1" ...
- unable to fund vcvarsall.bat
通过easy_install安装gfirefly的时候,发生了unable to fund vcvarsall.bat的问题, 于是去网上搜索了一下,看到这个帖子,看起来应该是终极解决方案: 彻底解决 ...
- ZOJ 3946 Highway Project
1.迪杰斯特拉最小堆 #include<cstdio> #include<cstring> #include<cmath> #include<map> ...
- DNS正、反解析查询指令host、dig、nslookup
一.host指令格式:host [-a] FQDN [server] host -l domain [server]选项:-a :代表列出该主机所有的相关信息,包括 IP.TTL 与除错讯息等等-l ...