在对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将您的图像重复两次。

您可以尝试创建长矩形，然后在缩放图层时使用，也可以在缩放比例变化时动态调整矩形的大小。