Question

我正在使用KineticJs构建一个游戏，并且它使用拖放来移动屏幕上的元素并且我遇到了很大的性能问题，因为如果拖动的元素与可能的捕捉位置碰撞然后拖动，我会检查dragmove事件元素变得迟钝。我正在使用内置函数的kineticJs，但我感觉它们没有很好地优化。它实际上在chrome中工作得相当不错（你可以看到滞后），但它在Firefox中并不好用。关于如何优化我的代码的任何想法

element.on('dragmove',function(evt){
    var position = stage.getUserPosition(evt);
    var snap = snapGroup.getIntersections(position.x,position.y);
    if(snap.length > 0) snapElement(snap[0]);
}

Answer 1

找到瓶颈。我猜这就是这条线：

var snap = snapGroup.getIntersections(position.x,position.y);

如果是这样，请设置一个计数器，并且只更新更新的每几个滴答。确保在dragend上进行最后更新，以便最终得到正确的最终位置。

修改

也许这样的事情可能有用：

var dragUpdateCount = 0; var dragUpdateRate = 5; element.on('dragmove',function(evt){ dragUpdateCount++; if (dragUpdateCount >= dragUpdateRate) { var position = stage.getUserPosition(evt); var snap = snapGroup.getIntersections(position.x,position.y); if (snap.length > 0) { snapElement(snap[0]); } dragUpdateCount = 0; } }

Answer 2

正如@Aram指出的那样，瓶颈在于.getIntersections（）函数。

.getIntersections（）函数是内存/处理密集型的，因此您需要的是初步检查，这会将处理限制在某些位置。我有一个类似的问题我做了一个小游戏和.getIntersections（）的碰撞检测正在杀死我的速度，我也试过.intersects（）但它有类似的结果。我做的是这样的事情:(不知道旋转是否正常）

 element.on('dragmove',function(){ //dont think you need the 'evt' passed here
     var position = stage.getUserPosition();
     var snapChildren = snapGroup.getChildren();  //get each snapGroup child
     for(var i=0; i<snapChildren.length; i++){
          if(position.x > snapChild[i].getX() && position.x < snapChild[i].getX()+snapChild[i].getWidth()){ // check horizontal bounding rectangle
                if(position.y > snapChild[i].getY() && position.y < snapChild[i].getY()+snapChild[i].getHeight(){ // check vertical bounding rectangle
                    var snap = snapGroup.getIntersections(position.x,position.y);
                    if(snap.length > 0) snapElement(snap[0]);
                }
           }
     }
 }

所以这是一种'边界矩形'碰撞检测方法，应该尽量减少你必须要做的处理。

即使你得到所有的孩子并在for循环中处理它们，它仍然比.getIntersections（）

更快

碰撞检测性能差

2 个答案: