我正在尝试绘制表示“弹弓”的线,并且希望其具有最大的绘制长度。
在p5中,我在positionA和positionB之间画了一条线:
fetch('http://local.api.mysite.com/user', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache'
},
body: JSON.stringify(data),
})
.then(data => data.ok && data.json())
.then(response => console.log(response));
posA是鼠标x和y。 posB是圆在画布上的位置。
我想做的是限制行的长度,以使它的长度永远不会超过40像素,但仍然要从圆指向鼠标。
答案 0 :(得分:3)
2个点之间的Euclidean distance由sqrt(dx*dx + dy*dy)
计算。
如果将一个点的向量除以另一点的长度,则得到长度为1的Unit vector。
计算从posA
到posB
的单位矢量,并将其乘以40:
// (dx, dy): vector form "posA" to "posB"
let dx = posB.x-posA.x;
let dy = posB.y-posA.y;
// dist : euclidean distance, length of the vecotr
let dist = Math.sqrt(dx*dx + dy*dy);
// (ux, uy): unit vector form 'posA' in direction to 'posB', with length 1
let ux = dx / dist;
let uy = dy / dist;
// (x2, y2): point with a distance of 40 from "posA" an the vector to "posB"
let x2 = posA.x + ux * 40;
let y2 = posA.y + uy * 40;
line(posA.x, posA.y, x2, y2);
在p5.js中,您可以使用p5.Vector
进行所有这些计算。
.sub()
减去两点并计算向量.normalize()
计算长度为1的单位矢量.mult()
缩放矢量.add()
将向量添加到该点let A = createVector(posA.x, posA.y);
let B = createVector(posB.x, posB.y);
let P = B.sub(A).normalize().mult(40).add(A);
line(posA.x, posA.y, P.x, P.y);
请参见示例:
function setup() {
createCanvas(200, 200);
}
function draw() {
background(0, 0, 0);
stroke(255, 0, 0);
strokeWeight(5);
let A = createVector(width/2, height/2);
let B = createVector(mouseX, mouseY);
let P = B.sub(A).normalize().mult(40).add(A);
line(A.x, A.y, P.x, P.y);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>