EaselJS线条模糊问题

Question

EaselJS线条模糊问题

7

我正在使用EaselJS作为HTML5画布的API。

我注意到以下代码：

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

以下是生成的代码：

enter image description here

我将线条厚度设置为1，但线条仍然模糊。如果你通过快照放大，你会发现它实际上占据了3个像素。我相信我曾在某个地方读到过canvas在两个像素之间绘制一个点，以便实际上两个像素都被着色。并且你需要将绘制点的位置向左或向右移动半个像素宽度，这样它就落在整个像素上。

我需要应用程序的清晰图像，请给予建议。

- William Sham

1

你尝试将 moveTo(100,100) 更改为 moveTo(100.5,100.5) 了吗？ - kangax

是的。它有效！但是 Easel 是否有内置的 SnapToPixel 属性，这样会使我的数学运算更容易？您知道JS的代码片段，在整个过程中都可以执行它，这样我就不必为每个坐标输入.5了吗？ - William Sham

1

嗯，你可以为此编写一个辅助函数。例如：moveTo(coerce(100), coerce(100)) 或 moveTo('100'.toCanvas(), '100'.toCanvas()) — 当然，这两种方法都有点丑陋（而且令人困惑）:) 我不熟悉EaselJS，也不知道它是否有任何方法来解决这个问题。我知道在我的库（fabric.js，http://kangax.github.com/fabric.js/demos/kitchensink）中也没有处理这个问题的方法... - kangax

我之前考虑过让图形支持snapToPixel属性，但这会对性能产生相当明显的影响，而且除了直线之外没有必要，通过将形状偏移0.5就可以很容易地解决。例如：myShape.regX = myShape.regY = 0.5; - gskinner

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lanny · Accepted Answer

EaselJS只是canvas API的抽象层——它在指定坐标上绘制所有线条。snapToPixel API特别用于自动四舍五入，但不考虑您所描述的半像素问题。

最佳实践方法是将所有内容放入一个容器中，并将容器放置在正或负(0.5,0.5)处——这将调整所有内容，并且您可以在正常的坐标空间中工作，而不是偏移所有计算。