回答編集履歴

三次ベジェでの処理内容を正しいものに修正した。

2018/08/07 14:00

投稿

atata0319

スコア881

test CHANGED Viewed

@@ -38,7 +38,7 @@
 ７．ベクトルAとベクトルBの単位ベクトルを掛け算して図上のCAとCBの座標を求める。
-ここまでの手順で bezierCurveTo によって疑似円弧を描画する情報は集まっています。
+~~ここまでの手順で bezierCurveTo によって疑似円弧を描画する情報は集まっています。~~
@@ -58,11 +58,11 @@
-新円を赤、二次ベジェ曲線を緑、三次ベジェ曲線を青で描画しています。
+円弧を赤、二次ベジェ曲線を緑で描画しています。
-![半径40](c1b6e3740b14cbf5108f58e295d70abe.png)
-![半径240](a12486c67bf83e438cd71a7cb935635b.png)
+![arcで描画](715fec3d880d12a368492244547ba12c.png)![bezierCurveToで描画](878d51dea17deebb340e156b2686450a.png)
 コードにする以下のような感じです。
@@ -92,6 +92,8 @@
   半径：<input id="input_r" value="40" /><br />
+  <input type="checkbox" id="arc" checked /><label for="arc">arc</label><input type="checkbox" id="bezierCurveTo" checked /><label for="bezierCurveTo">bezierCurveTo</label><input type="checkbox" id="quadraticCurveTo" /><label for="quadraticCurveTo">quadraticCurveTo</label><br />
   <canvas id="canvas" width="500" height="500"></canvas>
 </body>
@@ -122,8 +124,6 @@
   const r = input_r.value;
-  const k = 4 * (Math.sqrt(2) - 1) / 3;
   const ctx = canvas.getContext('2d');
@@ -248,68 +248,44 @@
   // 制御点をPとした二次ベジェを描画してみる。
+  if (quadraticCurveTo.checked) {
+    ctx.beginPath();
+    ctx.strokeStyle = 'green';
+    ctx.moveTo(xCA, yCA);
+    ctx.quadraticCurveTo(0, 0, xCB, yCB);
+    ctx.stroke();
+  }
+  // ８．円の中心を求める。
+  // 円の中心ベクトルはベクトルMの単位ベクトルに対辺の長さを掛けたものになる。
+  const xE = xUM * r / sin;
+  const yE = yUM * r / sin;
+  // 参考のために円を描画する。
   ctx.beginPath();
-  ctx.strokeStyle = 'green';
+  ctx.strokeStyle = 'black';
-  ctx.moveTo(xCA, yCA);
-  ctx.quadraticCurveTo(0, 0, xCB, yCB);
+  ctx.arc(xE, yE, r, 0, 2 * Math.PI);
   ctx.stroke();
-  // 三次ベジェを描画してみる。
-  // https://cat-in-136.github.io/2014/03/bezier-1-kappa.html
-  ctx.beginPath();
-  ctx.strokeStyle = 'blue';
-  ctx.moveTo(xCA, yCA);
-  ctx.bezierCurveTo(
-      xCA - xUA * r * k,
-      yCA - yUA * r * k,
-      xCB - xUB * r * k,
-      yCB - yUB * r * k,
-      xCB,
-      yCB);
-  ctx.stroke();
-  // ８．円の中心を求める。
-  // 円の中心ベクトルはベクトルMの単位ベクトルに対辺の長さを掛けたものになる。
-  const xE = xUM * r / sin;
-  const yE = yUM * r / sin;
-  // 参考のために円を描画する。
-  ctx.beginPath();
-  ctx.strokeStyle = 'black';
-  ctx.arc(xE, yE, r, 0, 2 * Math.PI);
-  ctx.stroke();
   // ９．A接点の角度を求める。
   const thetaCA = Math.atan2(yCA - yE, xCA - xE);
@@ -322,15 +298,77 @@
+  // １０．三次ベジェを描画してみる。
+  if (bezierCurveTo.checked) {
+    // κ値を計算する。
+    // https://cat-in-136.github.io/2014/03/bezier-3-general-theta.html
+    const k = 4 * Math.tan(Math.abs(thetaCA - thetaCB) / 4) / 3;
+    // A側制御点
+    const xCPA = xCA - xUA * r * k;
+    const yCPA = yCA - yUA * r * k;
+    ctx.beginPath();
+    ctx.fillStyle = 'blue';
+    ctx.arc(xCPA, yCPA, 2, 0, 2 * Math.PI);
+    ctx.fill();
+    // B側制御点
+    const xCPB = xCB - xUB * r * k;
+    const yCPB = yCB - yUB * r * k;
+    ctx.beginPath();
+    ctx.fillStyle = 'blue';
+    ctx.arc(xCPB, yCPB, 2, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.strokeStyle = 'blue';
+    ctx.moveTo(xCA, yCA);
+    ctx.bezierCurveTo(xCPA, yCPA, xCPB, yCPB, xCB, yCB);
+    ctx.stroke();
+  }
   // １０．円弧を描画する。
+  if (arc.checked) {
-  ctx.beginPath();
+    ctx.beginPath();
-  ctx.strokeStyle = 'red';
+    ctx.strokeStyle = 'red';
-  ctx.arc(xE, yE, r, Math.min(thetaCA, thetaCB), Math.max(thetaCA, thetaCB));
+    ctx.arc(xE, yE, r, Math.min(thetaCA, thetaCB), Math.max(thetaCA, thetaCB));
-  ctx.stroke();
+    ctx.stroke();
+  }
@@ -354,6 +392,12 @@
 input_r.addEventListener('input', onInput, false);
+arc.addEventListener('change', onInput, false);
+bezierCurveTo.addEventListener('change', onInput, false);
+quadraticCurveTo.addEventListener('change', onInput, false);
 onInput();
@@ -377,3 +421,13 @@
 なお、偉そうにいってますが、上記のコードでは三次ベジェが正しく描画されていないように思えます。私が作った数式は間違っている以外に考えられないのですが、問題を見つけることができませんでした。
+---
+問題点が分かりました。最初のプログラムではκ値を固定値としていましたが、2つの線分の角度によってκ値を計算する必要があったようです。
+[https://cat-in-136.github.io/2014/03/bezier-3-general-theta.html](https://cat-in-136.github.io/2014/03/bezier-3-general-theta.html)
+文中のコードも修正してあります。結果として2点の角度を求める必要があるため、arc で処理するのも bezierCurveTo も計算量は同じになりました。cosθから計算することもできますが、数式を考えるのが面倒なのでやってません。

画像が添付できていなかったのを足しました。

2018/08/07 14:00

投稿

atata0319

スコア881

test CHANGED Viewed

@@ -4,7 +4,7 @@
+![記号の説明](cc1cda1c1eec6f56d172fe7fbfa7bc34.png)
@@ -58,7 +58,13 @@
-コードにする以下のような感じです。新円を赤、二次ベジェ曲線を緑、三次ベジェ曲線を青で描画しています。
+新円を赤、二次ベジェ曲線を緑、三次ベジェ曲線を青で描画しています。
+![半径40](c1b6e3740b14cbf5108f58e295d70abe.png)
+![半径240](a12486c67bf83e438cd71a7cb935635b.png)
+コードにする以下のような感じです。
 ```HTML
@@ -362,10 +368,12 @@
 ```
+Chrome と Edge で確認しています。
 単一のHTMLですが github にも上げてみました。
 [https://github.com/atata0319/teratail139697](https://github.com/atata0319/teratail139697)
-偉そうにいってますが、上記のコードでは三次ベジェが正しく描画されていないように思えます。数式は間違ってなさそうなのですが、最初にあげたサイト通りの結果ではなさそうです。
+なお、偉そうにいってますが、上記のコードでは三次ベジェが正しく描画されていないように思えます。私が作った数式は間違っている以外に考えられないのですが、問題を見つけることができませんでした。