在我一直从事的p5 /处理项目中,我需要创建一条在中间具有三角形的线,该三角形始终面向该线的连接点之一。创建一个静止不动的对象非常容易,但是我的端点会四处移动并旋转。当线移动到此“ |”时,我需要找到一种方法来旋转小三角形 由此 ” - -”。我当前的代码是这样的:
let middleX = (fromX + toX)/2;
let middleY = (fromY + toY)/2;
triangle(middleX,middleY+5,middleX+5,middleY,middleX,middleY-5);
line(fromX , fromY, toX, toY);
如您所料,这不适用于旋转。我需要帮助 :)。感谢您的关注。
您可以:
这是一个基于您的片段的示例:
let fromX = 200;
let fromY = 200;
let toX = 300;
let toY = 100;
let triangleSize = 5;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
// test: change to position
toX = mouseX;
toY = mouseY;
let middleX = (fromX + toX) / 2;
let middleY = (fromY + toY) / 2;
// calculate the angle between from -> to points
let angle = atan2(toY - fromY, toX - fromX);
// isolate coordinate system (indenting is purely visual, not required)
push();
// move to central position
translate(middleX, middleY);
// rotate from translated position
rotate(angle);
// render triangle
triangle(0, triangleSize, triangleSize, 0, 0, -triangleSize);
pop();
line(fromX, fromY, toX, toY);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
请注意,转换顺序(平移,旋转,缩放)很重要。(例如,如果旋转,则平移三角形将降落在其他位置)
另外,默认情况下,您将三角形绘制为指向右边,该三角形与0弧度旋转很好地对齐。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句