在P5js上的一条线上方绘制文本

时间:2017-08-05 16:00:09

标签: javascript p5.js

我正在做一个图论项目,我需要在每个边缘上方显示边缘权重。

目前我正在使用这种方法:

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)); 
}

问题是结果好不如预期: current result

我的想法是,我显示的文字(42,边缘权重)略高于该行的中间位置,这是当前没有发生的。

我知道我必须考虑线的角度,但不确定在哪里。

感谢您提供任何帮助,如果您需要更多信息,请与我们联系。

1 个答案:

答案 0 :(得分:1)

您要做的是使用线性插值。首先,找到斜率截距形式的线方程,这样就可以求解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;