0

ユーザーがマーカーポイントを追加して画像に関するメモを書くことができるツールを設定する簡単な説明があります。

キネティックライブラリを使用してキャンバスオブジェクトを設定しました-これは動的画像を含む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();
      }
4

1 に答える 1

3

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 });
}
于 2013-03-22T15:58:09.107 に答える