Konvajs, как применить эффект масштаба от центра к изображению - PullRequest
Новая
       44

Konvajs, как применить эффект масштаба от центра к изображению

0 голосов
/ 07 октября 2018

Ниже приведен базовый растущий эффект в 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";

. Мой вопрос заключается в том, как сделать его расти от центра изображения? Спасибо

1 Ответ

0 голосов
/ 07 октября 2018

Ваш код работает нормально, вам просто нужно переместить фигуру дальше в слой, чтобы при ее росте она не обрезалась, и перемещать точку смещения, которую 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>
...