html - 如何在 dragstart 之前缓存整个图层并将其还原回 dragend？

Question

我目前正在尝试加快我的移动设备网络应用程序的速度，但现在我陷入了最重要的部分——缓存。如何在用户开始拖动之前缓存整个图层并在拖动 Action 停止时将其恢复为可用的 Kinetic.Nodes？

目前我开始缓存
stage.on('mousedown touchstart', function(){ // CACHING})
但这里的问题是，用户必须执行第二个 mousedown touchstart 事件来“抓取”缓存的图像，这当然会启动新的缓存。

在这种情况下，我的问题是:

如何将 mousedown touchstart 事件传递给缓存的图像，
所以用户可以用一个流畅的 Action 拖动它？

如何加快缓存速度？ (缓存的图像需要 1-2 秒才能出现。每隔 4 秒将其缓存在 setInterval 中是否有用，并使用此预缓存的图像或导致性能消耗过高？)

我非常感谢任何关于我的问题的建议或进一步的提示和技巧以加快速度。

Answer 1

基于此声明:

stage.on('mousedown touchstart', function(){ // CACHING})

我假设在 mousedown touchstart您调用 layer.toImage()或 stage.toImage()并且您想在单击/点击时拖动新图像。

您可以使用 .startDrag() 在新生成的图像上调用拖动事件。功能:Kinetic.Shape#startDrag

然后您可以调用 .stopDrag()在 mouseup touchend停止拖动。 Kinetic.Shape#stopDrag

就像是:

var image, ox, oy;

stage.on('mousedown touchstart', function(){
  // CACHING
  stage.toImage({
    width: stage.getWidth(),
    height: stage.getHeight(),
    callback: function(img) {
      var image = new Kinetic.Image({
        image: img,
        draggable: true
      });
      ox = image.getX();
      oy = image.getY();
      image.startDrag();
    }            
  });
});

stage.on('mouseup touchend', function(){
  image.stopDrag();

  //Calculate dx, dy to update nodes.
  var newX = image.getX();
  var newY = image.getY();
  var dx = newX-ox;
  var dy = newY-oy;

  var children = layer.getChildren();
  for (var i=0; i<children.length; i++) {
    children.setX(children.getX()+dx);
    children.setY(children.getY()+dy);
  }

  image.hide(); //or remove() or destroy()
  layer.draw();
});

备注 拖动缓存层后，您需要更新原始节点。

另注我还没有测试过代码，但我相信你可以按照我上面的方法做一些事情。

小更新 : 你也应该hide()拖动缓存图层图像时的原始图层! :) 然后 show()当您隐藏缓存的图像层时再次使用它。

老实说，我不确定您将如何加快缓存时间，除非您可以预测用户何时需要单击/点击舞台才能移动。我认为您的建议会花费比节省更多的性能。

我猜桌面缓存图像的速度比你的手机快？它可能只是 KineticJS 在移动和桌面上的性能限制...

更新

好的，我对 有一个想法#2 ，它不完全是一个修复，但它可能对你更有效。

分开你的舞台mousedown与您的 touchstart 一起举办事件事件。 mousedown将是相同的，但 touchstart我们想以不同的方式处理。

舞台上touchstart我们要 拖整个舞台正常，但是同时运行原始 mousedown 的代码至缓存 层。

当缓存图片 完成加载(你说需要 1-2 秒)，使用 .stopDrag()原创 舞台并隐藏它。此时您要存储当前 x 和 是阶段的值，以便您仍然可以计算 dx,dy .然后立即调用.startDrag()在新的缓存图像上继续，就像我们对 mousedown 所做的那样.

如何知道缓存图像何时完成加载？ 我认为这就是 toImage() callback function是为了。如果没有，那么希望有一个 javascript onload事件将确定图像何时完成生成。

最终结果将是您将在舞台上缓慢地拖拽 触摸 事件直到图像被缓存。然后我们拨动开关并停止拖动舞台，开始拖动缓存的图像，然后在 touchend 上恢复/更新舞台.

希望这可以作为您问题的半解决方案...

另一个更新

好的，这是另一个实际上可能有助于您的表现的想法!

如果您的阶段不经常修改节点，您可以 预缓存 舞台图像，以便它已经生成， .hide()它。那么当你需要拖动它时，你只需要设置 x,y 缓存图像以匹配舞台的当前 x,y 然后 .show()缓存的图像。这将消除您第一次开始拖动时等待/加载缓存图像所需的时间。

如果您碰巧添加了一个节点或移动了一个节点或任何东西，那么在缓存图像之后。希望这是可控的，因为我们不想 缓存 图像过于频繁(消耗性能)。缓存的图像将再次为您的 stage.drag 准备好。事前。

目标是在执行 mousedown touchstart 之前缓存阶段。并开始拖动。希望这会有所帮助。