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重复两次图像。

您可以尝试创建长矩形然后缩放图层，或者可以在比例更改时动态调整矩形大小。

在缩放kineticJS期间创建重复图像？

1 个答案: