javascript - 康瓦 JS。更改图像位置，旋转

Question

我正在添加图片。

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);
};

如何获取和改变这张图片的位置和 Angular ？以后如何更改这些设置。通过事件。例如，单击按钮。方法 this.setX(),this.rotare(), this.x= 不适用于图像对象。

Answer 1

解决方案。需要使用任何图像对象。不是圆。

<script src="https://cdn.rawgit.com/konvajs/konva/1.3.0/konva.js"></script>
<button onclick='rotate_image()'>rotate_image</button> 
<button onclick='setPos_image()'>rotsetPos_imageate_image</button>
<div id="container"></div>

var stage = new Konva.Stage({
                  container: 'container',  // индификатор div контейнера
                  width: 500,
                  height: 500
            });

            var layer = new Konva.Layer();

           circle = new Image();
           circle.src = 'https://im0-tub-ru.yandex.net/i?id=caa07f7c7eb5b2788719c85cd6028d23&n=13'; 
            circle.onload = function() {
                anyimage = new Konva.Image({
                x: 10,
                y: 10,
                image: circle,
                width: 106,
                height: 118
              });

              layer.add(anyimage);
              stage.add(layer);
             };

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');
}