Konvajs How To Apply Scale Effect From The Center To An Image

Below is a basic growing effect in Konvas.js (v 2.4), starting from the upper left corner of the image (https://codepen.io/simedia/pen/mzrvJq) var width = window.innerWidth; var he

Solution 1:

Your code works fine, you just need to move the shape further into the layer so when it grows it does not clip, and move the offset point which is what Konvajs uses as the origin for scaling. I simply added these lines to the onload() event for the image. Working snippet below.

  kim.x(kim.width()/2);  // move shape top-left so it can grow and not get cut off
  kim.y(kim.height()/2);   

  kim.offsetX(kim.width()/2);  // Move the offset to the centre of the shape
  kim.offsetY(kim.height()/2);

var width = window.innerWidth;
var height = window.innerHeight;

// where everything stands in Konvasvar stage = newKonva.Stage({
    container: 'container',
    width: width,
    height: height
});

var layer = newKonva.Layer();

// image object in Konvasvar kim = newKonva.Image({
    x: 10,
    y: 10,
    scaleX: 0,
    scaleY: 0,
});

layer.add(kim);
stage.add(layer);

// tween for growing effectvar tween = newKonva.Tween({
    node: kim,
    duration: 4,
    scaleX: 1,
    scaleY: 1,
});

// DOM imagevar img = newImage();
img.onload = function() {
    kim.image(this); // link to Konvas
    
    kim.x(kim.width()/2);  // move the image top-left into the layer so it can grow and not get cut off
    kim.y(kim.height()/2);    

    kim.offsetX(kim.width()/2);  // Move the offset to the centre of the shape
    kim.offsetY(kim.height()/2);
    
    tween.play();    // start tween
};

// the result appears when image is loaded !
img.src="https://dummyimage.com/200x200/224488/fff.png&text=Salut+le+monde";

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><scriptsrc="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script><divid="container"></div>