Question

我不明白为什么不起作用，我认为绘制和设置功能有问题。这是完整的代码：

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()会填满整个窗口，并清除您在事件函数中绘制的所有内容。

在容器中创建一个变量，您可以在其中存储“点击”位置：

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中

1 个答案: