Постройте кривую между двумя точками на холсте

Имея набор точек, скажем, (10, 10) и (50, 10), как построить кривую между ними? Моя геометрия немного заржавела, и я не уверен, какой метод холста использовать (arc(), quadradicCurveTo() и т. д.).

Может кто-то указать мне верное направление?


canvas html geometry curves
person ben lemasurier    schedule 30.03.2012    source источник
comment
Это зависит от того, какую кривую вы хотите. Обычно кривая определяется более чем двумя точками.   -  person hobberwickey    schedule 30.03.2012
comment
@hobberwickey, наверное, я точно не знаю, какой тип кривой мне нужен. Я хотел бы заполнить как можно выше. например высота холста = 500, start_x = 0, start_y = 0, end_x = 50, end_y = 0, midpoint_x = 25, midpoint_y = 500;   -  person ben lemasurier    schedule 30.03.2012

Ответы (1)


arrow_upward
1
arrow_downward

Ну, есть много разных вариантов в зависимости от того, как вы хотите, чтобы кривая выглядела, но в основном это сделает две точки частью эллипса.

function curveBetweenPoints(startX, startY, endX, endY, ctx){
    var cp1 = {
        x: startX,
        y: ctx.canvas.height - ((ctx.canvas.height - startY) / 2)
    };

    var cp2 = {
        x: startX + ((endX - startX) / 4),
        y: ctx.canvas.height
    };

    var cp3 = {
       x: endX - ((endX - startX) / 4),
       y: ctx.canvas.height
    }

    var cp4 = {
       x: endX,
       y: ctx.canvas.height - ((ctx.canvas.height - endY) / 2)
    }

    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, (endX - startX) / 2, ctx.canvas.height);
    ctx.bezierCurveTo(cp3.x, cp3.y, cp4.x, cp4.y, endX, endY);
    ctx.stroke();
}
person hobberwickey    schedule 30.03.2012
comment
Протестировал это в Chrome/Firefox/Safari, и на самом деле это не так. Средняя точка заканчивается где-то внизу холста - person Geuis; 19.11.2012
comment
ну, если это эллипс, он, вероятно, должен быть в середине максимального радиуса от центральной точки. Когда я запустил ваш код, линия слегка изгибается с обоих концов, а затем нос ныряет вниз и влево в виде волнистой линии. - person Geuis; 20.11.2012
comment
Исправлено, теперь это более плавная кривая, jsfiddle.net/e9qAH/2. По сути, это две четверти двух разных эллипсов, склеенных вместе. Я не знаю математики, чтобы сделать непрерывный Безье, который заполняет доступную высоту холста, или квадратичную кривую, которая пересекает две заданные точки на плоскости. - person hobberwickey; 20.11.2012