3

この関数を使用して、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 アプリに送信します。そこでPathクラスのcubicToメソッドを使って同じ楕円を描いています。このために、上記の関数と同じパラメーターのみを使用し、魅力的に機能しました。

しかし今、私はこの楕円の一部だけを描く必要があり、Google でこれを助けることができるものは何も見つかりませんでした. 私がやりたいのは、この最初の楕円を持つことです:

ここに画像の説明を入力

私はこれらの画像を描くことができるようにしたいと思います:

ここに画像の説明を入力

ここに画像の説明を入力

ここに画像の説明を入力

どうすればこのようなことができますか？

4

4 に答える 4

1

http://pomax.github.io/bezierinfo/#circles_cubicを見てください- 円弧に関するこの問題について説明しています (円弧角度で表される制御点の値はセクションの下部にあります) が、それらの唯一の違いは楕円は、いずれかの次元の回転 + スケーリングです。円近似がわかれば、楕円近似もできるようになります。

于 2013-04-09T20:21:29.720 に答える
0

すべての数学的なものに加えて、単純にクリッピングを使用できます。

canvas.save();
canvas.clipRect(mYourTargetRect);
// draw your arc/circle/object/oval/whatever here
canvas.restore();
于 2013-04-09T20:55:15.147 に答える
0

Chrome では、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();
  }
}
于 2016-06-01T07:52:16.957 に答える
0

私はそれを行う最も簡単な方法を持っています。Web アプリケーションで、ベジエ キューバーを使用して楕円を描画するだけです。次に、楕円の centerX、centerY、幅、高さを取得し、Android アプリケーションに渡します。

私の Android アプリでは、drawOval メソッドを使用して Web で描かれた楕円を描くことができます。これにより、パラメータとして Oval を受け取る drawArcs メソッドを使用して、楕円の弧を描くことができます。

于 2013-04-11T11:46:17.697 に答える