Question

好吧所以我想选择一个元素让我们说一个圆然后如果我想取消选择它我可以点击它取消选择它或点击另一个元素取消选择前一个元素并选择新元素。有一个先前的堆栈溢出问题可以解决我正在讨论的问题。

这是链接：Raphael element selection problem有一个jsfiddle，可以很好地适用于两个元素。我想在做类似的事情之前实现我所谈论的功能。任何建议都会有所帮助。

这是我尝试创建但未成功的小提琴的链接。 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纸质对象，一组将成为该组一部分的对象，该组的任意名称（默认为“默认”），以及所选的和未经选择的国家。它将集合中的每个元素标记为属于特定的多选组。单击其中一个时，它将取消选择该组的所有成员，然后仅将所选属性应用于单击的元素。

这可以很容易地扩展到单击回调或动画 - 这只是进一步功能的线框。

这是随机位置demonstrates the use of two select groups（圆圈和正方形）的小提琴。

拉斐尔选择援助

1 个答案: