Вопрос по фреймворку Konva JS. Как получать и изменять свойства объекта image (координаты, угол наклона)?

Question

[AbramovKS]

Добрый день.
Вопрос по фреймворку Konva JS.

Я добавляю имадж

circle = new Image ();
circle.src = '/img/logo.png';
circle.onload = function () {
     anyimage = new Konva.Image ({
          x: 150,
          y: 150,
          image: circle,
          width: 106,
          height: 118
     });
     layer.add (anyimage);
     stage.add (layer);
};

Как получать, изменять координаты и угол наклона картинки по событиям. Например по клику на кнопку.

для обычных форм есть методы типа shape.getX(). Но для image они не работают.

Лайв
https://codepen.io/abramovks/pen/WXWRRq

Comments

[AbramovKS]

Вот демо
https://codepen.io/abramovks/pen/WXWRRq

Answer 1

[AbramovKS]

Нужно было использовать anyimage объект. Как же просто.

function rotate_image(){
  anyimage.rotate(45);
              stage.draw();
              console.log('loaded');
}

function setPos_image(){
 //code for change x,y coord of 'circle' obj
  anyimage.setX(45);
              stage.draw();
              console.log('loaded');
}

Answer 2

[Dark Hole]

RTFM
Угол - rotation, rotate
Координаты - методы с издевательски очевидными названиями x, y

Comments

[AbramovKS]

Вы это попробовали?
Издевательски очевидные х и у, а также очевидный rotate не работает также как для полигонов и прочих фигур. Я же сказал, имейдж объект не имеет функций circle.getX(), circle.rotation. Изменение circle.x y также ни к чему не приводит. Этот объект является HTMLObj. Однако никакие хтмлные методы на него также не влияют. В том числе попытка поменять его положение через css JSом.

Вот код JS

var stage = new Konva.Stage({
                  container: 'container',  
                  width: 500,
                  height: 500
            });

            var layer = new Konva.Layer();

           circle = new Image();
           circle.src = '/img/orig.gif'; 
            circle.onload = function() {
                anyimage = new Konva.Image({
                x: 150,
                y: 150,
                image: circle,
                width: 106,
                height: 118
              });
              layer.add(anyimage);
              stage.add(layer);
             };

Вот это в html

<div id="container"></div>
<script type="text/javascript" src="js/konva.min.js"></script>