如何給圖像元素的「選擇」外觀效果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

回答

相關問題