2

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

0

1 ответ 1

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>

3
  • isPointInStroke в easeljs нет такой функции и до сих пор решения получить так и не удалось(
    – 隼SAPSAN
    15 июл 2021 в 16:09
  • Вообще нужно узнать не выходит ли линия кривая за пределы размеров 800x600
    – 隼SAPSAN
    15 июл 2021 в 16:16
  • Значит надо копаться в библиотеке и находить path, чтобы подставить в isPointInStroke. Это метод контекста холста, ему не нужна поддержка библиотеки.
    – Leonid
    15 июл 2021 в 16:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.