EaselJS 线条模糊
我使用 EaselJS 作为 HTML5 画布的 API。
我注意到以下代码：
line.graphics.setStrokeStyle(1).beginStroke("black").moveTo(100,100).lineTo(200,200);
stage.addChild(line);
...产生以下行：
我将厚度设置为 1 - 但是这条线仍然模糊。如果放大快照，您可以看到它实际上占据了 3 个像素。我相信我在某处读到画布在两个像素之间绘制一个点，这样两个像素实际上都会被着色。并且您需要将绘制点的位置移动像素宽度的一半，以便它落在整个像素上。
我的应用程序需要清晰的图像，请告知。
I am using EaselJS as an API for HTML5 canvas.
I noticed that the following code:
line.graphics.setStrokeStyle(1).beginStroke("black").moveTo(100,100).lineTo(200,200);
stage.addChild(line);
...produces following line:
I set the thickness to 1 - but the line is still fuzzy. If you zoom in with the snapshot, you can see it actually occupies 3 pixels. I believe I read somewhere canvas draws a point between two pixels, so that both pixels will be colored in fact. And you need to shift where you draw the point by half the pixel width so it falls on the entire pixel.
I need sharp image for my applications, please advise.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
EaselJS 只是画布 API 的抽象 - 它在指定坐标上绘制所有线条。 snapToPixel API 专门用于进行自动舍入，但没有考虑您所描述的半像素问题。
最佳实践方法是将所有内容放入容器中，并将容器置于正值或负值（0.5,0.5） - 这将调整所有内容，并且您可以在正常的坐标空间中工作，而不是抵消所有计算。
EaselJS is just an abstraction for the canvas APIs - which draws all lines on the specified coordinates. The snapToPixel API is specifically for doing automatic rounding, but doesn't take into account the half-pixel issue you are describing.
The best practice approach is to put everything into a Container, and put the container at positive or negative (0.5,0.5) - which will adjust everything, and you can work in a normal coordinate space, rather than offsetting all your calculations.