レイヤ化の問題に遭遇しましたが、バグがどこにあるのかわかりません。最初に、ステージと同じサイズの特定のイメージレイヤーにイメージをオンロードします。次に、適切な imagelayer.add(image)、circlelayer.add(circle)、stage.add(imagelayer)、stage.add(circlelayer) を使用して、円を別の円レイヤーに作成します。これはうまくいきます。ここで、mouseover および mouseout イベントを追加しようとすると、たとえば alert() を使用すると、mouseout イベントの firebug で次のエラーが発生します。誰かが同様の問題に遭遇しましたか? ありがとう
TypeError: this.targetShape が null です
this.targetShape._handleEvent('mouseleave', evt, shape);
ここに私のコードのスニペットがあります:
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: 'container',
width: 721,
height: 702
});
var imageLayer = new Kinetic.Layer();
var tagLayer = new Kinetic.Layer();
var floorImg = new Kinetic.Image({
image: imageObj,
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight()
});
imageLayer.add(floorImg);
var tagImg = new Kinetic.Circle({
x: 100,
y: 100,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
tagImg.on("mouseout touchend", function(){
alert("HERE")
}, false);
tagLayer.add(tagImg);
stage.add(imageLayer);
stage.add(tagLayer);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'layout_good.png';