在對dynamicJS縮放期間創建重復圖像？

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

這個矩形將通過Ox將您的圖像重復兩次。

您可以嘗試創建長矩形，然后在縮放圖層時使用，也可以在縮放比例變化時動態調整矩形的大小。