動態JQuery對象 - 獲取畫布中每個元素的X/Y

Question

我有一個簡單的設置工具，用戶可以添加標記點來撰寫關於圖像的註釋。

我已經使用Kinetic庫設置畫布對象 - 這是放置在包含動態圖像的div上 - 用戶可以將標記拖動到位置。當他們完成添加標記時，我需要掃描畫布並將每個元素的x和y位置寫入一個數組或多個變量中 - 這將用於創建便箋PDF服務器端。

我已經得到儘可能創建畫布對象和拖動功能工作正常 - 但我不知道如何掃描畫布完成和循環通過每個'latestElement'element返回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 }); 
}