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" ...
随机推荐
- HDU 1217 Arbitrage(Floyd的应用)
给出一些国家之间的汇率,看看能否从中发现某些肮脏的......朋友交易. 这是Floyd的应用,dp思想,每次都选取最大值,最后看看自己跟自己的.....交易是否大于一.... #include< ...
- 深入浅出Ajax(四)
function initPage() { btn.onmouseover = buttonOver; btn.onmouseover = buttonOut; } 如上,浏览器只会运行指定的最后一个 ...
- Android学习笔记之ContentProvider
读取其他应用程序共享的数据 以下示例为读取联系人信息 package com.jiahemeikang.helloandroid; import com.jiahemikang.service.Ech ...
- margin 塌陷现象 与 注意事项
1.在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现象. 但是,脱标之后就不会出现margin的塌陷现象. 2.margin:0 auto; 会让盒子水平居 ...
- How to get HTML code of a WebElement in Selenium
http://stackoverflow.com/questions/32234205/how-to-get-html-code-of-a-webelement-in-selenium WebElem ...
- hibernate--对象的三种状态Transient,Persistent,Detached
Transient:刚new出来的对象 Persistent: sava或者update之后的状态 Detached: close或者clear之后 test函数: @Test public void ...
- Docker - 容器编排工具 compose 之安装
准备 首先,在使用和安装 docker compose之前,我们应该确保我们已经安装了 docker engine. 安装 官网上面有好多种安装方式,由于我们现在是在使用Docker, 个人感觉应该以 ...
- ArcEngine部分工作总结
Arcengine工作总结地物点查询本部分可以在一个窗体中实现,也可以在两个窗体中实现.由于工作要求本人是在两个窗体中实现的:弹出窗体的名称为FormQuery主窗体单机查询时间的代码FormQuer ...
- [iOS]C语言知识点系列视频
C语言知识点系列视频 目录 C语言技术视频-01-变量的定义 C语言技术视频-02-程序分支结构(if...else) C语言技术视频-03-程序分支结构(switch) C语言技术视频-04-程序循 ...
- ubuntu如何安装Mac主题
1.安装 Gnome 经典桌面 sudo apt-get install gnome-session-fallback 没有安装桌面的可安装 Gnome 桌面: sudo apt-get instal ...