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. Struts2利用注解实现action跳转

    使用注解来配置Action的最大好处就是可以实现零配置,但是事务都是有利有弊的,使用方便,维护起来就没那么方便了. 要使用注解方式,我们必须添加一个额外包:struts2-convention-plu ...

  2. 前端UI

    一个非常好的前端UI,值得研究下 http://semantic-ui.com/

  3. BNU OJ 51005 BQG's Quadrilateral Bricks

    #include<cstdio> #include<cstring> #include<cmath> #include<vector> #include ...

  4. Cocos2dx 学习笔记整理----第一个项目

    接上一节, 进入新建的项目下面的proj.win32下面,找到项目名.sln文件(我的是game001.sln),双击会通过VS2010打开.(当然,你装了VS什么版本就是什么版本) 将你的项目设为启 ...

  5. (简单) POJ 1562 Oil Deposits,BFS。

    Description The GeoSurvComp geologic survey company is responsible for detecting underground oil dep ...

  6. JS中Exception处理

    程序开发中,编程人员经常要面对的是如何编写代码来响应错误事件的发生,即例外处理(exception handlers).如果例外处理代码设计得周全,那么最终呈现给用户的就将是一个友好的界面.否则,就会 ...

  7. list集合怎么转化成一个javaBean对象,及常见的使用方法(全)

    一.List集合的用法 1.list集合添加实体并输出 for (int i = 0; i < list.size(); i++) { javabean obj= (javabean)list. ...

  8. CodeForces 626C Block Towers

    构造AC的.左右两边都先不用6的倍数,然后哪边数字大那一边往回退一下,然后再比较哪边数字大.......直到结束 #include<cstdio> #include<cstring& ...

  9. POJ 3991 Seinfeld

    首先进行一次括号匹配,把正确匹配的全部删去. 删去之后剩下的状态肯定是 L个连续右括号+R个连续左括号. 如果L是偶数,答案是L/2+R/2: 否则答案是 (L-1)/2+(R-1)/2+2: #in ...

  10. Java-JNA调用DLL(转)

    源:JNA调用DLL 介绍 给大家介绍一个最新的访问本机代码的Java框架—JNA. JNA(Java Native Access)框架是一个开源的Java框架,是SUN公司主导开发的,建立在经典的J ...