Question

我正在努力完成理论上的简单......

我有一个舞台..如果舞台是空的，舞台上的一个点击会在舞台上放置一个带圆圈对象的图层..（我有一个工作代码...）

如果舞台上已经存在图层和对象，我想将它们移动到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();
    }

Answer 1

您可以通过重复使用现有圈子来节省资源并提高性能，而不是销毁和重新创建新圈子。

您的代码中存在范围问题。

由于您在if语句中创建了var circle，因此在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();

KineticJS，MOVE形状和REMOVE形状

1 个答案: