P5.js mousePressed() 函数不起作用，它在 drawfunction 之外

Question

我不明白为什么不起作用，我认为是绘图和设置有问题function.Here 是完整代码：

function setup() {
    var height = 400;
    var length = 400;

    createCanvas(length,height);
    textSize(50);
}

function draw() {

    background(224,224,224);//grey_color

    var vx1 = 0;
    var vy1 = 0;
    var vx2 = 0;
    var vy2 = 400;
    //vertical

    for (i = 0 ; i < 5 ; i++){

        line(vx1,vy1,vx2,vy2);
        stroke(40);

        if(i == 1 || i == 3 ){
            strokeWeight(10);
        }
        else {
            strokeWeight(4);
        }

        vx1 += 100;
        vx2 += 100;
    }

    var ox1 = 0;
    var oy1 = 0;
    var ox2 = 400;
    var oy2 = 0;
    //orizontal

    for (i = 0 ; i < 5 ; i++){

        line(ox1,oy1,ox2,oy2);
        stroke(40);

        if(i == 1 || i == 3 ){
            strokeWeight(10);
        }
        else {
            strokeWeight(4);
        }

        oy1 += 100;
        oy2 += 100;
    }

    text('3', 33, 65);//1
    text('4', 233, 65);//2
    text('1', 133, 165);//3
    text('3', 333, 165);//4
    text('2', 33, 265);//5
    text('3', 133, 265);//6
    text('1', 33, 365);//7
    text('2', 333, 365);//8
    //nr_sudoku

    if(mouseX > 100 && mouseX < 200 && mouseY < 100)
    {
        cursor(CROSS);
    }
    //1
    else if(mouseX > 300 && mouseX < 400 && mouseY < 100)
    {
        cursor(CROSS);
    }
    //2
    else if( mouseX < 100 && mouseY > 100 && mouseY < 200)
    {
        cursor(CROSS);
    }
    //3
    else if( mouseX > 200 && mouseX < 300 && mouseY > 100 && mouseY < 200)
    {
        cursor(CROSS);
    }
    //4
    else if( mouseX > 200 && mouseX < 400 && mouseY > 200 && mouseY < 300)
    {
        cursor(CROSS);
    }
    //5
    else if( mouseX > 200 && mouseX < 400 && mouseY > 200 && mouseY < 300)  
    {
        cursor(CROSS);
    }
    //6
    else if( closed > 100 && mouseX < 300 && mouseY > 300 && mouseY < 400)
    {
        cursor(CROSS);
    }
    //7
    else {
        cursor('grab');
    }
}//draw_fct

function mousePressed() {
    text('A', 10, 10);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

我尝试了很多东西，但都是一样的结果

Answer 1

在活动中绘制任何东西都不起作用。注意，draw()中的第一个操作是background(224,224,224)。 background() 填充整个 window 并清除您在事件函数中绘制的所有内容。

创建一个容器变量，其中可以存储"click"位置：

var clickPos;

在mousePressed事件中存储鼠标位置：

function mousePressed() {
    clickPos = [mouseX, mouseY];
}

在draw函数中画图：

function draw() {

    background(224,224,224);//grey_color

    if (clickPos) {
        text('A', clickPos[0], clickPos[1]);
    }

    // [...]

}

开头的clickPos是undefined，'A'没有画出来。单击鼠标时，位置存储到 clickPos。在下一帧中，'A' 绘制在单击的位置。这导致 'A' 始终绘制在鼠标单击的最后位置。

查看示例，其中我将更改应用于您的原始代码：

function setup() {
    var height = 400;
    var length = 400;

    createCanvas(length,height);
    textSize(50);
}

var clickPos;

function draw() {

    background(224,224,224);//grey_color

    if (clickPos) {
        text('A', clickPos[0], clickPos[1]);
    }

    var vx1 = 0;
    var vy1 = 0;
    var vx2 = 0;
    var vy2 = 400;
    //vertical

    for (i = 0 ; i < 5 ; i++){

        line(vx1,vy1,vx2,vy2);
        stroke(40);

        if(i == 1 || i == 3 ){
            strokeWeight(10);
        }
        else {
            strokeWeight(4);
        }

        vx1 += 100;
        vx2 += 100;
    }

    var ox1 = 0;
    var oy1 = 0;
    var ox2 = 400;
    var oy2 = 0;
    //orizontal

    for (i = 0 ; i < 5 ; i++){

        line(ox1,oy1,ox2,oy2);
        stroke(40);

        if(i == 1 || i == 3 ){
            strokeWeight(10);
        }
        else {
            strokeWeight(4);
        }

        oy1 += 100;
        oy2 += 100;
    }

    text('3', 33, 65);//1
    text('4', 233, 65);//2
    text('1', 133, 165);//3
    text('3', 333, 165);//4
    text('2', 33, 265);//5
    text('3', 133, 265);//6
    text('1', 33, 365);//7
    text('2', 333, 365);//8
    //nr_sudoku

    if(mouseX > 100 && mouseX < 200 && mouseY < 100)
    {
        cursor(CROSS);
    }
    //1
    else if(mouseX > 300 && mouseX < 400 && mouseY < 100)
    {
        cursor(CROSS);
    }
    //2
    else if( mouseX < 100 && mouseY > 100 && mouseY < 200)
    {
        cursor(CROSS);
    }
    //3
    else if( mouseX > 200 && mouseX < 300 && mouseY > 100 && mouseY < 200)
    {
        cursor(CROSS);
    }
    //4
    else if( mouseX > 200 && mouseX < 400 && mouseY > 200 && mouseY < 300)
    {
        cursor(CROSS);
    }
    //5
    else if( mouseX > 200 && mouseX < 400 && mouseY > 200 && mouseY < 300)  
    {
        cursor(CROSS);
    }
    //6
    else if( closed > 100 && mouseX < 300 && mouseY > 300 && mouseY < 400)
    {
        cursor(CROSS);
    }
    //7
    else {
        cursor('grab');
    }
}//draw_fct

function mousePressed() {
    clickPos = [mouseX, mouseY];
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

P5.js mousePressed() 函数不起作用，它在 drawfunction 之外

P5.js mousePressed() function not working , and it is outside drawfunction

javascript

processing

p5.js