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 回答