javascript - 拉斐尔选择协助

Question

好吧，我想选择一个元素让我们说一个圆圈然后如果我想取消选择它我可以单击它取消选择它或单击另一个元素取消选择前一个元素并选择新元素。之前有一个堆栈溢出问题可以理解我正在谈论的内容。

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

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

Answer 1

我会对此进行一些抽象，以使其尽可能可重用。这是一个粗略的例子:

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 纸对象、一组将成为组一部分的对象、组的任意名称(默认为“default”)和属性集对于选定和未选定状态。它将集合中的每个元素标记为属于特定的多选组。单击其中一个时，它会取消选择该组的所有成员，然后仅将选定的属性应用于单击的元素。

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

这是一个 demonstrates the use of two select groups 的 fiddle (圆圈和正方形)在随机位置。