1

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

これはバグですか？

4

1 に答える 1

0

したがって、コメントにあるように：

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/

于 2013-01-25T16:04:10.480 に答える