在为动力学JS缩放期间创建重复图像？答案

【问题标题】：Creating a repeating image during zooming for kineticJS?在为动力学JS缩放期间创建重复图像？
【发布时间】：2012-06-13 12:13:46
【问题描述】：

我正在使用 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';

【问题讨论】：

标签： javascript html image canvas kineticjs

【解决方案1】：

尝试创建矩形，然后用图像填充它。

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

此矩形将由 Ox 重复您的图像两次。

您可以尝试创建长矩形，然后当您缩放图层时，或者您可以随着比例的变化动态调整矩形的大小。

【讨论】：