Konvajs如何将缩放效果从中心应用到图像 [英] Konvajs how to apply scale effect from the center to an image

问题描述

以下是Konvas.js（v 2.4）中的基本增长效果，从图像的左上角开始（ https://codepen.io/simedia/pen/mzrvJq ）

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

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

My question is how to make it grow from the center of the image ? Thanks

推荐答案

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

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 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如何将缩放效果从中心应用到图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！