1

私は理論的に単純なことを達成しようとしています..

私はステージを持っています..ステージが空の場合、ステージをクリックすると、円オブジェクトを含むレイヤーがステージに配置されます..(私はこれのための作業コードを持っています..)

レイヤーとオブジェクトがステージ上に既に存在する場合、それらを x と y の位置に移動したいと思います..

オブジェクトを破棄して新しいオブジェクトを作成する方が良いのか、X と Y を設定して再描画できるのかは不明です...

私は両方を試しましたが、私は何かを正しく得ていません..

// I have a working code here that detects mouseX and mouseY position

// Detecting if object exists ( works fine )
    var theSpot = stage.find('.click_spot');

    if ( theSpot[0] === undefined ) {           
        //alert('Object not found, create a new one...');

        var layer = new Kinetic.Layer();
        var circle = new Kinetic.Circle({
          x: mouseX,
          y: mouseY,
          radius: 30,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 1,
          draggable: true,
          name:'click_spot'
        });

        layer.add(circle);
        stage.add(layer);

    } else {

// Move the object OR remove and draw a new one
// when I try to remove,, circle.remove(); does not remove it

        //alert('Object found, move it to new x, y location');

        circle.setX(mouseX); // I tried inserting values directly as well
        circle.setY(mouseY); // circle.setX(15) and circle.setX(15) but no joy...
        layer.draw();
    }
4

1 に答える 1

2

新しいサークルを破棄して再作成するのではなく、既存のサークルを再利用することで、リソースを節約し、パフォーマンスを向上させることができます。

コードにスコープの問題があります。

var circleif ステートメント内で作成しているため、そのサークル変数は if が完了すると失われます。

円を「覚える」方法はいくつかあります。

最も簡単な方法は、単純var circleにグローバルに宣言することです (if ステートメントの外で前に)。

また、円に ID を与え、後でレイヤーにその ID を持つオブジェクトをフェッチするように依頼することもできます。

    var circle = new Kinetic.Circle({
      id="myCircle",
      x: mouseX,
      y: mouseY,
      radius: 30,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 1,
      draggable: true,
      name:'click_spot'
    });

    // get the object by its id

    var myCircle = layer.get("#myCircle");

    // then you can use this reference to make your changes

    myCircle.setX(mouseX);
    myCircle.setY(mouseY);
    layer.draw();
于 2013-10-28T22:08:52.453 に答える