在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' 
}); 

這個矩形會重複你的圖像兩次由牛。

你可以嘗試創建長的長方形，然後當你將擴展層，也可以動態調整大小的矩形作爲尺度的變化。