KineticJS - 자르기 채우기 이미지

Question

내 게임에서 타일셋을 사용하려고합니다. 채우기 이미지를 자르고 싶지만 할 수 없습니다.

1. Kinetic.Image() 객체로 도형을 칠할 수 없습니다.

2. Image() 객체를자를 수 없습니다.

   var rect = new Kinetic.Rect({ 
       x: 0, 
       y: 0, 
       width: 64, 
       height: 64, 
       fill:{ 
        image: imageObj, 
        crop:{ 
         x: 128, 
         y: 128, 
         width: 64, 
         height: 64 
        }, 
       }, 
        strokeWidth: 1 
   }); 
   

이 작동하지 않습니다

, 나는 또한 이미지를 대체 할 수 없습니다 : precropped하는 Kinetic.Image() 객체로 imageObj합니다. 어떤 아이디어?

편집 : 그것을 채우기로 사용 가능한 이미지 객체로 자른 Kinetic.Image를로드 toDataUrl를 사용하여 장면에 Kinetic.Image을 그림으로써 가능할 것이다처럼가 보이는 다음지도 스크립트를 계속합니다. 이것은 많은 성능 문제/로딩 시간을 가져다 놓았으므로 내가하고 싶은 일이 실행 가능하지 않다고 가정합니다. 이 작업을 올바르게 수행하는 방법에 대한 아이디어가 있으면 알려주십시오.

Answer 1

당신은 베이더/요다이 예와 같이 이미지를 받아들이는 입력받을 수 있습니다

http://www.html5canvastutorials.com/kineticjs/html5-canvas-set-fill-with-kineticjs/

그가에서와 같이 내가 (배열로 이미지를로드하는 게 좋을 것 이 예제에서는 타일을 만들 때 이미지를 호출합니다.

나는과 같이 그 예에 사각형에 첫 국방부의 코드를 변경 :

var colorPentagon = new Kinetic.Rect({ 
     x: 40, 
     y: 50, 
     width: 100, 
     height: 100, 
     fill: { 
     image: images.darthVader, 
     offset: [-220, -70] 
     }, 
     stroke: "black", 
     strokeWidth: 4, 
     draggable: true 
    }); 

그리고, 당신이 원하는 걸 줄 수 있으므로 이유 일했다.