createjs位图图像旋转使图像参差不齐chrome

当我尝试使用createjs旋转位图图像（不调整大小，但只是旋转）时，位图图像在Chrome中变得锯齿状。在Firefox中，它很好。createjs位图图像旋转使图像参差不齐chrome

这里是我的代码：

var backCard = new createjs.Bitmap(assetsLoader.getResult("back")); 
backCard.rotation = 24; 
stage.addChild(backCard); 
stage.update();

关于如何解决此问题的任何想法？

来源

2014-10-31 Deyan Vitanov

对我来说，在Firefox上，位图变得锯齿状，在Chrome浏览器和Safari浏览器中得到反锯齿。但我更喜欢它在Firefox上的外观... – 2014-10-31 22:11:58

，我不知道，如果你想防止或Chrome启用抗锯齿，因为我让Chrome旋转位图抗锯齿和Firefox没有，所以我就讲两件事...

启用抗锯齿

没有办法做到这一点原生的，但你可以创建一个解决方法，如果你真的想强制抗锯齿：添加一个模糊过滤器真正少量旋转图像。但请记住，模糊是一个非常昂贵的过滤器，您应该避免使用，但如果您使用它，则需要在应用过滤器后缓存位图以减少CPU使用量。

backCard.filters = [new createjs.BlurFilter(2, 2, 1);]; // 2 is blur radius, 1 is blur quality. More quality means more expensive blur. 
var bounds = backCard.getBounds(); 
backCard.cache(bounds.x, bounds.y, bounds.width, bounds.height);

防止抗锯齿

我觉得没有这样做但过的方式，但你可以使用next version of EaselJS它允许你定义如果对象将反锯齿为舞台，因为WebGL。请注意，如果WebGL在用户的浏览器上不受支持，EaselJS将回退到HTML5 Canvas，该HTML5仍将具有抗锯齿功能。

来源

2014-10-31 22:28:34

谢谢，但blince它eather使它非常模糊..看起来不好的BlurFilter（2,2,1）或使它无异BlurFilter（1,1,1） – 2014-11-01 11:56:18

在Safari ，这段代码创建了一个很好的抗锯齿：'new createjs.BlurFilter（1，1，2）'。请注意质量设置为2，导致更昂贵的计算。我建议您将抗锯齿功能留给浏览器，而不是尝试解决不在代码中的问题。 – 2014-11-01 13:16:30

此外，我无法在Chrome上测试此功能，因为我正在使用我的项目来测试模糊效果，并且我不知道为什么，滤镜不会显示在Chrome上... – 2014-11-01 13:18:24

createjs位图图像旋转使图像参差不齐chrome

回答

相关问题