P5.js 中的箭头线笔刷

Question

我目前正在p5.js

画笔

function setup() {
  createCanvas(400, 400);
  background(255)
}

function draw() {
 
  if(mouseIsPressed){
    
        stroke(255);
    fill(0);

   
    strokeWeight(30);
    triangle(mouseX, mouseY, pmouseX, pmouseY);
    stroke(0);
    strokeWeight(25);
    triangle(mouseX, mouseY, pmouseX, pmouseY);

  }
}

<!DOCTYPE html><html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head><body> <script src="sketch.js"></script> </body>  </html>

这是目前的样子

但是，我想像这样在最后添加一个三角形

这可能吗？欢迎提出任何建议！

谢谢:)

Answer 1

为了绘制箭头，您需要在松开鼠标时绘制所需的三角形。 P5.js 将在用户执行输入操作时调用各种输入事件函数，其中一个函数是 mouseReleased()。这是在 mouseReleased 函数中绘制箭头的示例。

function setup() {
  createCanvas(400, 400);
  background(255)
}

function draw() {
  if (mouseIsPressed) {
    stroke(255);
    fill(0);

    // These calls to triangle were unusual, and seemed to be mostly working by accident
    //strokeWeight(30);
    //triangle(mouseX, mouseY, pmouseX, pmouseY);
    stroke(0);
    strokeWeight(25);
    //triangle(mouseX, mouseY, pmouseX, pmouseY);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

function mouseReleased() {
  // When the user releases the mouse button, draw an arrow head
  
  // Save the stroke/fill/translate/rotate state
  push();
  
  noStroke();
  fill(0);
  // Find the angle of the direction the mouse has been recently
  // moving in
  let angle = atan2(mouseY - pmouseY, mouseX - pmouseX);
  // Translate to the current mouse position
  translate(mouseX, mouseY);
  // Rotate so that the positive x direction is in the direction
  // the mouse was moving.
  rotate(angle);
  
  // Draw a triangle pointing in the positive x direction.
  triangle(
    0, -25,
    50, 0,
    0, 25
  );
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
</head>

<body>
</body>

</html>

注意：此实现的行为仅与 pmouseX 和 pmouseY 的行为一样好。由于这些属性的工作方式，箭头的方向将受到鼠标释放前的小动作以及鼠标静止时的次优行为的影响。为了获得更好的结果，您可以想出自己的方法来跟踪 mouseMoved() 函数中的鼠标方向。

P5.js 中的箭头线笔刷

Arrow Line Brush in P5.js

javascript

processing

drawing

p5.js