Raphael.jsを使用して画像要素に「選択された」外観を与える方法

Question

私はRaphael.jsを使用して画像をキャンバスに描画しています。私は特定のイメージ要素を選択できるようにする必要があります（これは私ができます）、選択されたように見えるようにする必要があります（これが問題です）。

Raphael.jsの前私は通常のHtml5キャンバスと単純な長方形を使用しました。選択した矩形を削除して、同じ場所に異なる色の新しい矩形を描画するのは簡単でした。

しかし、今ではイメージを使用しているので、別の話です。私が使っている画像はhereです。それは小さなgifです。

そこで質問（複数可）：

1. は、プログラムRaphaël.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 
}); 

は、この完全に悪い考えです：ユーザーがキャンバスをクリックしたときに画像を描画するための

コード？私の目標を達成する良い方法はありますか？

Answer 1

私はいくつかのレベルの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); 
}​