1

好的，所以我想选择一个元素让我们说一个圆圈，然后如果我想取消选择它，我可以单击它以取消选择它或单击另一个元素以取消选择前一个元素并选择新的元素。有一个先前的堆栈溢出问题可以理解我在说什么。

这是链接：Raphael element selection problem里面有一个 jsfiddle 可以很好地处理两个元素。我想实现我在做类似的事情之前谈到的功能。任何的意见都将会有帮助。

这是我尝试创建但未成功的小提琴的链接。http://jsfiddle.net/stewbydoo/jwAzS/1/

4

1 回答 1

3

我会稍微抽象一下以使其尽可能可重用。这是一个粗略的例子：

function CreateMultiselectGroup(paper, set, groupID, selAttr, unselAttr) {
    groupID = groupID || "default";
    selAttr = selAttr || {
        fill : 'red',
        stroke : 'black',
        'stroke-width' : 3
    };
    unselAttr = unselAttr || {
        fill : 'white',
        stroke : 'gray',
        'stroke-width' : 1
    };
    var multiselector = function(paper, selectedEntity) {
        paper.forEach(function(el) {
            if(el.data("multiselect-group") == groupID) {
                el.attr(unselAttr);
            }
        });
        selectedEntity.attr(selAttr);
    };
    set.forEach(function(el) {
        el.data("multiselect-group", groupID);
        el.click(function() {
            multiselector(paper, el);
        });
    });
}

该函数CreateMultiselectGroup接受一个 Raphael 纸对象、一组将成为组的一部分的对象、组的任意名称（默认为“默认”）以及选定和未选定状态的属性集。它将集合中的每个元素标记为属于特定的多选组。单击其中之一时，它会取消选择组的所有成员，然后将所选属性仅应用于单击的元素。

这可以很容易地扩展到与点击回调或动画一起使用——这只是一个用于进一步功能的线框图。

这是一个演示在随机位置使用两个选择组（圆形和正方形）的小提琴。

于 2012-08-02T22:37:46.650 回答