P5.js带椭圆的画布绘制路径

Question

我正在使用 socket.io，node.js和p5.js的实时画布绘图Web应用程序。拖动鼠标时，我无法创建平滑的线条。如果鼠标拖动得太快，则每个椭圆之间会有一条空白区域。这里的最终目标是创建一条平滑的道路。以下是我到目前为止尝试过的事情：

尝试 1：

noStroke();
fill(lineColor[0],lineColor[1],lineColor[2]);
ellipse(mouseX, mouseY, lineThickness, lineThickness);

尝试 2：

strokeWeight(lineThickness);
line(mouseX,mouseY);
stroke(lineColor[0],lineColor[1],lineColor[2]);

以下是问题的外观图片： 画布绘图不完整的路径图像

欢迎任何反馈;谢谢！

Answer 1

凯文的回答很棒，因为画线而不是许多椭圆会更有效。您还应该查看：

• beginShape((/endShape((
• 贝塞尔顶点((
• 曲线顶点((
• 曲线点((

以上应该可以帮助您绘制平滑路径，并设置较粗的描边，因为它连接了许多填充椭圆形成路径。

如果出于某种原因确实要绘制许多椭圆，则可以在鼠标移动速度更快时插入位置并创建间隙以填充这些间隙。 有关更多信息和 p5.js示例，请查看此答案： 处理：绘制矢量而不是像素

Answer 2

您可以使用pmouseX和pmouseY变量，它们保持光标的先前位置。使用它从上一个位置到当前位置绘制一条线，以填充鼠标事件之间的空白区域。

参考资料：

// Move the mouse across the canvas to leave a trail
function setup() {
//slow down the frameRate to make it more visible
frameRate(10);
}
function draw() {
background(244, 248, 252);
line(mouseX, mouseY, pmouseX, pmouseY);
print(pmouseX + " -> " + mouseX);
}

<script src="https://github.com/processing/p5.js/releases/download/0.5.11/p5.js"></script>