YはPath.quadToのベジエ曲線に沿って座標検索

user5480949:

I Yが二次ベジエ曲線に沿った点の座標を見つける必要があるX値(またはパーセンテージ)を与え

曲線は、これを使用して、アンドロイドに引かれた線図の一部です。

Path.quadTo(prev.x, prev.y, (p.x + prev.x)/2, (p.y + prev.y)/2);

クリアセプルベダ:

二次ベジェ曲線の式は

x = (1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x;
y = (1 - t) * (1 - t) * p[0].y + 2 * (1 - t) * t * p[1].y + t * t * p[2].y;

...しかし、私はちょうどHTMLキャンバスの上にあることをテストしていたし、完全に一致していないようです。
彼らは少しと異なるカスタム実装を持っているかもしれません。

あなたは、Android上でテストする必要がありますし、うまくいけば、これは正しい道にあなたを送信し、表示されます。

var c = document.getElementById("c");
var ctx = c.getContext("2d");

function drawCurve(p) {
  ctx.beginPath();
  ctx.bezierCurveTo(p[0].x, p[0].y, p[1].x, p[1].y, p[2].x, p[2].y);
  ctx.stroke();

  ctx.fillStyle = "red";
  for (var i = 0; i < 100; i++) {  
    ctx.beginPath();  
    t = i/100; 
    x = (1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x;
    y = (1 - t) * (1 - t) * p[0].y + 2 * (1 - t) * t * p[1].y + t * t * p[2].y;

    ctx.arc(x, y, 1, 0, 2 * Math.PI);
    ctx.fill();
  }
}

drawCurve([
  {x:10, y:120},
  {x:340, y:120},
  {x:340, y:20},
])

drawCurve([
  {x:50, y:10},
  {x:180, y:150},
  {x:240, y:10},
])
<canvas id="c" width="350" height="150"></canvas>

おすすめ

転載: http://43.154.161.224:23101/article/api/json?id=373121&siteId=1