CODEWITHSUNDEEP
javascripthtmlimagecanvaskineticjs
JDS
JDS

Reputation: 17018

Creating a repeating image during zooming for kineticJS?

I'm using KineticJS and trying to get proper zoom functionality. I have a layer to which I have appended a background image at the original dimensions I want.

However when I zoom in (via layer.setScale()), my image shrinks when zooming in along with everything else (leaving exposed white areas).

So how can I make my image repeat even when this happens? Here is the code I used to add my image: 

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';

Upvotes: 1

Views: 493

Answers (1)

aka
aka

Reputation: 103

Try to create rectangle and then fill it with the image.

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

This rectangle will repeat your image twice by Ox.

You can try to create long rectangle then when you will scale layer or you can dynamically resize rectangle as scale changes.

Upvotes: 1

Related Questions