Konva如何转换图像答案

【问题标题】：Konva how to transform imageKonva如何转换图像
【发布时间】：2018-02-01 22:41:31
【问题描述】：

我遵循 Konva 拥有的文档。 https://konvajs.github.io/docs/select_and_transform/Basic_demo.html 和 https://konvajs.github.io/docs/sandbox/Image_Resize.html

但问题是他们只有矩形的变换演示。我的计划是把它放在图像上。但到目前为止，我无法做到这一点。这是我的示例代码。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://rawgit.com/konvajs/konva/master/konva.min.js"></script>
  <meta charset="utf-8">
  <title>Konva Image Resize Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
</head>

<body class="col-md-12">
  <div id="container" class="col-md-10">
  </div>
  <script>
    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 && 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) {

    }
  </script>

</body>

</html>

The output

这是输出。每当我单击图像时，变换就会不合适，并且会停留在一个位置。

【问题讨论】：

那么什么不适合你？图像的工作方式几乎与矩形形状相同。
您能解释一下问题所在吗？正如@lavrton 所说，图像只是一个包含一些像素的矩形。所有形状大小调整、移动和转换都应该没有问题。您需要进一步解释您的问题。
@lavrton 我在图片链接下方添加了我的输出图片和描述。谢谢
@VanquiishedWombat 添加了图片。谢谢
@Daniel_C Transformer 课程仍处于实验阶段，并且存在一些错误。尝试在没有组的情况下使用它。

标签： javascript konvajs

【解决方案1】：

我终于明白了。原来我把可拖动的东西放在了错误的地方。我将可拖动对象放入 Konva.Image 中，而不是在组中。

谢谢

【讨论】：