1

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

1 回答 1

1

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

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

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

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

于 2013-01-30T13:39:25.573 回答