如何解决将文字绘制到linex1,y1,x2,y2时旋转和转换值使用p5.js,正在处理... atan2
当我将文本绘制到线条上并随着theta旋转时 文本离行很远。 我认为,原因在于翻译,但我不知道如何解决。 这是我的代码(p5.js)
function setup() {
createCanvas(500,700);
x = 100;
y = 200;
x2 = 300;
y2 = 500;
}
function draw() {
background(200);
strokeWeight(2);
stroke(0,255,0);
line(x,y,x2,y2);
strokeWeight(5);
stroke(255,0)
point(x,y);
point(x2,y2);
textSize(10);
nostroke();
text(`x(${x},${y})`,x,y);
text(`x(${x2},${y2})`,y2);
// Whether this code needs "translate" or not,// I want to kNow same method when I draw text to line,circle ... so on
translate(x,y);
rotate(atan2(y2 - y,x2 - x));
nostroke();
textSize(50);
fill(0,255);
text("A",y);
rect(x,50,50);
}
我想将文本调整为紧密对齐
我已经为这个问题苦苦挣扎了五天。 在几乎不了解θ和切线等之后, 保持这一步会让我急于下一步...请帮助!
解决方法
此处放置文本的基本思想是,您希望平移到直线/形状上的确切点,然后旋转并放置文本,例如,您可以执行以下操作将旋转的文本放置在线条的开头行:
//Translate to the start of the line
translate(x,y);
//rotate to the desired angle (for example 20)
rotate(20);
//place the text at the start of the line
text("A",0);
如果您希望文本位于直线/形状上的特定点,则可以执行三角函数以找到确切的点,然后将这些点用于翻译:
//Translate to a point on the line before you rotate
translate(linePointX,linePointY);
//rotate to the desired angle (for example 20)
rotate(20);
//place the text at 0,0 (the point of the last translate)
//or increase/decrease the x and y vaues to offset the text
text("A",0);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。