Question

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

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

我已经创建了canvas对象并且拖动功能正常工作 - 但我不知道如何在完成时扫描画布并循环遍历每个'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 });
}

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

1 个答案: