KineticJS setScale / Zoom问题 - 随机线

Question

如果我用KineticJS设置比例/变焦，我会得到一个奇怪的错误。 出现随机线条。

编辑1：好的。 看起来如果我将scaleRate设置为0.25,0.125,0.02525等就可以了。 还有其他修复吗？

编辑2：好吧。 EDIT1并不是一个真正的解决方案。 如果我缩放整个页面（浏览器），则会再次显示这些行。

---

http://jsfiddle.net/2trNz/

HTML：

<a href="#" id="zo">Zoom Out</a>
<a href="#" id="zi">Zoom In</a>
<div id="viewport"></div> 

使用Javascript：

var stage = new Kinetic.Stage({
            container: 'viewport',
            width: 500,
            height: 500
        });

var layer = new Kinetic.Layer();

var tileWidth = tileHeight = 32;

for(var row = 0; row < 20; row++) {
    for(var column = 0; column < 20; column++) {
        var tile = new Kinetic.Rect({
                                x: column * tileWidth,
                                y: row * tileHeight,
                                fill: "green",
                                width: tileWidth,
                                height: tileHeight,
                            });
        layer.add(tile);
    }  
}

stage.add(layer);
stage.draw();

var scale = 1;
var scaleRate = 0.05;
$("#zo").on('click', function(e) {
    scale -= scaleRate;
    layer.setScale(scale);
    stage.draw();
    e.preventDefault();
});
$("#zi").on('click', function(e) {
    scale += scaleRate;
    layer.setScale(scale);
    stage.draw();
    e.preventDefault();
});

---

知道如何解决这个问题吗？

提前致谢！

Answer 1

我认为问题在于四舍五入。 如何解决：

添加中风

new Kinetic.Rect({
    x: column * tileWidth,
    y: row * tileHeight,
    fill: "green",
    width: tileWidth,
    height: tileHeight,
    stroke : "green"
});

或添加绿色背景

或增加瓷砖的宽度和高度

Answer 2

线条是由于缩放而使瓷砖分开的空隙。

你可以将你的瓷砖拉伸1px来弥补差距：

width: tileWidth+1,
height: tileHeight+1,