поворот и перевод значения при рисовании текста в строку (x1, y1, x2, y2) (использование p5.js , обработка... atan2)

#javascript #processing #p5.js

#javascript #обработка #p5.js

Вопрос:

когда я рисую текст в строку и поворачиваю с помощью theta, текст находится очень далеко от строки. Я думаю, причина в том, что я полагаюсь на translate, но я не знаю, как это исправить. это мой код (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, 0)
    point(x, y);
    point(x2, y2);
    textSize(10);
    noStroke();
    text(`x(${x}, ${y})`, x, y);
    text(`x(${x2}, ${y2})`, x2, 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, 0, 255);

    text("A", x, y);
    rect(x, y, 50, 50);
}

Я хочу, чтобы текст точно соответствовал строке

Я боролся с этим вопросом в течение пяти дней. после того, как я с трудом понял, что такое тета и тангенс, и так далее, выполнение этого шага заставляет меня с нетерпением ждать следующего шага… пожалуйста, помогите!

1. Примечание: я считаю, что самый простой способ при размещении текста — это перевести в точку на линии (не в начальную точку x, y), затем применить поворот, затем поместить текст в «0,0», потому что позиция уже задана translate и rotate . Вам нужно будет немного поработать с тригонометрией, чтобы определить расстояние по линии, которое вам нужно пройти, чтобы получить координаты x и y для перевода.

2. вы спасли меня, большое вам спасибо! текст («A», 0, 0,) работает!

3. @sorifiend вы должны опубликовать это как ответ, чтобы за него могли проголосовать / принять / легко заметить другие

Ответ №1:

Основная идея здесь для размещения текста заключается в том, что вы хотите перевести в точную точку на линии / фигуре, затем повернуть и разместить свой текст, например, вы могли бы сделать следующее, чтобы поместить повернутый текст в начало строки:

 //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, 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, 0);