raphael 支持group(简)

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(简)

相关文章