title: Konva how to transform image
body: <p>I follow the Documentation that Konva have. 
  <a href="https://konvajs.github.io/docs/select_and_transform/Basic_demo.html" rel="nofollow noreferrer">https://konvajs.github.io/docs/select_and_transform/Basic_demo.html</a>
  and 
  <a href="https://konvajs.github.io/docs/sandbox/Image_Resize.html" rel="nofollow noreferrer">https://konvajs.github.io/docs/sandbox/Image_Resize.html</a></p>
  
  <p>But the problem is they only have transform demo for rectangle shape. My plan is to have it on image. But so far I cant get it right. Here's my example code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://rawgit.com/konvajs/konva/master/konva.min.js"&gt;&lt;/script&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Konva Image Resize Demo&lt;/title&gt;
    &lt;style&gt;
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #F0F0F0;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body class="col-md-12"&gt;
    &lt;div id="container" class="col-md-10"&gt;
    &lt;/div&gt;
    &lt;script&gt;
      var width = window.innerWidth;
      var height = window.innerHeight;
  
      function testFunction() {
        addCanvas();
      }
  
      function update(activeAnchor) {
        var group = activeAnchor.getParent();
  
        var topLeft = group.get('.topLeft')[0];
        var topRight = group.get('.topRight')[0];
        var bottomRight = group.get('.bottomRight')[0];
        var bottomLeft = group.get('.bottomLeft')[0];
        var image = group.get('Image')[0];
  
        var anchorX = activeAnchor.getX();
        var anchorY = activeAnchor.getY();
  
        // update anchor positions
        switch (activeAnchor.getName()) {
          case 'topLeft':
            topRight.setY(anchorY);
            bottomLeft.setX(anchorX);
            break;
          case 'topRight':
            topLeft.setY(anchorY);
            bottomRight.setX(anchorX);
            break;
          case 'bottomRight':
            bottomLeft.setY(anchorY);
            topRight.setX(anchorX);
            break;
          case 'bottomLeft':
            bottomRight.setY(anchorY);
            topLeft.setX(anchorX);
            break;
        }
  
        image.position(topLeft.position());
  
        var width = topRight.getX() - topLeft.getX();
        var height = bottomLeft.getY() - topLeft.getY();
        if (width &amp;&amp; height) {
          image.width(width);
          image.height(height);
        }
      }
  
  
  
      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });
  
      var layer = new Konva.Layer();
      stage.add(layer);
  
      // darth vader
      var darthVaderImg = new Konva.Image({
        width: 200,
        height: 137,
        name: 'imgs'
      });
  
      // yoda
      var yodaImg = new Konva.Image({
        width: 93,
        height: 104,
        name: 'imgs'
      });
  
      var darthVaderGroup = new Konva.Group({
        x: 180,
        y: 50,
        draggable: true,
        id: 'test1',
        name: 'Imgs'
      });
  
      var num = 0;
  
      function addCanvas() {
        var test = new Konva.Group({
          x: 200,
          y: 100,
          draggable: true
        });
  
        var testImg = new Konva.Image({
          width: 93,
          height: 104
        });
  
        layer.add(test);
        test.add(testImg);
        console.log('test');
  
        var imageObjs = new Image();
        imageObjs.onload = function() {
          testImg.image(imageObjs);
          layer.draw();
        };
        imageObjs.src = './pic/test2.png';
      }
  
      layer.add(darthVaderGroup);
      darthVaderGroup.add(darthVaderImg);
  
      var yodaGroup = new Konva.Group({
        x: 20,
        y: 110,
        draggable: true,
        id: 'Imgs',
      });
      layer.add(yodaGroup);
      yodaGroup.add(yodaImg);
  
      var imageObj1 = new Image();
  
      imageObj1.onload = function() {
        darthVaderImg.image(imageObj1);
        layer.draw();
      };
      imageObj1.src = './pic/test2.png';
  
      var imageObj2 = new Image();
  
      imageObj2.onload = function() {
        yodaImg.image(imageObj2);
        layer.draw();
      };
      imageObj2.src = './pic/test1.jpg';
  
      stage.on('click', function(e) {
        if (e.target === stage) {
          stage.find('Transformer').destroy();
          layer.draw();
          return;
        }
        // do nothing if clicked NOT on our rectangles
        if (!e.target.hasName('imgs')) {
          return;
        }
        // remove old transformers
        // TODO: we can skip it if current rect is already selected
        stage.find('Transformer').destroy();
  
        // create new transformer
        var tr = new Konva.Transformer();
        layer.add(tr);
        tr.attachTo(e.target);
        layer.draw();
      });
  
      function addTrans(e) {
  
      }
    &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/9afSa.png" rel="nofollow noreferrer">The output</a></p>
  
  <p>Here's the output. Whenever I click the image the transform will be out of place and will on stay in 1 place.</p>