0

我在使用craftyjs时遇到了这个问题:

当我尝试缩放视口(画布)时,对象周围出现白线(背景颜色)。

我认为这是因为半像素,但我似乎无法找到解决此问题的方法。有谁知道该怎么做?

编辑:小提琴:http: //jsfiddle.net/ysDtQ/44/

Crafty.init(960,540);
Crafty.canvas.init();  
Crafty.scene("loading", function() {
Crafty.background("#000");
Crafty.sprite(1200,768,"http://us.123rf.com/400wm/400/400/criminalatt/criminalatt1010/criminalatt101000007/8072257-gras-textuur-straight.jpg", {background : [0,0]});
Crafty.sprite(150,150,"http://www.fpmheemskerk.com/STooNeD.png",{stoo:[0,0]});
Crafty.e('2D, Canvas, background').attr({x:0, y:0, w:1200, h:798, z:1, alpha:1});
Crafty.e('2D, Canvas, stoo').attr({x:0, y:0, w:150, h:150, z:2, alpha:1}).bind("EnterFrame",function(){this.x += 0.01;});
Crafty.viewport.scale(1.51111);
});
Crafty.scene("loading");`

但是在我的代码中,我将 x 位置四舍五入,所以它们总是圆形的

4

1 回答 1

0

当画布应用了比例变换时,以不同方式处理半像素的clearRect某些clip组合似乎是一个问题。drawImage

当单个精灵在背景上移动时,我们清除它移动经过的区域,剪辑到该区域,然后绘制所有重叠的实体。

在这种情况下,清除操作似乎比绘制操作影响更多的像素。我可以在 Chrome 中解决这个问题,但 Firefox 非常固执地对待这些不同的方式。如果我能找到一个好的修复或解决方法,我会再次在这里发布。(更糟糕的情况是,我们可以在每次缩放时重新绘制整个画布,但这在性能方面会有点糟糕。)

于 2014-02-03T20:00:47.900 回答