與形狀 X&Y 不同的 Konva 組 X&Y

Question

我正在嘗試編輯發布在此處的另一個示例，但似乎有些不對勁。 我有一個形狀，然后有幾個形狀組合在一起，箭頭指向兩個形狀之間。 當拖動形狀之一時，箭頭位置也應移動。

問題

問題是形狀似乎位於不同的坐標系上，其 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>

Answer 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>

與形狀 X&Y 不同的 Konva 組 X&Y

問題描述

1 個解決方案

解決方案1
1 已采納 2018-09-15 13:01:32

與形狀 X&amp;Y 不同的 Konva 組 X&amp;Y

問題描述

1 個解決方案

解決方案1 1 已采納 2018-09-15 13:01:32

與形狀 X&Y 不同的 Konva 組 X&Y

解決方案1
1 已采納 2018-09-15 13:01:32