Konvajs 如何将中心的缩放效果应用于图像

Question

下面是Konvas.js (v 2.4) 中的基本生长效果，从图像的左上角开始(https://codepen.io/simedia/pen/mzrvJq)

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

// where everything stands in Konvas
var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height
});

var layer = new Konva.Layer();

// image object in Konvas
var kim = new Konva.Image({
    x: 10,
    y: 10,
    scaleX: 0,
    scaleY: 0,
});

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

// tween for growing effect
var tween = new Konva.Tween({
    node: kim,
    duration: 4,
    scaleX: 1,
    scaleY: 1,
});

// DOM image
var img = new Image();
img.onload = function() {
    kim.image(this); // link to Konvas
    tween.play();    // start tween
};

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

我的问题是如何让它从图像的中心增长？谢谢

Answer 1

您的代码工作正常，您只需要将形状进一步移动到层中，这样当它增长时它就不会剪裁，并移动 Konvajs 用作缩放原点的偏移点。我只是将这些行添加到图像的 onload() 事件中。下面的工作片段。

  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 Konvas
var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height
});

var layer = new Konva.Layer();

// image object in Konvas
var kim = new Konva.Image({
    x: 10,
    y: 10,
    scaleX: 0,
    scaleY: 0,
});

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

// tween for growing effect
var tween = new Konva.Tween({
    node: kim,
    duration: 4,
    scaleX: 1,
    scaleY: 1,
});

// DOM image
var img = new Image();
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";

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

Konvajs 如何将中心的缩放效果应用于图像

Konvajs how to apply scale effect from the center to an image

javascript

html5-canvas

effects

konvajs