Konva группа X & Y отличается от формы X & Y - PullRequest
Новая
       13

Konva группа X & Y отличается от формы X & Y

0 голосов
/ 15 сентября 2018

Я пытаюсь отредактировать другой пример , который был размещен здесь, но что-то не так.У меня есть фигура, а затем пара фигур, которые сгруппированы вместе со стрелкой, которая указывает между двумя фигурами.При перетаскивании одной из фигур позиция стрелки должна также сдвинуться.

Проблема

Проблема в том, что фигура, похоже, находится в другой системе координат, где ее точка 0,0 находится в верхнем левом углу, тогда как группысистема координат, где ее 0,0 точка находится в центре экрана.Что я делаю не так?

Код 

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.rawgit.com/konvajs/konva/0.13.0/konva.min.js"></script>
  <meta charset="utf-8">
  <title>Konva Circle Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
  var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    });



    var layer = new Konva.Layer();

        var group = new Konva.Group({
        x:120,
        y:120,
      draggable: true,
    });

    var circle = new Konva.Circle({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: 40,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 2,

    });

    var circleA = new Konva.Circle({
      x: stage.getWidth() / 5,
      y: stage.getHeight() / 5,
      radius: 30,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 2,
      draggable: true
    });

    var arrow = new Konva.Arrow({
      points: [circle.getX(), circle.getY(), circleA.getX(), circleA.getY()],
      pointerLength: 10,
      pointerWidth: 10,
      fill: 'black',
      stroke: 'black',
      strokeWidth: 4
    });



        var star = new Konva.Star({
            x: stage.getWidth() / 2,
            y: stage.getHeight() / 2,
            numPoints: 5,
            innerRadius: 30,
            outerRadius: 50,
            fill: '#89b717',
            opacity: 0.8,
            scale: {
                x : 1.4,
                y : 1.4
            },
            rotation: Math.random() * 180,
            shadowColor: 'black',
            shadowBlur: 10,
            shadowOffset: {
                x : 5,
                y : 5
            },
            shadowOpacity: 0.6,

        });

        //layer.add(star);

    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });



    function adjustPoint(e){
      var p=[circle.getX(), circle.getY(), circleA.getX(), circleA.getY()];
      arrow.setPoints(p);
      layer.draw();
      console.log(group.getX(),group.getY());
      console.log(circleA.getX(),circleA.getY());
    }

    //circle.on('dragmove', adjustPoint);

    group.on('dragmove', adjustPoint);

    circleA.on('dragmove', adjustPoint);

    group.add(star,circle);
    //group.add(circle);
    layer.add(group);
    layer.add(circleA);
    // add the shape to the layer
    //layer.add(circle);
    layer.add(arrow);
    //layer.add(star);


    // add the layer to the stage
    stage.add(layer);

  </script>

</body>

</html>

1 Ответ

0 голосов
/ 15 сентября 2018

Когда вы помещаете фигуру в группу, ее функции getX () и getY () возвращают значения относительно начальной точки группы. Вы ошиблись, предполагая, что положение X, Y круга в группе изменится при перетаскивании группы.

В приведенном ниже рабочем коде, основываясь на опубликованном вами коде, я изменил только первую строку функции AdjustPoint (), чтобы положение X, Y круга добавило к нему положение X, Y группы.

Это исправит вашу проблему.

Совет. Когда вы начнете использовать группы, имейте в виду, что их экстент на странице соответствует минимальному прямоугольнику, необходимому для размещения групповых фигур. Если вы хотите конкретно контролировать размер и расположение группы, добавьте к ней форму Rect () определенной ширины и высоты, чтобы дать группе известный размер.

Я также добавил вызов этой функции в конце кода, чтобы стрелка включалась при первом запуске кода. 

var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    });

    var layer = new Konva.Layer();

    var group = new Konva.Group({
        x:120,
        y:10,
      draggable: true,
    });

    var circle = new Konva.Circle({
      x: stage.getWidth() / 2,
      y: 60,
      radius: 40,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 2,

    });

    var circleA = new Konva.Circle({
      x: stage.getWidth() / 5,
      y: stage.getHeight() / 5,
      radius: 30,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 2,
      draggable: true
    });

    var arrow = new Konva.Arrow({
      points: [circle.getX(), circle.getY(), circleA.getX(), circleA.getY()],
      pointerLength: 10,
      pointerWidth: 10,
      fill: 'black',
      stroke: 'black',
      strokeWidth: 4
    });

    var star = new Konva.Star({
        x: stage.getWidth() / 2,
        y: 60,
        numPoints: 5,
        innerRadius: 30,
        outerRadius: 50,
        fill: '#89b717',
        opacity: 0.8,
        scale: {
            x : 1.4,
            y : 1.4
        },
        rotation: Math.random() * 180,
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: {
            x : 5,
            y : 5
        },
        shadowOpacity: 0.6,
    });

    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });



    function adjustPoint(e){
    // changes here
      var p=[ group.getX() + circle.getX(), group.getY()  + circle.getY(), circleA.getX(),  circleA.getY()];
    // changes here

      arrow.setPoints(p);
      layer.draw();
      stage.draw();
    //  console.log('group = ' + group.getX() + ', ' + group.getY());
    //  console.log('red circle = ' + circleA.getX() + ', ' + circleA.getY());
    }

    //circle.on('dragmove', adjustPoint);

    group.on('dragmove', adjustPoint);

    circleA.on('dragmove', adjustPoint);

    group.add(star,circle);
    //group.add(circle);
    layer.add(group);

    layer.add(circleA);
    // add the shape to the layer
    //layer.add(circle);
    layer.add(arrow);
    //layer.add(star);


    // add the layer to the stage
    stage.add(layer);

    // changes here
    adjustPoint();
body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
<script src="https://cdn.rawgit.com/konvajs/konva/0.13.0/konva.min.js"></script>

<body>
  <div id="container"></div>

</body>
...