は、私は私の塗料用

申し訳ありませんがベジエ曲線のエンドポイントを変更したい：は、私は私の塗料用

私は、変更ベジエ曲線の終点は

コントロールポイントとのポイントからスタート（c1は、c2）がポイント

を終了させたいです

ポイントが変更ポイントに達したとき（ピンク）、変更エンドポイントと

スムーズに新しいエンドポイントの新しいパスを取得

どのようにですか？助けてください..

出典

2017-06-05 진여준

こんにちは？ –

@AnindyaDutta私はあなたの言うことを理解していません... –

あなたは解説ニ？あなたはこの問題に直面していますか？ –

私はあなたの質問を理解しませんが、私はベジェ曲線を理解できるようにする簡単なプログラムを作成しました。

<html> 
 
<head> 
 
\t <title>A simple tool</title> 
 

 
\t <style type="text/css"> 
 
\t body { 
 
\t \t margin: 0; 
 
\t \t padding: 0; 
 
\t \t overflow: hidden; 
 
\t } 
 

 
\t .controlButton { 
 
\t \t border: 0; 
 
\t \t background: #000; 
 
\t \t border-radius: 10px; 
 
\t \t outline: 0; 
 
\t \t position: absolute; 
 
\t \t margin: 1px; 
 
\t \t font-family: monospace; 
 
\t \t color: #fff; 
 
\t } 
 

 
\t #mainCanvas { 
 
\t \t background: #FFF; 
 
\t } 
 

 
\t #output { 
 
\t \t position: absolute; 
 
\t \t top: 0; 
 
\t \t left: 0; 
 
\t \t background: #000; 
 
\t \t color: #fff; 
 
\t \t padding: 2px 7px; 
 
\t \t border-radius: 10px; 
 
\t \t font-family: Monospace; 
 
\t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div class="controlWrapper"> 
 
\t \t <button class="controlButton" onclick="activePoint='sp'" id="sp">Start Point</button> 
 
\t \t <button class="controlButton" onclick="activePoint='cp1'" id="cp1">Control Point 1</button> 
 
\t \t <button class="controlButton" onclick="activePoint='cp2'" id="cp2">Control Point 2</button> 
 
\t \t <button class="controlButton" onclick="activePoint='ep'" id="ep">End Point</button> 
 
\t </div> 
 
\t <canvas id="mainCanvas"></canvas> 
 
\t <div id="output"></div> 
 

 
\t <script type="text/javascript"> 
 
\t var canvas = document.getElementById("mainCanvas"); 
 
\t var ctx = canvas.getContext("2d"); 
 
\t var width = canvas.width = innerWidth; 
 
\t var height = canvas.height = innerHeight; 
 

 
\t var activeCurve = { 
 
\t \t sp: { x: width/2, y: height/2 }, 
 
\t \t cp1: { x: width/2+50, y: height/2+100 }, 
 
\t \t cp2: { x: width/2+200, y: height/2+100 }, 
 
\t \t ep: { x: width/2+200, y: height/2+50 } 
 
\t }; 
 

 
\t var activePoint = ""; 
 

 
\t addEventListener("mousemove", function(e) { 
 
\t \t switch(activePoint) { 
 
\t \t \t case "sp": 
 
\t \t \t \t activeCurve.sp.x = e.clientX; 
 
\t \t \t \t activeCurve.sp.y = e.clientY; 
 
\t \t \t \t break; 
 
\t \t \t case "cp1": 
 
\t \t \t \t activeCurve.cp1.x = e.clientX; 
 
\t \t \t \t activeCurve.cp1.y = e.clientY; 
 
\t \t \t \t break; 
 
\t \t \t case "cp2": 
 
\t \t \t \t activeCurve.cp2.x = e.clientX; 
 
\t \t \t \t activeCurve.cp2.y = e.clientY; 
 
\t \t \t \t break; 
 
\t \t \t case "ep": 
 
\t \t \t \t activeCurve.ep.x = e.clientX; 
 
\t \t \t \t activeCurve.ep.y = e.clientY; 
 
\t \t \t \t break; 
 
\t \t } 
 
\t }); 
 

 
\t addEventListener("click", function() { 
 
\t \t activePoint = ""; 
 
\t }, true) 
 

 
\t function draw() { 
 
\t \t var sp = document.getElementById("sp"); 
 
\t \t sp.style.top = activeCurve.sp.y + "px"; 
 
\t \t sp.style.left = activeCurve.sp.x + "px"; 
 

 
\t \t var cp1 = document.getElementById("cp1"); 
 
\t \t cp1.style.top = activeCurve.cp1.y + "px"; 
 
\t \t cp1.style.left = activeCurve.cp1.x + "px"; 
 

 
\t \t var cp2 = document.getElementById("cp2"); 
 
\t \t cp2.style.top = activeCurve.cp2.y + "px"; 
 
\t \t cp2.style.left = activeCurve.cp2.x + "px"; 
 

 
\t \t var ep = document.getElementById("ep"); 
 
\t \t ep.style.top = activeCurve.ep.y + "px"; 
 
\t \t ep.style.left = activeCurve.ep.x + "px"; 
 

 
\t \t var o = document.getElementById("output"); 
 
\t \t o.innerHTML = "<i>context</i>.moveTo(" + activeCurve.sp.x + ", " + activeCurve.sp.y +");<br/><i>context</i>.bezierCurveTo(" 
 
\t \t \t + activeCurve.cp1.x + "," 
 
\t \t \t + activeCurve.cp1.y + "," 
 
\t \t \t + activeCurve.cp2.x + "," 
 
\t \t \t + activeCurve.cp2.y + "," 
 
\t \t \t + activeCurve.ep.x + "," 
 
\t \t \t + activeCurve.ep.y + ");"; 
 

 
\t \t ctx.fillStyle = "#FFF"; 
 
\t \t ctx.fillRect(0, 0, width, height); 
 

 
\t \t ctx.beginPath(); 
 
\t \t ctx.fillStyle = "#289e82"; 
 
\t \t ctx.strokeStyle = "#16614f"; 
 
\t \t ctx.lineWidth = 5; 
 

 
\t \t ctx.moveTo(activeCurve.sp.x, activeCurve.sp.y); 
 
\t \t ctx.bezierCurveTo(
 
\t \t \t activeCurve.cp1.x, activeCurve.cp1.y, 
 
\t \t \t activeCurve.cp2.x, activeCurve.cp2.y, 
 
\t \t \t activeCurve.ep.x, activeCurve.ep.y); 
 

 
\t \t ctx.stroke() 
 
\t \t ctx.fill(); 
 

 
\t \t ctx.closePath(); 
 

 
\t \t ctx.save(); 
 
\t \t ctx.beginPath(); 
 
\t \t ctx.lineWidth = 2; 
 
\t \t ctx.strokeStyle = "#101010"; 
 
\t \t ctx.globalAlpha = 0.2; 
 

 
\t \t ctx.moveTo(activeCurve.sp.x, activeCurve.sp.y); 
 
\t \t ctx.lineTo(activeCurve.cp1.x, activeCurve.cp1.y); 
 
\t \t ctx.moveTo(activeCurve.ep.x, activeCurve.ep.y); 
 
\t \t ctx.lineTo(activeCurve.cp1.x, activeCurve.cp1.y); 
 

 
\t \t ctx.moveTo(activeCurve.sp.x, activeCurve.sp.y); 
 
\t \t ctx.lineTo(activeCurve.cp2.x, activeCurve.cp2.y); 
 
\t \t ctx.moveTo(activeCurve.ep.x, activeCurve.ep.y); 
 
\t \t ctx.lineTo(activeCurve.cp2.x, activeCurve.cp2.y); 
 

 
\t \t ctx.stroke(); 
 
\t \t ctx.closePath(); 
 
\t \t ctx.restore(); 
 

 
\t \t requestAnimationFrame(draw); 
 
\t } 
 

 
\t draw() 
 
\t </script> 
 
</body> 
 
</html>

私はそれが右のあなたがコントロールポイントEを変更したいが、まだあなたの曲線が同じピンクのポイントを通過することを望むしまった場合は、コントロールポイントだから、

出典

2017-06-05 03:05:02

をクリックして選択します。これを達成するにはいくつかの方法があります。たとえば、変更点をコントロールポイントとして複製することができます。トリプルコントロールポイントを使用するキュービックでは、カーブを強制的に通過させます。 cubicsを積み重ね詳細は以下を参照してください

piecewise cubics call sequence

しかし近似多項式を使用して、タスクのこの種のために常に問題になる可能性があります。代わりに補間多項式を使用してみてください。それではEを変更し、BEZIER制御点（ケースには、あなただけBEZIERをレンダリングすることができます）に戻って変換する（ように変化点が制御点の一つである）キュービック補間するBEZIERコントロールポイントを変換します。 BEZIERと補間cubics間の変換はここにある：

BEZIER vs. interpolation cubic

Split a cubic bezier curve at multiple points

出典

2017-06-05 08:03:22 Spektre

答えて

関連する問題