Question

我正在使用socket.io，node.js和p5.js绘制webapp的实时画布。拖动鼠标时，我无法创建平滑线。如果拖动鼠标太快，则每个椭圆之间会有一条空白空间。这里的最终目标是创建一条平滑的路径。以下是我到目前为止所尝试的内容：

尝试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]);

以下是问题所在的图片： canvas drawing incomplete path image

欢迎任何反馈;谢谢！

Answer 1

凯文的答案很棒，因为绘制线条而不是许多省略号会更有效率。您还应该考虑一下：

以上内容应该可以帮助您绘制一条平滑的路径，并设置一个较粗的笔划，因为许多填充的椭圆连接形成了路径。

如果由于某种原因你想要绘制许多椭圆，你可以在鼠标移动得更快时插入位置并创建间隙来填充这些间隙。有关更多信息和p5.js示例，请查看以下答案： Processing: Draw vector instead of pixels

Answer 2

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

来自the reference：

// 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>

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

2 个答案:

p5.j​​s带椭圆的画布绘制路径

2 个答案:

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