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使用的更多相关文章

  1. 对Raphael画图标的一个jquery简单封装

    公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery ...

  2. 关于 Raphael

    Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQTouch,以及SVG.VML处理库Ra ...

  3. 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译(一)

    (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...

  4. svg―Raphael.js Library(一)

    Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图. ...

  5. raphael绘制矢量图2

    最近重新再次考虑了下raphael,也没办法把公司的项目给换成raphael的渲染了.大体上的效果稍微考了下其实并不难实现,难点大多集中在对路线以及子路线和方案的转换,以及位置的确定,几乎每操作一步都 ...

  6. Raphael实现商品来源去向图

    数据可视化 是很多大数据分析的一项重要工作,甚至有专门的团队做这项工作.Web上的各种图形(饼状图,柱状图等)一直被flash所垄断,随着HTML5的发展,SVG和Canvas也逐渐走上舞台.这不,产 ...

  7. svg―Raphael.js Library

    Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图. ...

  8. 强大的矢量图形库:Raphael JS 中文帮助文档及教程

    Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...

  9. raphael画图

    // 在坐标(10,50)创建宽320,高200的画布 var paper = Raphael(10, 50, 320, 200); // 在坐标(x = 50, y = 40)绘制半径为 10 的圆 ...

  10. Raphael 目标点沿路径不断移动

    <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" ...

随机推荐

  1. 转:WebTest的常见问题与解决

    WebTest的常见问题与解决录制好一个WebTest,加上各种规则,编辑后运行并不会像我们想象的那么顺利成功,往往会碰到很多问题,运行不成功的情况比较多,这样我们就遇到了如何解决这些问题的情形.1. ...

  2. 集合-字典(Lookup/SortedDictionary)

    Lookup<TKey, TElement>非常类似于Dictionary<TKey, TValue>,但是把键映射在一个值集上. 必须调用ToLookup方法创建Lookup ...

  3. eclipse代码提示配置

    打开 MyEclipse 6.5,然后“window”→ “Preferences” 2.选择“java”, 展开, “Editor”, 选择“Content Assist”. 3.选择“Conten ...

  4. Git上传文件

    最近开始折腾node.js,顺便学习了Git上传的相关知识,找了许多关于Git如何上传项目的相关资料,最终发现一篇比较简易完整的文章, 在此分享一下喜悦的心情!下文是使用Git上传的完整教程: 将文件 ...

  5. 二叉堆(C#)

    参考:http://www.cnblogs.com/skywang12345/p/3610390.html using System; using System.Collections.Generic ...

  6. PHP Markdown 解析器Parsedown

    PHP Markdown 解析器Parsedown http://parsedown.org/demo

  7. hibernate--session的CRUD方法, delete, load,get,update,saveorupdate, clear, flush

    删除方法: 新建的对象立马被删除 @Test public void testDelete() { Teacher t = new Teacher(); t.setName("t1" ...

  8. unable to fund vcvarsall.bat

    通过easy_install安装gfirefly的时候,发生了unable to fund vcvarsall.bat的问题, 于是去网上搜索了一下,看到这个帖子,看起来应该是终极解决方案: 彻底解决 ...

  9. ZOJ 3946 Highway Project

    1.迪杰斯特拉最小堆 #include<cstdio> #include<cstring> #include<cmath> #include<map> ...

  10. DNS正、反解析查询指令host、dig、nslookup

    一.host指令格式:host [-a] FQDN [server] host -l domain [server]选项:-a :代表列出该主机所有的相关信息,包括 IP.TTL 与除错讯息等等-l ...