raphael 不支持group,里面有的set方法,只是把对象数组存起来,方法调用的时候,遍历都调用下,但是在实际需求上面感觉group还是瞒有用处的,可以控制group下面的节点的交互

比如地图区域下面的中心点和对应的文字,在悬停的时候区域变色,就只要在group结点下面定义事件就可以了,就不用区域,文字,中心点都定义事件了

本文的方法只是简单的修改了下源码,并没有完全的测试,需要实际使用的话,还有坑,主要方便借鉴

  1.在paper对象上面扩展group方法,返回的element对象上面增加"circle,ellipse,image,path,print,rect,text"方法

    

paperproto.group = function () {
var out = R._engine.group(this);
this.__set__ && this.__set__.push(out);
out.canvas = out.node;//节点添加方法,都是在canvas属性的结点上添加,所以增加属性,指向自己的结点
var t = "circle,ellipse,image,path,print,rect,text".split(",");//"circle,ellipse,image,path,print,rect,text"方法扩展
for (var i = 0, len = t.length; i < len ; i++) {
out[t[i]] = (function (key) {
return function () {
return paperproto[key].apply(this, arguments);
}
})(t[i]);
}
return out;
};

  2._engine增加group方法,svg和vml分别是

  

R._engine.group = function (svg) {
var el = $("g");
svg.canvas && svg.canvas.appendChild(el);
var res = new Element(el, svg);
res.type = "g";
return res;
};
R._engine.group = function (vml) {
var el = createNode("group");
var res = new Element(el, vml);
vml.canvas && vml.canvas.appendChild(el);
return res;
};

  3. 其实简单的修改,差不多了,在调用animate方法提示paper对象不存在

  TypeError: element.paper.customAttributes is undefined
  简单处理下,在Element方法中将paper属性指向为最外层的paper对象
  

var t = svg;
while(t.paper) {
t = t.paper;
}
this.paper = t;
//vml下自行修改下
  实际项目中group的应用,在控件组合中间感觉比较有用些,实际情况还是应该实际处理,因为group内的元素,显示顺序就固定下来了,不可能在中间插入显示其他group的元素,显示交互上面有些限制,在实际场景下还是要考虑是否是用group
 
  SVG 调整页面的 z-index 只能是通过调整页面结点的插入顺序,搜索下来也有折中的做法,就是一些svg做在不同的div中,修改div的z-index

  

raphael 支持group(简)的更多相关文章

  1. c# datatable.select() 支持group by

    不支持group by ,支持order by.如果要使用group by的话,可以使用linq,这是C#3.0的内容.给你个示例static void Main(string[] args){ Da ...

  2. HIVE 不支持group by 别名

    hive不支持group by 别名,如果需要group by 别名的情况,可以使用 别名的 值作为group by 的值

  3. 坑人的Mysql5.7 (默认不支持Group By语句)(转)

    部署项目时,项目启动完毕.点击有group by 查询语句时出现错误,界面中没有该有的数据.查询log日志发现错误 Expression #1 of SELECT list is not in GRO ...

  4. mysql5.7不支持group by的解决办法

    1.查看sql_mode select @@global.sql_mode 查询出来的值为: ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DAT ...

  5. mysql 不支持group by的解决方案

    进入mysql命令行 执行如下两句语句 set global sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_ ...

  6. SQL中Group By的使用

    1.概述 2.原始表 3.简单Group By 4.Group By 和 Order By 5.Group By中Select指定的字段限制 6.Group By All 7.Group By与聚合函 ...

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

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

  8. SQL中Group By 的使用

    1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...

  9. group by的使用

    1.概述 2.原始表 3.简单Group By 4.Group By 和 Order By 5.Group By中Select指定的字段限制 6.Group By All 7.Group By与聚合函 ...

随机推荐

  1. CSS3阴影 box-shadow的使用

      text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[ins ...

  2. C语言strcmp()函数:比较字符串(区分大小写)

    头文件:#include <string.h> strcmp() 用来比较字符串(区分大小写),其原型为: int strcmp(const char *s1, const char *s ...

  3. sql远程连接卡死解决方法

    快捷键Win+R   输入CMD 回车  输入 netsh winsock reset 然后重启电脑  问题解决OK

  4. HDU1789(Doing Homework again)题解

    HDU1789(Doing Homework again)题解 以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定任务分数和其截止日期,每日可完成一任务,输出当罚分尽可能小时 ...

  5. Ubuntu packages multi-architectures

    Show current machine architecture dpkg --print-architecture It's built-in to the currently installed ...

  6. js中继承的方法总结(apply,call,prototype)

    一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 代码如下: <SPAN style="<SPAN style="FONT-SIZE ...

  7. leetcode算法刷题(四)——动态规划(二)

    又到了晚上,动态规划,开刷! 第121题 Best Time to Buy and Sell Stock 题目的意思:给予一个数组price,表示特定股票在某天的股价,里面第i个数表示第i天的价格.只 ...

  8. SQL Server 文件流文件组

    背景: 文件流通过在文件系统上存储blob数据文件将数据库引擎与ntfs文件集成在一起,使用t-sql和win32访问数据. 文件流使用windows系统来缓存数据,有助于在减少文件流数据对sql s ...

  9. 几种常用单片机I/O口线的驱动能力

    摘要: 详细分析了几种常见单片机的I/O口结构,并据此分析其驱动能力大小 在控制系统中,经常用单片机的I/O口驱动其他电路.几种常用单片机I/O口驱动能力在相关的资料中的说法是:GMS97C2051. ...

  10. poj3429(有错)

    不知道为什么错.. /************************************************************************* > File Name: ...