Событие отключается после изменения масштаба его родительского div

Question

Используя KineticJS, я обнаружил, что после коэффициента масштабирования родительского div событие, помещенное на холст, отключается.

http://jsfiddle.net/Mxh42/

Пожалуйста, посмотрите ситуацию здесь.

Сначала вы можете навести курсор мыши на красный круг. Тогда всплывающее окно покажет. Затем, пожалуйста, нажмите кнопку, чтобы сделать круг маленьким. Затем вы снова можете переместить указатель мыши на новый маленький круг. Вы увидите, что ничего не происходит.

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

Это ошибка?

Answer 1

Итак, как положено в комментариях:

stage.draw() // will redraw your stage and could help you out

что касается масштабирования:

stage.setScale(x,y); //will do all your zooming for you at no loss of functionality

и мой личный фаворит:

stage.transitionTo({  //this will animate the zoom
     scale: {x: number, y: number},  //scale by some amount, you need x and y in an objet, not like with .setScale(x,y) where they are integers separated by a comma
     duration: 2  //duration is the amount of time the animation takes (in seconds, not milliseconds)
});

http://jsfiddle.net/Mxh42/5/