Kinetic JQuery 对象 - 获取画布中每个元素的 X/Y

Question

我有设置一个工具的简介，用户可以添加标记点来写关于图像的注释。

我已经使用 Kinetic 库设置了一个画布对象——它被放置在一个包含动态图像的 div 上——用户可以将标记拖到适当的位置。当他们完成添加标记后，我需要扫描画布并将每个元素的 x 和 y 位置写入数组或多个变量 - 这将用于创建笔记 PDF 服务器端。

我已经创建了画布对象并且拖动功能工作正常 - 但我不知道如何在完成时扫描画布并循环遍历每个“latestElement”元素以返回 x/y 值 - 有人有吗有什么想法吗？

我的代码如下 -

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 455,
    height: 500
  });
  var layer = new Kinetic.Layer();
  var rectX = stage.getWidth() / 2 - 50;
  var rectY = stage.getHeight() / 2 - 25;

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

  // add cursor styling

  box.on('dragend', function() {
    var curposX = box.getAbsolutePosition().x;
    var curposY = box.getAbsolutePosition().y;

    alert(curposX  );
    alert(curposY)
  })

  box.on('mouseover', function() {
    document.body.style.cursor = 'pointer';
  });
  box.on('mouseout', function() {
    document.body.style.cursor = 'default';
  });
var curpos = box.getAbsolutePosition().x;
alert(curpos);

  layer.add(box);
  stage.add(layer);

 var countCirc;


function addBox(){
    alert('here')


    var latestElement = new Kinetic.Circle({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        radius: 10,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        draggable:true,


    })
    latestElement.on('dragend', function() {
    var curposX = (this).getAbsolutePosition().x;
    var curposY = (this).getAbsolutePosition().y;

    alert(curposX  );
    alert(curposY)
  })



    layer.add(latestElement);
    latestElement.simulate('mousedown');
    layer.draw();
      }

Answer 1

您可以使用 Layer.getChildren() 来获取该层上的所有对象。

var children = layer.getChildren();

这将为您提供所有圈子的数组。

然后遍历每个子圈和 .getX() / .getY() 并推送到您的数组

Var myPoints=[];
For(var i=0; i<children.length; i++){
    var X=children[i].getX();
    var Y=children[i].getY();
    myPoints.push({ x:X, y:Y });
}