添加圖像作爲工具提示在畫布上的矩形

Question

我有一個網格，我期待基本上爲網格中的每個矩形添加工具提示圖像。基本上，首先我需要能夠添加一個圖像到矩形鼠標懸停事件的畫布上。最終每個矩形都會有它自己的圖像，所以我需要跟蹤矩形......我將它們添加到數組中嗎？

這裏是我搗鼓什麼，我這麼遠： http://jsfiddle.net/marseilles84/7ZzTh/1/

下面是使用示例圖片來源： 「http://www.html5canvastutorials.com/demos/assets/yoda。 JPG「;

<div id="container"></div>​ 

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 1000, 
    height: 500 
}); 

var layer = new Kinetic.Layer(); 


for (var i=0; i<7; i++) 
{ 
    for(c=0; c<18; c++) 
    { 
       var colorPentagon = new Kinetic.Rect({ 
       x: (45*c), 
       y: 45*i, 
       width:40, 
       height:40, 
       fill: 'red', 
       stroke: 'black', 
       strokeWidth: 4, 
       draggable: true 
      }); 

      colorPentagon.on('mouseover touchstart', function() { 
         //code here 
        }); 

      layer.add(colorPentagon);  
    } 
} 

stage.add(layer); 

Answer 1

http://jsfiddle.net/7ZzTh/2/

這可能是更多的，你在找什麼。

 colorPentagon.on('mouseover touchstart', function() { 
       var userPos = stage.getUserPosition(); 
       yoda.setPosition(userPos.x,userPos.y); 
       layer.add(yoda); 
        layer.draw(); 
     }); 

     colorPentagon.on('mouseout touchstart', function() { 
        yoda.remove(); 
        layer.draw(); 
     }); 

在開始的時候你想：

var imageObj = new Image(); 
    var yoda = new Kinetic.Image({ 
     x: 0, 
     y: 0, 
     image: imageObj, 
     width: 106, 
     height: 118 
    }); 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';