Konva JS. Change Image position, rotate

Question

I'm adding an image.

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

How to get and change the position and angle of this picture? How to change these settings later. By events. For example, clicking on the buttons. Method this.setX(),this.rotare(), this.x= not work for image obj.

Answer 1

Solution. Need use anyimage obj. Not cirle.

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

Answer 2

The position and size are as you have set in the new Konva.Image() call. Rotation is demonstrated in this example and below in the working snippet. Basically there is a rotation point set by the 'offset' property of the shape. By default this is at the top left of the image rectangle. You apply the shape's rotate() function setting the single parameter to the amount of degrees to rotate by, with rotation happening around the shapes offset(x,y) position.

See snippet below for a playpen.

Note: I have raised a question with the author over the apparent unexpected behaviour that means when you change the offset position, intending to change the center of rotation, the shape is physically moved.

// Add a stage for the shapes
var stage = new Konva.Stage({
      container: 'container',
      width: 1600,
      height: 400
    });

// add a layer
var layer = new Konva.Layer();
stage.add(layer);

// add a rect to demonstrate rotation
var r = new Konva.Rect({
        x: 60,
        y: 30,
        width: 50,
        height: 50,
        fill: 'red',
        opacity: 0.5,
        strokeWidth: 0})
layer.add(r);  

// add a spot to mark the rotate pt
var c = new Konva.Circle({
      x: 45,
      y: 45,
      radius: 4,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4})
layer.add(c);  
stage.draw();

// event for plus & minus buttons
$('#plus').on('click', function(evt){
   evt.preventDefault()
   r.rotate(10)
   stage.draw();
})

$('#minus').on('click', function(evt){
   evt.preventDefault()
   r.rotate(-10)
   stage.draw();
})

// function to set rotate point and shape
function setPos(pos){

   r.setAttr('offsetX', pos.x);
   r.setAttr('offsetY', pos.y);
   c.position({
      x: r.x(),
      y: r.y()
    });
    c.moveToTop();
    sayPos();
      stage.draw();
}      


$('#ctr').on('click', function(evt){
   evt.preventDefault()
   setPos({x:25, y:25});
})

$('#topLeft').on('click', function(evt){
   evt.preventDefault()
   setPos({x:0, y:0});
})

$('#topRight').on('click', function(evt){
   evt.preventDefault()
   setPos({x:50, y:0});
})

$('#botCtr').on('click', function(evt){
   evt.preventDefault()
   setPos({x:25, y:50});
})


function sayPos(){
  $('#info').html('Rotate pt=' + r.offsetX() + ", " + r.offsetY());
}

// call the setPos() and sayPos() funcs on load.
setPos({x:0, y:0});
sayPos();

p
{
  padding: 4px;
  
}
#container
{
  background-color: silver;
  overflow: hidden; 
}
div
{
padding: 4px;
}

<div id='info1'></div>
<div id='info2'></div>

<div>Click row 1 buttons to set rotate pt and row 2 buttons to rotate by 10 degrees</div>
<div>
  <button id='topLeft'>Move rotate pt to top left</button>
  <button id='ctr'>Move rotate pt to center</button>
  <button id='topRight'>Move rotate pt to top right</button>
  <button id='botCtr'>Move rotate pt to bottom center</button>
</div>
<div>
  <button id='plus'>+10</button>
  <button id='minus'>-10</button>
  <span id='info'>Info:</span>
</div>
  <div id="container"></div>
            
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
    <script type="text/javascript" src="test.js"></script>