Question

我最近问了一个问题，根据百分比来计算画布中一条线的终点：Canvas, drawing a line segment

现在，我不知道如何计算从起始点开始用作实际起点的行中的X百分比。

在上面的小提琴中，我试图反映端点：

growth = 0.2;

// calculate line endpoint
current.x = start.x + (target.x - start.x) * growth;
current.y = start.y + (target.y - start.y) * growth;

// calculate line startpoint
scurrent.x = start.x + (start.x - target.x) * growth;
scurrent.y = start.y + (start.y - target.y) * growth;

但这似乎没有按照我的意愿去做。

我的真正目标是制作一个能画出一条线的功能：

在点x的边界，到点y
长度为n
从位置z开始。

Answer 1

你所说的端点实际上就是你的“起点”：

// calculate line "endpoint"
current.x = start.x + (target.x - start.x) * growth;
current.y = start.y + (target.y - start.y) * growth;

这是一个返回航点的函数：

// start and end are points with .x and .y
// q is a number between 0.0 and 1.0
var waypoint = function (start, end, q) {

    return {
        x: start.x + (end.x - start.x) * q,
        y: start.y + (end.y - start.y) * q
    };
}

现在您可以随时随地计算航路点：

var start = {x: 10, y: 20},
    end = {x: 120, y: 70},

    a = waypoint(start, end, 0.2),
    b = waypoint(start, end, 0.8);

a和b将从原始行的任意一端指向20％。

画布，计算起点20％

1 个答案: