kinetic JS를 사용하여 다른 이미지를 추출하는 방법은 무엇입니까?

Question

이미지가있어서 원래 이미지를 수정하지 않고 이미지를 추출하여 다른 이미지를 만들어야합니다. 추출 된 이미지는 직사각형이며 4 포인트의 좌표를가집니다. 아무 기능도 할 수 없지만 찾을 수있는 기능이 있다면 http://kineticjs.com/docs/Kinetic.Image.html을 확인했습니다.

나는 자르기 방법으로 시도 :

var newImage = new Image(); 
    newImage.onload = function() { 
    var roikImage = new Kinetic.Image({ 
      x: 10, 
      y: 100, 
      image: this, 
      width:100, 
      heigth:100, 
      crop: { 
       x:0 , y:0 , width:100, heigth:100 
      } 

     }); 
    //Here I add the image to the layer, and draw the stage 
     }; 
     newImage.src= 'src/of/my/image'; 

그러나 나는 이미지의 작은 부분을 얻었다. 직사각형의 4 포인트 좌표를 사용하여 이미지 자르기를 수행하는 방법을 알아낼 수 없습니다.

아이디어가 있으십니까?

Answer 1

정확하게 이해한다면 자르기를 사용하여 올바른 방향으로 가고있는 것보다.

당신은 .getImage() 기능을 사용하여 다른 운동 이미지의 이미지를 잡아 수 있습니다 그리고 당신은 당신이 원하는 것을 달성하기 위해 crop 속성이나 setCrop() 및 getCrop() 방법을 사용할 수 있습니다. crop 내부 값은 다음 작물을 시작할 위치를 선택하고 Y 변경 X

var imageObj = new Image(); 
    imageObj.onload = function() { 
     var yoda = new Kinetic.Image({ 
      x: 100, 
      y: 50, 
      image: imageObj, 
      width: 106, 
      height: 118 
     }); 

     // add the shape to the layer 
     layer.add(yoda); 

     var newImage = new Kinetic.Image({ 
      x: 300, 
      y: 50, 
      width: 100, 
      height: 100, 
      image: yoda.getImage(), //get the original image from yoda 
      crop: { 
       x:0 , y:0 , width:100, height:100 
      } 
     }); 

     layer.add(newImage); 

     // add the layer to the stage 
     stage.add(layer); 
    }; 
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'; 

, 당신은 당신의 작물 크기가 X에서 시작되는 것입니다 크기에 폭과 높이을 설정 , 이미지의 y 점. x:0, y:0은 이미지의 왼쪽 상단 모서리입니다.

jsfiddle