绘制重叠的半透明线条，不显示重叠 [英] Drawing overlapping semi-transparent lines without visible overlap

问题描述

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

I'm developing a painter program using HTML5 canvas. I have created a drawing tool where the user drags and moves the mouse.

我有一个监听器 mousemove 它绘制短线：

I have a listener on mousemove event that draws short lines:

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.当使用此方法绘制时，结束点也是开始点。所以点被绘制两次。因为我们有透明的颜色，点现在有不同的颜色与其他点在线。

Everything works well until I set the global Alpha to < 1. When using this method to draw, the end dot is also start dot. So the dot is drawn twice. And because we have transparent color, the dot now has different color with other dots in line.

我尝试另一种方法，当mousemove触发时，它只使用 lineTo（）和 stroke（）。

I tried another method that when mousemove fires, it only uses lineTo() and stroke() when mouseup fires.

双重绘图的问题，也引入了一个新问题：当用户打算绘制相同的点两次，即，没有mouseup的交叉线，点不会被绘制两次。因为 lineTo（）函数不会在两次之间绘制一个圆点两次。

This solves the double drawing problem, but also introduces a new problem: when user intend to draw same dot twice, ie, cross line without mouseup, the dot won't be drawn twice. Because lineTo() function won't draw a dot twice without stroke between.

推荐答案

（重现你的问题）你原来的问题是通过调用 beginPath（）和 stroke（）每个段都有很多重叠的半透明路径。你的新问题是通过创建所有 lineTo（）命令作为同一路径的一部分，然后调用 stroke（） 一次结束时，用户指定的任何自相交路径不会显示可见的重叠。

(Restating your problem) Your original problem was that by calling beginPath() and stroke() for each segment you had many overlapping semi-transparent paths. Your new "problem" is that by creating all your lineTo() commands as part of the same path and then calling stroke() once at the end any self-intersecting paths intended by the user do not show a visible overlap.

• 在单个路径中创建多条半透明线条，并在一次（左上角）进行划线，与


• 在不同路径中有许多半透明线条，并在每个线条上划线（右下方）

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

I would say that your current solution (a single path) is the correct way to do it, even though a single self-crossing path does not double-up in opacity. This is what you see in Adobe Photoshop and Illustrator when drawing semi-transparent paths: all drawing with the mouse down is part of the same, single, non-overlapping transparent object. Only when the user releases and re-presses the mouse button do you accumulate more transparency:

• 两个Photoshop画笔笔触在50％不透明度：
  
  

• Two Photoshop paintbrush strokes at 50% opacity:
  

有50％不透明度的两个Illustrator路径：

Two Illustrator paths at 50% opacity:

请注意，自相交笔触和路径在交叉过程中不显示双重不透明度，

Notice in particular that the self-intersecting stroke and path do not show double the opacity during crossing, but that a separate new path does.

我建议您坚持使用您当前的解决方案，因为这是这些传统的，精心设计的应用程序的行为。我说这两个，因为你想要你的包模仿用户的期望，也因为如果这些包做它像这样，可能有一个很好的理由：你原来有确切的问题！ ：）

I recommend that you stick with your current solution given that this is how these traditional, well-thought-out applications behave. I say this both because you want your package to mimic user expectations, and also because if these packages do it like this, there's probably a very good reason for it: the exact problem you originally had! :)

这篇关于绘制重叠的半透明线条，不显示重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！