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 で 2 回繰り返します。

レイヤーをスケーリングするときに長い長方形を作成するか、スケールの変更に応じて長方形のサイズを動的に変更できます。

于 2013-01-30T13:39:25.573 に答える