확대/축소하는 동안 반복되는 이미지 만들기 kineticJS?

Question

KineticJS를 사용하고 있으며 적절한 줌 기능을 사용하려고합니다. 내가 원하는 원래 치수로 배경 이미지를 추가 한 레이어가 있습니다.

그러나 (layer.setScale()을 통해) 확대 할 때 다른 모든 것과 함께 확대 할 때 내 이미지가 축소됩니다 (노출 된 흰색 영역 남김).

그렇다면 어떻게해도 이미지를 반복 할 수 있습니까? 사각형을 만든 다음 이미지를 채우기 위해

var imageObj = new Image(); 
imageObj.onload = function() { 
var image = new Kinetic.Image({ 
    image: imageObj, 
    width: width, 
    height: height 

}); 
// add the shape to the layer 
main_layer.add(image); 

// add the layer to the stage 
stage.add(main_layer); 
}; 
imageObj.src = 'images/blueprint_background.png'; 

Answer 1

시도 : 여기 내 이미지를 추가하는 데 사용되는 코드입니다.

var rect = new Kinetic.Rect({ 
    x: 0, 
    y: 0, 
    width: 2 * imageObj.width, 
    height: imageObj.height, 
    fillPatternImage: imageObj, 
    fillPatternRepeat: 'repeat-x' 
}); 

이 사각형은 황소에 의해 두 번 이미지를 반복합니다.

길이가 긴 직사각형을 만든 다음 레이어를 조정할 때 또는 크기가 변경 될 때 직사각형의 크기를 동적으로 조정할 수 있습니다.