javascript - KineticJS setScale/Zoom 问题 - 随机线

Question

如果我使用 KineticJS 设置比例/缩放，我会收到一个奇怪的错误。出现随机线条。

EDIT1:好的。看起来如果我将 scaleRate 设置为 0.25、0.125、0.0625 等，它就可以工作。还有其他修复吗？

EDIT2:嗯。 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"
});

或添加绿色背景

或增加图 block 宽度和高度