Как я могу нарисовать части эллипса, нарисованные кубическими кривыми Безье?

Question

Я рисую эллипс в HTML5 Canvas, используя эту функцию (How to draw an oval in html5 canvas?):

function drawEllipse(ctx, x, y, w, h) { 
    var kappa = .5522848, 
     ox = (w/2) * kappa, // control point offset horizontal 
     oy = (h/2) * kappa, // control point offset vertical 
     xe = x + w,   // x-end 
     ye = y + h,   // y-end 
     xm = x + w/2,  // x-middle 
     ym = y + h/2;  // y-middle 

    ctx.beginPath(); 
    ctx.moveTo(x, ym); 
    ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); 
    ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); 
    ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); 
    ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); 
    ctx.closePath(); 
    ctx.stroke(); 
} 

Тогда я получаю все эти ценности и отправить их на мой Android приложения. Там я рисую один и тот же эллипс, используя метод cubTo класса Path. Для этого я использую только те же параметры функции, что и выше, и это работает как шарм.

Но теперь я должен нарисовать только части этого эллипса, и я ничего не нашел в Google, который может помочь мне в этом. То, что я хотел бы сделать это, имея первый эллипс:

Я хотел бы иметь возможность использовать эти изображения:

Как я могу это сделать?

Answer 1

У меня есть простой способ сделать это. Я просто рисую в своем веб-приложении эллипс, используя инструменты Безье. Затем я получаю centerX, centerY, ширину и высоту эллипса и передаю их в приложение для Android.

В моем приложении для Android я могу нарисовать эллипс, нарисованный в Интернете, используя метод drawOval. При этом я могу рисовать дуги эллипса, используя метод drawArcs, который получает параметр Oval as.

Answer 2

Посмотрите на http://pomax.github.io/bezierinfo/#circles_cubic - обсуждается эта проблема для круговых дуг (значение контрольной точки, выраженное в угле дуги, находится в нижней части секции), но единственная разница между ними и эллипсами - это поворот + масштабирование одного размеров. Если вы поймете круговое приближение, вы также сможете получить эллиптическое приближение.

Answer 3

Помимо всего математического материала, вы могли бы просто использовать вырезку:

canvas.save(); 
canvas.clipRect(mYourTargetRect); 
// draw your arc/circle/object/oval/whatever here 
canvas.restore(); 

Answer 4

Хромированные опоры CanvasRenderingContext2D.prototype.ellipse метод рисования эллипса или эллиптической дуги. Но другие браузеры не поддерживают метод эллипса.

Вы можете использовать canvas-5-polyfill, чтобы обеспечить метод эллипса.

Или просто написать некоторые JS код:

if (CanvasRenderingContext2D.prototype.ellipse == undefined) { 
    CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise) { 
    this.save(); 
    this.translate(x, y); 
    this.rotate(rotation); 
    this.scale(radiusX, radiusY); 
    this.arc(0, 0, 1, startAngle, endAngle, antiClockwise); 
    this.restore(); 
    } 
}