Вычисление координат вершины кривой Безье;

Question

имеется кривая безье построенная по 3 точкам. как определить реальные координаты высоты отрисованной кривой?! Использую CreateJS (EaselJS) функция Graphics.BezierCurveTo ( cp1x cp1y, cp2x, cp2y, x, y )

Answer 1

Метод дорогой, находим все точки, лежащие на кривой. Затем сортируем по Х.

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let w = canvas.width = 500;
let h = canvas.height = 180;

let curve = new Path2D('M 10 10 Q 500 20 10 170');

ctx.stroke(curve);

let points = [];

for(let x = 0; x < w; x++){
    for(let y = 0; y < h; y++){
        if(ctx.isPointInStroke(curve, x, y)){
                points.push([x,y]);
        }
    }
}

let extremum = points.sort((a,b) => b[0] - a[0])[0];

ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(extremum[0], extremum[1], 5, 0, 2 * Math.PI);
ctx.fill();

<canvas id="canvas"></canvas>

Можно немного короче: перебирать точки с конечной X (x = w) и вернуть первую же точку, лежащую на кривой.

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let w = canvas.width = 500;
let h = canvas.height = 180;

let curve = new Path2D('M 10 10 Q 500 20 10 170');

ctx.stroke(curve);

let extremum = (() => {
    for(let x = w; x >= 0; x--){
        for(let y = 0; y < h; y++){
            if(ctx.isPointInStroke(curve, x, y)){
                    return [x,y];
            }
        }
    }
})();

ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(extremum[0], extremum[1], 5, 0, 2 * Math.PI);
ctx.fill();

<canvas id="canvas"></canvas>

БЛОГ НА HUSL

Вычисление координат вершины кривой Безье;

Ответы (1 шт):