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" ...
随机推荐
- 转:C#生成唯一值的方法汇总
这篇文章主要介绍了C#生成唯一值的方法汇总,有需要的朋友可以参考一下 生成唯一值的方法很多,下面就不同环境下生成的唯一标识方法一一介绍,作为工作中的一次总结,有兴趣的可以自行测试: 一.在 .NET ...
- zencart 掉炸天的tpl_main_page.php
<?php /** * Common Template - tpl_main_page.php * * @version $Id: tpl_main_page.php 7085 2007-09- ...
- JAVA实现的截屏程序
http://hadeslee.iteye.com/blog/125386 http://www.jb51.net/article/75114.htm JAVA截屏程序(第三版) JavaEXTSwi ...
- ZenCoding 个人理解和总结
我的理解:ZenCoding是一个html简写的语法,可以最快速的生成html. 不少IDE应该都支持,我用的intellij idea是支持的. ZenCoding表示和CSS/JS有相通之处,比如 ...
- [转] Eclipse 使用 Link 方式进行插件的安装
下方来自 http://www.iteye.com/topic/1113353 Eclipse 的插件安装方法一般有以下几种(以安装 SVN 插件为例说明,Eclipse 版本为:3.7/Indigo ...
- cakephp 2.0 源码解读(一)
lib - Cake -basic.php -bootstrap.php -Cache -Config -Configure -Controller -Core -Error -Event -I18n ...
- Quick Cocos2dx 版本更新
呵呵,不出所料,我又把项目的quick x版本从2.2.1升级到2.2.3了,不知道下次升级到3.x回事神马时候呢,好期待的说. 话说运行2.2.3的player的时候,老是提醒我显卡不支持openg ...
- 关于OC和Swift使用GIT创建项目
1.先进入码云,点击自己的头像 -> ,2.里面有一个SSH公钥,点击 ,3.之后在终端输入 ssh-keygen -t rsa -C “xxxxx@xxx.com”,注意:”” 要用英 ...
- JAVA基础--代理模式
interface Network{ public void browse() ; // 浏览 } class Real implements Network{ public void browse( ...
- Android实时监听网络状态
Android实时监听网络状态(1) 其实手机在网络方面的的监听也比较重要,有时候我们必须实时监控这个程序的实时网络状态,android在网络断开与连接的时候都会发出广播,我们通过接收系统的广播就 ...