Question

我正在尝试使用javascript制作一个简单的绘画程序。我可以定义在其中按下鼠标的区域，我可以调用它们并绘制某种形状。现在的问题是，当我选择下一个形状时，似乎还在循环中绘制了上一个形状。我该如何预防？我试过redraw（），noLoop（），clear等，但是我不知道。我只是在学习，如果有人可以指出我的错误，那将会有很大的帮助。

var brushColor;
var lines = false;
var triangles = false;
var circles = false;
var rectangles = false;

function setup() {
  createCanvas(600, 600);
  background(0);
  brushColor = color(random(255), random(255), random(255));
}

function draw() {
  buttons();
  shapes();
  shapeColor();
  resetButton();
checkIfLines();
checkIfTriangles();
checkIfCircles();
checkIfRectangles();

}

function shapes() {
  noStroke();

  if (mouseX > 30) {
    if (mouseIsPressed == true) {
      //Drawing area

      if (lines == true) {
           fill(brushColor);
      stroke(brushColor);
          strokeWeight(2);
        line(mouseX, mouseY, pmouseX, pmouseY);
      }
        if (triangles == true) {
             fill(brushColor);
      stroke(brushColor);
          strokeWeight(1);
        triangle(mouseX + 10, mouseY + 10, pmouseX + 20, pmouseY + 20, mouseX + 35, mouseY + 65);
      }
        if (circles == true) {
             fill(brushColor);
      stroke(brushColor);
          strokeWeight(1);
        ellipse(mouseX, mouseY, 30, 30);
      }
        if (rectangles == true) {
             fill(brushColor);
      stroke(brushColor);
          strokeWeight(1);
        rect(mouseX, mouseY, 40, 40);
      }
    }
  }
}


function shapeColor() {
  if ((mouseX > 0) && (mouseX < 30) && (mouseY > 150) && (mouseY < 180)) {
    if (mouseIsPressed == true) {

      //change brushColor
      brushColor = color(random(255), random(255), random(255));
    }
  }
}

function buttons() {
  stroke(1);
  //erase button
fill(brushColor);
rect(0, 0, 30, 30);
    text('C', 35, 20); 

  //draw line button
    stroke(1)
    rect(0, 30, 30, 30);
    stroke(1)
    fill(brushColor);
    line(0, 30, 30, 60);
    text('L', 35, 50);  

  //draw triangle button
    rect(0, 60, 30, 30);
    fill(brushColor);
    triangle(0, 60, 15, 90, 30, 75);
    stroke(1);
    text('T', 35, 80);  

  //draw ellipse button
    fill(brushColor);
    rect(0, 90, 30, 30);
    ellipseMode(CORNER);
    ellipse(1, 91, 28, 28);
    ellipseMode(CENTER);
    stroke(1);
    text('E', 35, 110);  


  //draw rectangle button
    fill(brushColor);
    stroke(1);
    rect(0, 120, 30, 30);
    rect(2.5, 125, 25, 20);
    text('R', 35, 140);  



  //color change
    rect(0, 150, 30, 30);
    fill(brushColor);
    text('X', 35, 170);  



}

function resetButton() {
  if ((mouseX > 0) && (mouseX < 30) && (mouseY > 0) && (mouseY < 30)) {
    if (mouseIsPressed == true) {
      fill(0);
      rect(30, 0, width, height);
    }
  }
}



function checkIfLines() {
  if ((mouseX > 0) && (mouseX < 30) && (mouseY > 30) && (mouseY < 60)) {
    if (mouseIsPressed == true) {
      if (lines == true) {
        lines = false;
          redraw();
      } else {
        lines = true;
      }
    }
  }
}

function checkIfTriangles() {
  if ((mouseX > 0) && (mouseX < 30) && (mouseY > 60) && (mouseY < 90)) {
    if (mouseIsPressed == true) {
      if (triangles == true) {
        triangles = false;
          redraw();
      } else {
        triangles = true;
      }
    }
  }
}

function checkIfCircles() {
  if ((mouseX > 0) && (mouseX < 30) && (mouseY > 90) && (mouseY < 120)) {
    if (mouseIsPressed == true) {
      if (circles == true) {
        circles = false;
          redraw();
      } else {
        circles = true;
      }
    }
  }
}

function checkIfRectangles() {
  if ((mouseX > 0) && (mouseX < 30) && (mouseY > 120) && (mouseY < 150)) {
    if (mouseIsPressed == true) {
      if (rectangles == true) {
        rectangles = false;
          redraw();
      } else {
        rectangles = true;

      }
    }
  }
}

function mouseDragged()
{
    if(key == 'l' || key == 'L')
    {
strokeWeight(1);
        color(brushColor);
        line(mouseX, mouseY, pmouseX, pmouseY);
    }

    if(key == 't' || key == 'T')
    {
strokeWeight(1);
                    color(brushColor);
        triangle(mouseX + 10, mouseY + 10, pmouseX + 20, pmouseY + 20, mouseX + 35, mouseY + 65);   }

    if(key == 'r' || key == 'R')
    {
strokeWeight(1);
                    color(brushColor);
                rect(mouseX, mouseY, 40, 40);   }

    if(key == 'e' || key == 'E')
    {
strokeWeight(1);
                color(brushColor);
                ellipse(mouseX, mouseY, 30, 30);    }

    if(key == 'c' || key == 'C')
    {
                    clear();
          background(0);
    }

     if(key == 'x' || key == 'X')
    {
brushColor = color(random(255), random(255), random(255));
    }

}

Answer 1

您的问题似乎与循环无关。您的形状处理混乱了。我将为画笔形状创建一个变量，而不是为画笔形状创建布尔变量并通过几个函数对其进行检查。

var brushShape;

// define the line shape
var shapeLine = function()
{
   strokeWeight(2);
   line(mouseX, mouseY, pmouseX, pmouseY);
};

// define the rectangle shape
var shapeRectangle = function()
{
    strokeWeight(1);
    rect(mouseX, mouseY, 40, 40);
};

// assign the defined shape to brushShape (this comes into your button functions)
brushShape = shapeLine(); 

// and your draw() would look like this
function draw() 
{
   buttons();
   if (mouseX > 30)
   {
      fill(brushColor);
      stroke(brushColor);
      brushShape;
   }
   shapeColor();
   resetButton();
}

有没有一种方法可以停止上一个循环与下一个循环的追加？

1 个答案: