EaselJS线模糊

Question

我使用EaselJS作为HTML5画布的API.

我注意到以下代码:

line.graphics.setStrokeStyle(1).beginStroke("black").moveTo(100,100).lineTo(200,200);
stage.addChild(line);

...产生以下行:

我将厚度设置为1 - 但线条仍然模糊.如果放大快照,可以看到它实际占用3个像素.我相信我读到某处画布在两个像素之间绘制一个点,这样两个像素实际上都会被着色.并且您需要将绘制点的位置移动到像素宽度的一半,以便它落在整个像素上.

我的应用需要清晰的图像,请指教.

Answer 1

EaselJS只是canvas API的抽象 - 它绘制了指定坐标上的所有行.snapToPixel API专门用于执行自动舍入,但不考虑您描述的半像素问题.

最佳实践方法是将所有内容放入Container中,并将容器置于正值或负值(0.5,0.5) - 这将调整所有内容,并且您可以在正常的坐标空间中工作,而不是抵消所有计算.