p5js 中的 line() 越过边缘。除了自己做数学之外，有没有更简单的方法让这条线只连接它们的边缘？

Question

我正在尝试画一条线来连接两个给定的圆圈。

function setup() {
  createCanvas(300, 100);
  background(220);
  noFill();
  ellipse(150, 30, 20, 20);
  ellipse(100, 50, 20, 20);
  line(100, 50, 150, 30);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>

我得到的参数是圆心的x，y。如果我直接使用信息，这条线穿过两个圆圈。

我知道我可以计算，我只是想知道是否有更简单的方法让直线连接它们的边缘？

Answer 1

一个简单的方法是先画线，然后画圆圈，然后用背景色填充它们，这样圆圈内的线就会被隐藏，只有当你不介意背景和圆圈时才有效颜色要一样

function setup() {
  createCanvas(300, 100);
  background(220);
  line(100, 50, 150, 30);
  fill(220);
  ellipse(150, 30, 20, 20);
  ellipse(100, 50, 20, 20);
   
  
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>

Answer 2

使用不透明圆圈
类似于Sarkar之前所说的解决方案，只要你不介意圆圈具有填充颜色（无论它们的颜色与背景颜色相同还是不同，都无所谓），最简单的方法就是这样做就是通过在之后用任何填充不透明颜色绘制它们来简单地使圆圈覆盖线。

使用图形对象
然而，如果你想让这个形状成为一个透明的形状，为了在你打算使用它时有更多的自由，你可以试试这个：你创建一个图形对象，你画线，然后你激活擦除模式并绘制圆圈，以便它们擦除它们重叠的部分线，然后退出擦除模式并正常绘制未填充的圆圈。完成图形后，使用图像函数将其绘制在 canvas.

上

let graphic;

function setup() {
  createCanvas(300, 100);
  graphic = createGraphics(width, height);
  graphic.line(100, 50, 150, 30);
  graphic.erase();
  graphic.ellipse(150, 30, 20, 20);
  graphic.ellipse(100, 50, 20, 20);
  graphic.noErase();
  graphic.noFill();
  graphic.ellipse(150, 30, 20, 20);
  graphic.ellipse(100, 50, 20, 20);
  background(220);
  image(graphic,0,0);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>

p5js 中的 line() 越过边缘。除了自己做数学之外，有没有更简单的方法让这条线只连接它们的边缘？

`line()` in p5js crosses the edges. Beside doing the math myself, is there an easier way to make the line just connect their edges?

javascript

p5.js