업로드 된 패브릭 패턴으로 커브를 생성하는 방법

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

내가 더 자격을 갖춘 사람에게 수학을 떠날거야하지만 문제는 당신이 곡선을 형성하기 위해 각 행을 상쇄하고 있다는 사실에서 유래 생각합니다. 나는 당신이 곡률 중심을 중심으로 회전해야한다고 생각합니다.

무슨 뜻인지의 거친 그림 :