如何在上一次点击和最近一次点击之间画一条线？

问题描述

int prevIoUsX;
int prevIoUsY;
void  setup() {
   size(400,400);
   stroke(255);
} 
void mousepressed(){
  prevIoUsX = mouseX;
  prevIoUsY = mouseY;
}
void  draw() {
   background(75,55,43);
   line(prevIoUsX,prevIoUsY,mouseX,mouseY);   
}

最终的结果应该是当用户点击鼠标时，从0,0到用户点击鼠标的位置会出现一条线，然后当用户再次点击鼠标时，从前一个鼠标绘制另一条线单击以进行新的鼠标单击。示例：行(0,50,43) 行(50,43,25,67) 行(25,67,99,77)。我目前的代码没有显示任何永久行，但它有以前的鼠标点击。

解决方法

最简单的解决方案是不要用 var d= $("#navs .selected").attr('data-prop'); 覆盖前面的线条。 它看起来像这样：

background(...)

请注意，它仅在您不需要使用 int previousX; int previousY; void setup() { size(400,400); stroke(255); } void mousePressed(){ line(previousX,previousY,mouseX,mouseY); previousX = mouseX; previousY = mouseY; } void draw() { } 清除画布时才有效。

,

为了绘制之前的永久线，您需要存储之前的所有点。这可以通过使用 ArrayList 来实现。这些点是使用 PVector 对 x 和 y 组件进行分组存储的。

ArrayList<PVector> points = new ArrayList<PVector>(); 

void  setup() {
   size(400,400);
   stroke(255);
   
   // The first point is (0,0)
   points.add(new PVector(0,0));
} 
void mousePressed(){
  // Each time the mouse is pressed add a new point
  points.add(new PVector(mouseX,mouseY));
}
void  draw() {
   background(75,55,43);
   
   // Loop through the array list
   for(int i = 0; i < points.size(); i++){
     if(i == points.size()-1){
       // For the last point draw a line to the mouse
       line(points.get(i).x,points.get(i).y,mouseY);
     }else{
       // Draw a line between each of the points
       line(points.get(i).x,points.get(i+1).x,points.get(i+1).y);
     }
   }
}