2017-05-15 4 views
0

내 주요 목표는 이미지에 표시된대로 셔츠의 전체 소매에 맞춰야하는 커브를 생성하는 것입니다. enter image description here업로드 된 패브릭 패턴으로 커브를 생성하는 방법

나는 시도했지만 여전히 선이 예상

도움으로 제대로 내게 오는되지 않습니다.

테스트 패브릭 패턴은 아래 표시된 이미지의 수직 패브릭입니다. 내가 스크립트를 다음에 일한 을 형성 소매에 맞게 더 정확합니다 enter image description here

내가 스크립트 함수에서 밖으로 나왔을 것입니다.

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)" />

+0

나는이 문제가 질문을 이해 있습니다. 입력 한 내용, 원하는 출력 및 제시된 코드가 문제를 해결하기 위해 시도하는 방법에 대해 다시 말씀해 주시겠습니까? –

+0

이 업데이트되었습니다. @le_m을 확인하십시오. – Mohammed

답변

0

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

무슨 뜻인지의 거친 그림 : rotateRatherThanOffset

관련 문제