html - 添加图像作为画布上矩形的工具提示

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';