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

Question

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

1

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

Эта проблема

Проблема в том, что форма, похоже, находится на другой системе координат, где ее 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>

laxer 15 сен. 2018, в 05:54

Источник

Теги:

javascript

html5

canvas

html5-canvas

konvajs

1 ответ

Ещё вопросы

Vanquished Wombat · Accepted Answer · 2018-09-15T11-40-00.000Z

Когда вы добавляете фигуру в группу, функции 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>