입방체 베 지어 곡선으로 그려진 타원형의 부분을 그리려면 어떻게해야합니까?

Question

나는이 기능 (How to draw an oval in html5 canvas?)를 사용하여 HTML5 캔버스에 타원을 그리기 해요 :

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(); 
} 

을 그럼,이 모든 값을 받고 내 안드로이드 애플 리케이션로 전송하고있다. Path 클래스의 cubicTo 메소드를 사용하여 동일한 타원을 그립니다. 이를 위해 위의 함수와 동일한 매개 변수 만 사용하고 매력처럼 작동했습니다.

하지만 이제이 타원의 일부만 그려야하고 Google에서 나를 찾지 못했습니다. 내가 뭘하려는 첫 번째 타원을 가지고있다 :

나는이 이미지를 그릴 수 있도록하고 싶습니다 :

을

어떻게 이런 일을 할 수 있습니까?

Answer 1

:

Answer 2

http://pomax.github.io/bezierinfo/#circles_cubic을보십시오 -이 문제는 원호 (호의 각도로 표현 된 제어점 값이 섹션의 맨 아래에 있음)에 대해 설명하지만, 이들과 타원 사이의 유일한 차이점은 하나의 회전 + 비율 조정입니다 치수의 원형 근사를 이해한다면 타원 근사도 얻을 수 있습니다. 내가 할 수있는 간단한 방법이있어

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

Answer 3

모든 수학 물건 옆에, 당신은 단순히 클리핑을 사용할 수 있습니다. 웹 응용 프로그램에서 Bezier 큐브를 사용하는 타원을 그립니다. 그런 다음 타원의 centerX, centerY, width 및 height를 가져 와서 내 안드로이드 응용 프로그램에 전달합니다.

내 Android 앱에서 drawOval 메소드를 사용하여 웹에 그려진 타원을 그릴 수 있습니다. 이것으로 타원을 매개 변수로받는 drawArcs 메서드를 사용하여 타원의 호를 그릴 수 있습니다.

Answer 4

크롬은 CanvasRenderingContext2D.prototype.ellipse 타원 또는 타원 호를 그리는 방법을 지원합니다. 그러나 다른 브라우저는 타원 방법을 지원하지 않습니다.

canvas-5-polyfill을 사용하여 타원 방법을 제공 할 수 있습니다.

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(); 
    } 
}