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

我建议为 image 赋予某种级别的 opacity，并在点击时为其分配值 1:

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

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

// 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);
}​