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 circle在 if 语句中创建的，因此在 if 完成后，该 circle 变量会丢失。

你有几种“记住”圆圈的方法。

最简单的方法是简单地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 回答