javascript - 如何使用 Raphael.js 为图像元素提供 "selected"外观

Question

我正在使用 Raphael.js 将图像绘制到 Canvas 上。我需要能够选择某些图像元素(我可以做到)并使它们看起来像被选中(这就是问题)。

在 Raphael.js 之前，我使用常规的 Html5 Canvas 和简单的矩形。删除选定的矩形并在同一位置绘制一个具有不同颜色的新矩形非常简单。

但现在我使用图像，情况就不同了。我使用的图像是 here 。这是一个小 gif。

所以问题:

1. 是否有一种简单的方法可以通过编程方式更改 Raphael.js 图像元素的颜色？
2. 我可以通过更改图像元素的不透明度来使其闪烁吗？

唯一的要求是所选元素必须是可移动的。

当用户点击 Canvas 时绘制图像的代码:

var NodeImage = RCanvas.image("../vci3/images/valaisin.gif", position.x, position.y, 30, 30);           
NodeImage.toFront();
RSet.push(NodeImage);
NodeImage.node.id = 'lamp';
NodeImage.node.name = name;
NodeImage.click(function() {
    console.log("Clicked on node " + NodeImage.node.name);  
    // Here should be the code that blinks or changes color or does something else
});

这完全是个坏主意吗？有更好的方法来实现我的目标吗？

Answer 1

我建议为图像授予一定级别的不透明度，并在点击时为其分配1值:

NodeImage.attr('opacity', 0.6);
// ...
NodeImage.click(function() {
    this.attr('opacity', 1);
});

当然，您可能需要管理形状的选定状态，以便稍后关闭选定的样式。事实上，您需要以相同的方式管理所有可选形状，所以让我们这样做:

// keep all selectable shapes in a group to easily manage them
var selectableShapesArray = [NodeImage, otherNodeImage, anotherSelectableShape];

// define the behavior for shape click event
var clickHandler = function() {
    for (var i in selectableShapesArray) {
        var image = selectableShapesArray[i];
        if (image.selected) {
            image.attr('opacity', .6);
            image.selected = false;
            break;
        }
    }
    this.attr('opacity', 1);
    this.selected = true;
}

// attach this behavior as a click handler to each shape
for (var i in selectableShapesArray) {
    var shape = selectableShapesArray[i];
    shape.click(clickHandler);
}​