3

http://jsfiddle.net/psyketom/TUyJb/3/

我最近问了一个问题，根据百分比计算画布中一条线的端点：画布，绘制一条线段

现在，我被困在如何计算从起点开始的行中的 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 开始。
4

1 回答 1

3

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

// 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%。

于 2012-10-30T14:14:35.887 回答