Нарисуйте текст над линией на P5js

Question

Нарисуйте текст над линией на P5js

1

Я делаю проект теории графов, и мне нужно показать вес края над каждым из краев.

в настоящее время я использую этот метод:

var x1; //starting point
var x2; //ending point


function setup() {
    createCanvas(640, 480);
    x1 = createVector(random(0, width/2), random(0, height/2)); //random position to the upper left
    x2 = createVector(random(width/2, width), random(height/2, height)); //random position to the lower right
}

function draw() {
    background(200);
    stroke(0);
    line(x1.x, x1.y, x2.x, x2.y); //draw a line beetween the points
    d = dist(x1.x, x1.y, x2.x, x2.y);
    var angle = atan2(x1.y - x2.y, x1.x - x2.x); // gets the angle of the line
    textAlign(CENTER);
    text("X1", x1.x + 5, x1.y + 5); // just to show where is the begining
    text("X2", x2.x - 5, x2.y - 5); // just to show there is the end
    fill(0);
    signalx = x1.x > x2.x ? -1 : 1; // if the start is to the right of the end
    signaly = x1.y > x2.y ? -1 : 1; // if the start is below the end
    // I think i need to use the angle here
    text(42, (x1.x + (d / 2) * signalx), (x1.y + (d / 2) * signaly)); 
}

проблема в том, что результат, ну, не так, как ожидалось:

Идея состоит в том, что текст, который я показываю (42, вес края) немного выше середины линии, что в настоящее время не происходит.

Я знаю, что я должен учитывать угол линии, но не знаю, где.

Спасибо за любую помощь, и если вам нужна дополнительная информация, дайте мне знать.

inblank 05 авг. 2017, в 18:52

Источник

Теги:

javascript

p5.js

1 ответ

Ещё вопросы

clabe45 · Accepted Answer · 2017-08-05T13-54-00.000Z

Вы хотите использовать линейную интерполяцию. Во-первых, найдите уравнение линии в форме перехвата наклона, поэтому вы можете решить для y (когда знаете x). (Я просто хочу переименовать x1 в p1 и x2 в p2 для ясности.)

(math)
// with points (x1, y1) and (x2, y2)
y - y1 = m*(x - x1)  // point-slope form (just a step)
y - y1 = m*x - m*x1 
y = m*x - m*x1 + y1  // slope-intercept

Тогда, поскольку x - середина линии, x равно среднему значению двух конечных точек. А затем вычислить y, основываясь на приведенном выше уравнении:

(code)
float m = (p2.y - p1.y) / (p2.x - p1.x);
int x = (x2 + x1) / 2;
int y = m*x - m*p1.x + p1.y;

Большое спасибо, это то, что мне было нужно. Я не был уверен, как рассчитать эту среднюю точку (слишком много лет от математики: D). маркировка как решенная.