Question

我遵循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

这是输出。每当我点击图像时，变换都将不合适，并将保持在一个位置。

Answer 1

我终于明白了。结果我把拖车放在错误的地方。我将draggable放入Konva.Image而不是组中。

谢谢

Konva如何改造图像

1 个答案: