如何给图像元素的“选择”外观效果Raphael.js

我使用Raphael.js绘制图像的画布。我需要能够选择某些图像元素（我可以这样做），并使它们看起来像被选中（这是问题）。如何给图像元素的“选择”外观效果Raphael.js

Raphael.js之前，我经常使用HTML5画布和简单的矩形。删除选定的矩形很简单，并用不同的颜色绘制一个新的矩形到同一个地方。

但现在，我使用的图像，这是一个不同的故事。我正在使用的图像是here。这是一个小小的gif。

所以问题（S）：

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

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

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

这是完全坏主意：

因为当用户点击在画布上绘制图像的代码？有没有更好的方法来实现我的目标？

来源

2012-04-03 Spitz

我会建议一些级别的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); 
}

来源

2012-04-03 22:49:53

感谢您的建议！我结束了类似的事情。为我的nodeimage-element创建了一个自定义函数，该函数使用JQuery为不透明度更改设置动画。我使用字典来跟踪单击/选择状态的单个元素，以便我知道何时开始和停止动画。我不是这个解决方案完全满意，因为这个“闪烁”的感觉并没有真正从背景中跳出来.. – Spitz 2012-04-04 11:52:29

这是礼貌的接受答案，或者赞成票吧，如果你发现它正确或有用。谢谢。 – 2012-04-04 12:20:40

BTW，它似乎是多余的使用jQuery的动画，你可以使用[内置拉斐尔的能力（http://raphaeljs.com/reference.html#Element.animate）用于这一目的。 – 2012-04-04 12:22:47

如何给图像元素的“选择”外观效果Raphael.js

回答

相关问题