KineticJS を使用して、親 div のズーム率の後、キャンバスに配置されたイベントが無効になっていることがわかりました。
様子はこちらをご覧ください。
まず、赤い円の上にマウスを移動できます。するとポップアップが表示されます。次に、ボタンを押して円を小さくしてください。次に、再びマウスを新しい小さな円に移動できます。何も起こらないことがわかります。
HTML
<div id="wrap" style="width:200px;height:200px">
<div id="container"></div>
</div>
<input type="button" value="make it 50%" onClick="document.getElementById('container').style.zoom = '0.5';">
JS
var stage = new Kinetic.Stage({
container: 'container',
width: 200,
height: 200
});
var layer = new Kinetic.Layer({
x: 100,
y: 100
});
var arc = new Kinetic.Shape({
drawFunc: function(canvas) {
var ctx = canvas.getContext();
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.beginPath();
ctx.lineWidth = 10;
ctx.arc(50, 50, 40, 0, 2*Math.PI, false);
ctx.closePath();
ctx.fill();
ctx.stroke();
canvas.fillStroke(this);
}
});
arc.on('mouseover', function() {
alert("mouseover detected");
});
layer.add(arc);
stage.add(layer);
これはバグですか?