绘制没有可见重叠的重叠半透明线答案

【问题标题】：Drawing overlapping semi-transparent lines without visible overlap绘制没有可见重叠的重叠半透明线
【发布时间】：2011-12-07 09:18:54
【问题描述】：

我正在使用 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 设置为

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

这解决了重复绘制的问题，但也引入了一个新问题：当用户打算绘制两次相同的点时，即交叉线没有mouseup，该点不会被绘制两次。因为lineTo() 函数不会在没有笔划的情况下画两次点。

【问题讨论】：

对于未来的读者：下面是一个相关问题和答案的链接，该问题与透明度有关的绘画以及子路径如何覆盖不良行为。 stackoverflow.com/a/6636105/377205
@liuyanghejerry 您的绘画网络应用程序在任何地方都可用吗？我现在正在做同样的事情，我也有同样的困境（是否使相交线加起来）。所以，在我看来，您的绘画应用程序可能有点相似。我的目前已经有大约 900 行了，而且运行良好，但我也会觉得看到你的应用程序很有趣。如果你愿意，我也会在它上线时发布一个链接。
@Joeytje50 太糟糕了，该项目已关闭多年。要处理该问题，您不需要使用默认的lineTo 或stroke。相反，要使线相交，您需要逐点绘制每条线。看到这个：losingfight.com/blog/2007/08/18/…
@liuyanghejerry 我这样做的方式：我在mousedown 上getImageData，然后只是putImageData(oldData)，然后是stroke。这样，您将整个画布重置为笔画之前，然后重新绘制整个画布。我正在考虑切换到更有效的方法：将<svg> 放在画布顶部，并将所有绘图指向它：使用<path> 创建线条并将画笔传递的坐标保存在数组中.然后，在mouseup 上，只需删除<path>，使用lineTos 在画布上遵循相同的坐标。

标签： html canvas vector-graphics

【解决方案1】：

（重申您的问题）您最初的问题是，通过为每个段调用beginPath() 和stroke()，您有许多重叠的半透明路径。您的新“问题”是通过将所有 lineTo() 命令创建为同一路径的一部分，然后在最后调用 stroke() once 用户预期的任何自相交路径都不会显示可见的重叠。

这里是一个例子，展示了制作之间的区别

一条路径中有许多半透明的线条，并且划过一次（左上角），而
许多半透明的线条在不同的路径中，并且每条都在抚摸（右下）

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

我会说您当前的解决方案（单一路径）是正确的方法，即使单一的自交叉路径不会在不透明度上加倍。这就是您在 Adobe Photoshop 和 Illustrator 中绘制半透明路径时看到的内容：所有用鼠标按下的绘图都是同一个、单个、不重叠的透明对象的一部分。只有当用户释放并重新按下鼠标按钮时，您才会积累更多的透明度：

两个不透明度为 50% 的 Photoshop 画笔描边：
两个不透明度为 50% 的 Illustrator 路径：

特别注意，自相交的笔划和路径在交叉过程中不会显示双倍的不透明度，但单独的新路径会显示。

鉴于这些经过深思熟虑的传统应用程序的行为方式，我建议您坚持当前的解决方案。我这样说既是因为您希望您的包模仿用户的期望，还因为如果这些包这样做，可能有一个很好的理由：您最初遇到的确切问题！ :)

【讨论】：

我认为你是对的。那么问题就永远消失了，谢谢^^