绘制重叠的半透明线条,没有可见的重叠

Question

我正在使用HTML5画布开发一个画家程序.我创建了一个绘图工具,用户拖动并移动鼠标.

我有一个关注mousemove事件的听众:

Painter.mainCanvas.beginPath();
Painter.mainCanvas.moveTo(Painter.lastX, Painter.lastY);
Painter.lastX = e.offsetX;
Painter.lastY = e.offsetY;
Painter.mainCanvas.lineTo(Painter.lastX, Painter.lastY);
Painter.mainCanvas.stroke();

一切正常,直到我将全局Alpha设置为<1.使用此方法绘制时,结束点也是起点.所以点画了两次.而且因为我们有透明的颜色,点现在有不同的颜色与其他点在一起.

我尝试了另一种方法,当mousemove触发时,它只使用lineTo()和stroke()当mouseup触发时.

这解决了双重绘图问题,但也引入了一个新问题:当用户打算两次绘制相同的点时,即没有鼠标的交叉线时,点将不会被绘制两次.因为lineTo()函数不会在没有笔划的情况下绘制两次点.

Answer 1

(重述你的问题)你最初的问题是通过调用beginPath()和stroke()每个段你有许多重叠的半透明路径.您的新"问题"是通过将所有lineTo()命令创建为同一路径的一部分,然后在结束时调用stroke() 一次,用户想要的任何自相交路径都不会显示可见的重叠.

这是一个显示制作之间差异的示例

• 许多半透明线在一条路径上并且抚摸一次(左上角),而不是
• 许多半透明的线条在不同的路径中并且每个都在抚摸(右下)

                        http://jsfiddle.net/jhyG5/2/

我会说你当前的解决方案(单一路径)是正确的方法,即使单个自交路径不会增加不透明度.这是您在绘制半透明路径时在Adobe Photoshop和Illustrator中看到的内容:使用鼠标向下绘制的所有绘图都是相同的单个非重叠透明对象的一部分.只有当用户释放并重新按下鼠标按钮时,才会累积更多透明度:

• 两个不透明度为50%的Photoshop画笔描边:
  

• 两个不透明度为50%的Illustrator路径:

特别要注意的是,自相交行程和路径在交叉过程中不会显示不透明度的两倍,而是一个单独的新路径.

我建议您坚持使用当前的解决方案,因为这就是这些传统的,经过深思熟虑的应用程序的行为方式.我之所以这么说,是因为你希望你的软件包能够模仿用户的期望,而且因为如果这些软件包像这样做,那么它可能是一个非常好的理由:你最初遇到的确切问题!:)