Konva组X＆Y与X＆Y形状不同

问题描述 投票：1回答：1

我正在尝试编辑张贴在这里的another example，但有些事情似乎并不正确。我有一个形状，然后有几个形状组合在一起，箭头指向两个形状之间。当其中一个形状被拖动时，箭头位置也应该移动。

问题

问题是形状似乎在不同的坐标系上，其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>
javascript html5 canvas html5-canvas konvajs
1个回答
1
投票

当你在一个组上放置一个形状时，它的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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.