在 Konva JS 中拖动后获取形状的 X 和 Y

Question

我在我的项目中使用 Konva JS。我在单击按钮时添加了一个可拖动的形状。单击形状时，我需要获得形状的 X 和 Y 位置。 getX 和 getY 函数返回原始的 X 和 Y。拖动后如何更新 X 和 Y。

示例代码如下。

 var stage = new Konva.Stage({
        container: 'canvas', // id of container <div>
        width: 500,
        height:300
    });
    
 jQuery("#add-shape").click(function(){
 addShape();
 });
 
 var addShape = function(){
 
 console.log("add shape");
 
 var layer = new Konva.Layer();
 var parentContainer = new Konva.Rect({
            x: stage.getWidth() / 2,
            y: stage.getHeight() / 2,
            width: 200,
            height: 60,
            cornerRadius: 10,
            fill: '#ccc'
        });
        
        var smallCircle = new Konva.Circle({
            x: stage.getWidth() / 2 + 200,
            y: stage.getHeight() / 2 + 30,
            radius: 15,
            fill: "#F2784B",
            stroke: "white",
            strokeWidth: 2
        });
        
        smallCircle.on('click', function() {
         console.log(this.getX(),this.getY());
           addArrow(this.getX(),this.getY());
          //get current X and Y here instead of origina X and Y
        });
        layer.add(parentContainer);
        layer.add(smallCircle);
        layer.draggable('true');
        stage.add(layer);
}

var addArrow = function(arrowX,arrowY){
  var connectorLayer = new Konva.Layer();
 var connector = new Konva.Arrow({
            points: [arrowX,arrowY,arrowX+10,arrowY],
            pointerLength: 4,
            pointerWidth: 4,
            fill: 'black',
            stroke: 'black',
            strokeWidth: 2
        });
    connectorLayer.add(connector);
    stage.add(connectorLayer);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<button id="add-shape">
      Add shape
      </button>
<div id="canvas">
        
      </div>

Answer 1

如果您需要获取鼠标位置，您可以使用：

smallCircle.on('click', function() {
     console.log(stage.getPointerPosition());
});

Answer 2

我不知道这是否是您要找的东西，现在为时已晚，但我还是会 post 为未来的开发人员提供它.. 可以说这是我在图层和 bluh bluh 内的水印图像，我想要它的位置 getX() 和 getY()：我这样使用组：

首先添加图像的常规内容：

        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);
        }
    }
    function addAnchor(group, x, y, name) {
        var stage = group.getStage();
        var layer = group.getLayer();

        var anchor = new Konva.Circle({
            x: x,
            y: y,
            stroke: '#666',
            fill: '#ddd',
            strokeWidth: 2,
            radius: 8,
            name: name,
            draggable: true,
            dragOnTop: false
        });

        anchor.on('dragmove', function () {
            update(this);
            layer.draw();
        });
        anchor.on('mousedown touchstart', function () {
            group.setDraggable(false);
            this.moveToTop();
        });
        anchor.on('dragend', function () {
            group.setDraggable(true);
            layer.draw();
        });
        // add hover styling
        anchor.on('mouseover', function () {
            var layer = this.getLayer();
            document.body.style.cursor = 'pointer';
            this.setStrokeWidth(4);
            layer.draw();
        });
        anchor.on('mouseout', function () {
            var layer = this.getLayer();
            document.body.style.cursor = 'default';
            this.setStrokeWidth(2);
            layer.draw();
        });

        group.add(anchor);
    }

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

    var layer = new Konva.Layer();
    stage.add(layer);
    //WaterMark
    var WaterMarkImg = new Konva.Image({
        width: 595,
        height: 842
    });
    var WaterMarkGroup = new Konva.Group({
        x: 0,
        y: 0,
        draggable: true
    });
    layer.add(WaterMarkGroup);
    WaterMarkGroup.add(WaterMarkImg);
    addAnchor(WaterMarkGroup, 0, 0, 'topLeft');
    addAnchor(WaterMarkGroup, 595, 0, 'topRight');
    addAnchor(WaterMarkGroup, 595, 842, 'bottomRight');
    addAnchor(WaterMarkGroup, 0, 842, 'bottomLeft');

    var imageObj1 = new Image();
    imageObj1.onload = function () {
        WaterMarkImg.image(imageObj1);
        layer.draw();
    };
    imageObj1.src = "some image Url";

这就是 getX()：非常简单

    var x = WaterMarkGroup.getX();
        alert(x);

我希望这对任何正在寻找它的人有所帮助。

Answer 3

    box.on('mouseout', function () {
        document.body.style.cursor = 'default';
        console.log(box.attrs.x);
        console.log(box.attrs.y);
    });

Answer 4

这不是问题的确切答案。 point 是可拖动的形状。

point.on('dragmove', (t) => {
    console.log("dragmove", t.target.x(), t.target.y());
});

Answer 5

使用shape.getAttr("x") 和shape.getAttr("y")，下面是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--mobile friendly-->
    <meta name="viewport" content="width=device-width, user-scalable=yes">
</head>
<body>
<div id="c"></div>
<script type="module">
    import "../../node_modules/konva/konva.js"

    var stage = new Konva.Stage({
        container: "#c",
        width: 500,
        height: 500
    })
    var layer = new Konva.Layer()
    stage.add(layer)
    var c = (x, y) => {
        return new Konva.Circle({
            x: x,
            y: y,
            stroke: "lightblue",
            strokeWidth: 2,
            radius: 10,
            draggable: true
        })
    }
    let c1 = c(50, 50)
    layer.add(c1)
    var c2 = c(100, 50)
    layer.add(c2)
    c1.on("dragmove", () => {
        c2.setAttr("y", c1.getAttr("y"))
    })
    layer.draw()
</script>
</body>
</html>

在 Konva JS 中拖动后获取形状的 X 和 Y

Get X and Y of a shape after dragging in Konva JS

javascript

konvajs