Javascript p5 无法在两点之间画线

Question

在javascript中，使用p5，我想在两点之间画一条线，用鼠标设置。我正在使用一个数组来存储鼠标位置，然后画线。但是，当我在控制台中记录数组时，我得到了一个奇怪的输出。

“空 x 2”是什么意思？这是我的代码：

function mouseClicked(){
pointSize = slider.value();
stroke(color_picker.value());
strokeWeight(pointSize);
point(mouseX, mouseY);

if(selection === "line"){
   line_points.push(mouseX, mouseY);
   console.log(line_points);
   console.log(line_points.length);

    if(line_points.length = 4){
        line(line_points[0],line_points[1],line_points[2],line_points[3]);
        line_points = [];
    }
  }
}

Answer 1

代码中的主要问题是条件

 if(line_points.length = 4)

应该是

if(line_points.length ==== 4)

因为我们要将长度与 4 进行比较。原始代码将数组的长度设置为 4，这会在数组中留下一些空位置，从而在将数组输出到控制台时产生空插槽消息。

function setup(){
    const cnv = createCanvas(200, 200);

}
var line_points = [];
function draw(){

}

function mouseClicked(){
   stroke(0);
   point(mouseX, mouseY);
   line_points.push(mouseX, mouseY);
   console.log(line_points);
   console.log(line_points.length);

    if(line_points.length === 4){
        line(line_points[0],line_points[1],line_points[2],line_points[3]);
        line_points = [];
    }
  }

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

Javascript p5 无法在两点之间画线

Javascript p5 Unable to draw line between two points

javascript

p5.js