2

複数の点で構成される線がある場合、元の点を完全に無傷で動かさずに、中間点を追加して線を滑らか/曲線/柔らかくするにはどうすればよいですか？

説明のために、この図では上から下に移動します。

ここに画像の説明を入力してください

上の写真で、下から始めると、より鋭い右折になることに注意してください。ただし、下の画像では、この鋭い右折は、2つのポイントの中央に配置された中間ポイントを追加し、他の線の角度の平均を使用することによって、少し「ソフト」になっています。（別の言い方をすれば、急に方向を変えることができなかったので、レースカーが運転するラインを想像してみてください。）ただし、元のポイントはどれも「触れられて」いないことに注意してください。ポイントを追加しただけです。

ありがとう！！その価値については、JavaScriptとCanvasを使用してこれを実装しています。

4

2 に答える 2

4

各「中間」エッジ (me) に隣接する各エッジ (e1 & e2) で

  • X = 'me' の長さの半分
  • e1 と e2 の 'me' に触れている両端を越えた 2 点 X の距離を見つけます (以下を参照)
  • これらの 2 点をベジェ制御点にします。
  • DeCasteljau アルゴリズム (例はこちら) を使用して、3 次ベジエの中点 (2 つの制御点と「me」の各端) を見つけます。
  • 私の 2 つの座標の間に新しい「中点」を挿入します。

例

FloatPoint ExtendLine(const FloatPoint A, const FloatPoint B, single distance)
{
  FloatPoint newB;
  float lenAB =  sqrt((A.x - B.x) * (A.x - B.x) + (A.y - B.y) * (A.y - B.y));
  newB.X = B.x - (B.x - A.x) / lenAB * distance;
  newB.Y = B.Y - (B.Y - A.Y) / lenAB * distance;
  return newB;
}
于 2012-04-15T15:43:37.937 に答える
-2

ここの他の場所にある次のコードは、私が使用している JavaScript-Canvas の特定のコンテキストで、私のために仕事をしますが、より一般的なアプローチについては、Angus の回答を参照してください。

var max = points.length;
context.beginPath();
var i = 0;
context.moveTo(points[i].x, points[i].y);
for (i = 1; i < max - 2; i++) {
    var xc = (points[i].x + points[i + 1].x) * .5;
    var yc = (points[i].y + points[i + 1].y) * .5;
    context.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
}
context.quadraticCurveTo(points[max - 2].x, points[max - 2].y, points[max - 1].x,points[max - 1].y);
context.closePath();
context.stroke();
于 2012-04-16T22:56:32.827 に答える