Begin at the mouse position stroke.push(createVector(mouseX, mouseY)) strokes.push(stroke)什么意思
时间: 2024-02-19 13:01:53 浏览: 23
这段代码是在使用p5.js绘制画笔涂鸦时,当鼠标按下时触发的事件函数。它会在鼠标当前位置开始创建一个新的笔画,并将该位置作为笔画的第一个点。createVector函数用于创建一个具有x,y坐标的向量,表示鼠标当前位置。然后该向量被添加到一个名为stroke的数组中,以创建该笔画的初始点。接下来,该笔画数组被添加到名为strokes的数组中,以存储所有笔画。这样,当鼠标被拖动时,就可以在最新的笔画中添加新的点,以扩展该笔画。
相关问题
const strokes = [] function setup() { createCanvas(windowWidth, windowHeight) } function mousePressed() { // Start a new stroke const stroke = [] // Begin at the mouse position stroke.push(createVector(mouseX, mouseY)) strokes.push(stroke) } function mouseDragged() { // Add a new point to the latest stroke const stroke = strokes[strokes.length - 1] stroke.push(createVector(mouseX, mouseY)) } function draw() { background(255) stroke(0) strokeWeight(10) // Loop over all strokes for (const stroke of strokes) { // Got to have at least two points to connect into a line! if (stroke.length < 2) continue // Connect the dots beginShape() for (const pt of stroke) { vertex(pt.x, pt.y) } endShape() } }什么意思
这段代码使用了 Processing 的 JavaScript 版本来实现一个简单的画板程序。具体来说:
- 首先定义一个空数组 strokes,用于存储所有的笔画。
- 在 setup 函数中创建一个画布并设置其大小为浏览器窗口的大小。
- 当鼠标按下时,创建一个新的笔画 stroke,并把当前鼠标位置作为起点。
- 当鼠标拖拽时,把当前鼠标位置添加到最新的笔画 stroke 中。
- 在 draw 函数中,设置背景为白色,画笔颜色为黑色,笔画宽度为 10 像素。
- 遍历所有的笔画,如果笔画中的点数小于 2,则跳过。
- 否则,使用 beginShape 和 endShape 函数将笔画中的所有点连接成一条线,并绘制到画布上。
这段代码实现了一个简单的画板功能,可以让用户用鼠标进行绘画。
function mouseDragged() { // Add a new point to the latest stroke const stroke = strokes[strokes.length - 1] stroke.push(createVector(mouseX, mouseY)) }什么意思
这段代码是在使用p5.js绘制画笔涂鸦时,当鼠标被拖动时触发的事件函数。它会在最新的笔画中添加一个新点,该笔画是在之前的mousePressed事件函数中创建的,并存储在名为strokes的数组中。createVector函数用于创建一个具有x,y坐标的向量,表示鼠标当前位置。然后该向量被添加到最新的笔画中,以扩展该笔画。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)