如何在mousePress()上更改单行的颜色

Question

我有一个原型的一小段代码。

我正在尝试让它在mousePressed()或mouseClicked()上，被点击的线条的颜色会改变。

我无论如何也想不出来！

任何帮助都将不胜感激！

到目前为止，我写的代码如下，应该可以很好地工作。

int value = 0;
ArrayList<Line> l = new ArrayList<Line>();

void setup() {
   size(500,500);
   background(57, 76, 222);
   //noLoop();
   stroke(255);
   strokeWeight(3);
}

void draw() {
    for (int i = 1; i< 20; i++) {
        l.add(new Line());   
        for (int a=0; a< l.size(); a++){
            l.get(a).display();
            noLoop();
        }
    }
    int total = l.size();
    println("The total number of lines is: " + total);
}


class Line {
    int ranX1, ranX2, ranY1, ranY2;

    Line() {
        ranX1 = int(random(50,450));
        ranX2 = int(random(50,450));
        ranY1 = int(random(50,450));
        ranY2 = int(random(50,450));
    }

    void update() {
        //
    }

    void display() {
        line(ranX1,ranX2,ranY1,ranY2);
    }
}

Answer 1

如果您有一条由点(O)和方向(D)指定的线，则线上到点p的最近点可按以下方式计算

X = O + D * dot(P-O, D);

​

​

两个矢量的点积等于两个矢量之间的夹角乘以两个矢量的幅度(长度)的余弦。

​

​

dot( A, B ) == | A | * | B | * cos( alpha ) 

V和D的点积等于直线(O，D)和向量V = P - O之间的夹角的余弦，再乘以V的量(长度)，因为D是一个unit vector ( D的长度是1.0)。

使用PVector获取从(ranX1，ranY1)到(ranX2，ranY2)的方向，并通过.normalize()将方向向量转换为单位向量。向量的长度由.mag()验证

PVector D = new PVector(ranX2 - ranX1, ranY2 - ranY1);
if ( D.mag() > 0.0 )
    D.normalize();

使用上述算法计算到一条无边线的法线距离，并打开点(ranX1，ranY1)和(ranX2，ranY2)。为此，使用了.mult()、.add()、.dist()和.dot()方法：

PVector X = new PVector(ranX1, ranY1);
X.add( D.mult( D.dot( vP1 ) ) );
boolean hit = X.dist(new PVector(x, y)) < hit_dist;

使用点积验证直线和通过点(x，y)的法线的交点(X)是否在(ranX1，ranY1)和(ranX2，ranY2)之间。如果两个亚麻布之间的角度大于90度或小于-90度，则点积小于0.0：

PVector vP1 = new PVector(x - ranX1, y - ranY1);
if ( D.dot( vP1 ) < 0.0 )
    hit = false;

PVector vP2 = new PVector(x - ranX2, y - ranY2);
if ( D.dot( vP2 ) > 0.0 )
    hit = false;

向类Line添加一个isHit方法，该方法检查行上是否有输入位置(x，y)。可接受的线上点击识别精度可由hit_dist设置。如果必须精确命中线路，则减小此值。增加它以允许命中在线旁但也在线附近。添加颜色属性col和可以更改颜色的方法：

class Line {

    // [...]

    color col;

    // [...]

    void setColor(color c) {
        col = c;
    }

    boolean isHit(int x, int y) {

        final int hit_dist = 5;

        // [...]

        return hit;
    }
}

使用鼠标按下的event mousePressed()遍历循环中的所有行。当鼠标被按下时，更改每行的颜色是2点击：

void mousePressed() {

    for (int i = 0; i < l.size(); ++i) {

        if (l.get(i).isHit(mouseX, mouseY)) {
            l.get(i).setColor(color(255, 0, 0) );
        }
    } 
}

请参阅示例，它实现了算法，并对代码进行了一些进一步的改进和错误修复：

​

​

int value = 0;
ArrayList<Line> l = new ArrayList<Line>();

void setup() {
    size(500,500);

   for (int i = 0; i < 20; ++i) {
       l.add(new Line());  
   }
}

void draw() {

    background(57, 76, 222);

    strokeWeight(3);
    for (int i = 0; i < l.size(); ++i) {
       l.get(i).display();
    }
}

void mousePressed() {

    for (int i = 0; i < l.size(); ++i) {

        if (l.get(i).isHit(mouseX, mouseY)) {
            l.get(i).setColor(color(255, 0, 0) );
        }
    } 
}

class Line {
    int ranX1, ranX2, ranY1, ranY2;
    color col;

    Line() {
        col = color(255);
        ranX1 = int(random(50,450));
        ranX2 = int(random(50,450));
        ranY1 = int(random(50,450));
        ranY2 = int(random(50,450));
    }

    void setColor(color c) {
        col = c;
    }

    boolean isHit(int x, int y) {

        final int hit_dist = 5;

        PVector D = new PVector(ranX2 - ranX1, ranY2 - ranY1);
        if ( D.mag() > 0.0 )
            D.normalize();

        PVector vP1 = new PVector(x - ranX1, y - ranY1);
        if ( D.dot( vP1 ) < 0.0 )
            return false;

        PVector vP2 = new PVector(x - ranX2, y - ranY2);
        if ( D.dot( vP2 ) > 0.0 )
            return false;

        PVector X = new PVector(ranX1, ranY1);
        X.add( D.mult( D.dot( vP1 ) ) );
        boolean hit = X.dist(new PVector(x, y)) < hit_dist; 

        return hit;
    }

    void display() {
        stroke(col);
        line(ranX1, ranY1, ranX2, ranY2);
    }
}