0

私はグリッドを持っており、基本的にグリッド内の各長方形にツールチップ イメージを追加しようとしています。基本的に、最初に長方形のマウス オーバー イベントでキャンバスに画像を追加できるようにする必要があります。最終的には、各長方形には独自のイメージがあるため、長方形を追跡する必要があります...それらを配列に追加しますか?

ここに私がこれまでに得たものに対する私のフィドルがあります: http://jsfiddle.net/marseilles84/7ZzTh/1/

使用するサンプル画像ソースは次のとおりです。

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

1 に答える 1

0

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';
于 2013-01-09T22:38:02.210 に答える