如何给图像元素一个“;选择“;使用Raphael.js查看

How to give image element a "selected" look using Raphael.js

本文关键字：一个 选择 使用 查看 js Raphael 图像 图像元 元素      更新时间：2023-09-26

我使用Raphael.js在画布上绘制图像。我需要能够选择某些图像元素（我可以这样做），并使它们看起来像是被选中的（这就是问题所在）。

在Raphael.js之前，我使用普通的Html5画布和简单的矩形。删除选定的矩形并在同一位置绘制一个不同颜色的新矩形很简单。

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

所以问题是：

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

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

用户单击画布时绘制图像的代码：

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

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

我建议用某种级别的opacity授予image，并在单击时为其分配值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);
}​
相关文章：