アップロードされたファブリックパターンから曲線を作成する方法

Question

私の主な目的は、画像に示すようにシャツのフルスリーブにフィットするような曲線を生成することです。

私が試したが、それでも期待通りの線は

はこのために私を助けて適切に来ていません。

テストファブリックパターンは、以下の画像の縦型ファブリックです。私は、スクリプトを次のように働いている を形作る袖を中に収まるように、より正確にしたい

私はスクリプト機能から出て外に出たものです。

function curve2(event) 
 
{ \t 
 

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

 
    
 
    var getImagePath = URL.createObjectURL(event.target.files[0]); 
 

 
    // just some inits for demo 
 
    var img = new Image; 
 
    img.onload = slice; 
 
    img.src = getImagePath; 
 

 
    function slice() { 
 
     c.width = img.height; 
 
\t c.height = img.width; 
 
\t 
 
\t 
 
\t 
 

 
    // var step = Math.PI/h; // full circle/width of canvas 
 
    // var scale = 75; // max displacement on y 
 
\t \t var w = c.width = this.height; 
 
     var h = c.height = this.width+10; 
 
\t //var h = c.height = this.width+10; //2 
 
\t //var h = c.height = this.width-40; 
 
\t 
 
\t //396 
 
\t 
 
     var step = Math.PI/500; // full circle/width of canvas 
 
\t // var step = Math.PI/500; // 2 
 
     var scale = 240; // max displacement on y 
 
\t // var scale = 230; // 2 
 
\t // var scale = 200; // max displacement on y 
 

 
     for (var y = 0; y < h; y++) { 
 
     ctx.drawImage(this, 
 
      -1, y, w, 1, // source line from image 
 
      Math.cos(step * y) * scale, y,w, 1); // displaced line 
 
     } 
 
    } 
 

 
} \t

\t 
 

 
<canvas id="c"></canvas> 
 
<div id="ror"> 
 
<input type='file' id='getval' name="background-image" onchange="curve2(event)" />

Answer 1

私はより多くの資格を誰かに数学を残しておきますが、私はこの問題は、あなたがカーブを形成するために、それぞれの行を相殺しているという事実に由来だと思います。あなたは曲率の中心を中心に回転すべきだと思います。

私が何を意味するかのラフイラスト：