如何在dragstart之前缓存整个图层并将其恢复为dragend？ [英] How to cache a whole layer right before dragstart and revert it back on dragend?

问题描述

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

I'm currently trying to speed my web app for mobile devices a little bit up, but now I'm stuck at the most important part - caching. How is it possible to cache a entire layer right before the user starts to drag it and revert it back to usable Kinetic.Nodes when the drag-action has stopped?

At我开始缓存的那一刻

At the moment I start caching on

stage.on（'mousedown touchstart'，function（）{// CACHING}）

但问题在于，用户必须执行第二次 mousedown touchstart 事件才能抓住 缓存的图像，当然，它启动了一个新的缓存。

but the problem here is, that the user has to perform a second mousedown touchstart event to "grab" the cached image, which, of course, starts a new caching.

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

In this case my questions would be:

1. 怎么能我将 mousedown touchstart 事件传递给缓存的图片
   ，以便用户可以通过一次流畅的移动来拖动它？

1. How can I pass the mousedown touchstart event to the cached image, so the user can drag it with one fluent movement?

如何加快缓存速度？ （缓存图像显示需要1-2秒。在每次缓存后，将它缓存在 setInterval 中是有用的，比如4秒，并使用此预先缓存的图像或导致性能过高导致？）

How can I speed up caching? (It takes 1-2 seconds for the cached image to appear. Is it useful to cache it in a setInterval after every, lets say 4 secs, and use this precached image or causes that a too high performance drain?)

我非常感谢任何有关我的问题或其他提示的建议。加速事情的技巧。

I highly appreciate any kind of suggestions regarding my problem or further tips&tricks to speed up things.

推荐答案

基于此声明：

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

我假设 mousedown touchstart 你打电话给 layer.toImage（）或 stage.toImage（）并且你想在那一次点击/点击时拖动新图像。

I'm assuming that on mousedown touchstart you call layer.toImage() or stage.toImage() and you want to drag the new image on that one click/tap.

1. 您可以使用 .startDrag（）函数在新生成的图像上调用拖动事件： Kinetic.Shape #startDrag

1. You can invoke the drag event on the new generated image by using the .startDrag() function: Kinetic.Shape#startDrag

然后你可以在 mouseup touchend 上调用 .stopDrag（）来停止拖动。 Kinetic.Shape＃stopDrag

You can then invoke .stopDrag() on mouseup touchend to stop the drag. 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();
});

注意您需要在拖动缓存图层后更新原始节点。

Note you need to update your original nodes after dragging the cached layer.

另一个注意事项我没有测试过代码，但我相信你可以按照我所做的那样做点什么。

Another Note I haven't tested the code but I believe you could do something along the lines of what I've got up there.

小更新：拖拽时你也应该 hide（）原始图层缓存的图层图像！ :)然后 show（）当你隐藏缓存的图像层时再次显示它。

Small UPDATE: You also should probably hide() the original layer while dragging the cached layer image! :) And then show() it again when you hide the cached image layer.

老实说我我不确定如何加快缓存时间，除非您可以预测用户何时需要点击/点击要移动的舞台。我认为你的建议会比它节省的成本更高。

Honestly I'm not sure how you would speed up that cache time unless you can predict when the user needs to click/tap the stage to move. I think your suggestion would cost more performance than it would save.

我猜测桌面缓存图像比在手机上更快？它可能只是对Mobile Mobile桌面上KineticJS性能的限制......

I'm guessing that the desktop caches the image faster than on your mobile? It might fall into just being a limitation of KineticJS performance on Mobile vs Desktop...

UPDATE

好的，我对＃2 有一个想法，这不是一个修复，但它可能对你有用。

Okay, I have an idea for #2, it's not exactly a fix but it might work better for you.

1. 用 touchstart分隔您的舞台 mousedown 事件事件。 mousedown 将是相同的但是 touchstart 我们希望以不同的方式处理。

1. Separate your stage mousedown event with your touchstart event. mousedown will be the same but touchstart we want to handle differently.

在舞台上 touchstart 我们想像正常一样拖动整个舞台，但同时运行原始 mousedown 到缓存图层的代码。

On stage touchstart we want to drag the entire stage like normal, but meanwhile run the code for the original mousedown to cache the layer.

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

When the cached image finishes loading (takes 1-2 seconds you say), use .stopDrag() on the original stage and hide it. At this moment you want to store the current x and y values of the stage, so that you can still calculate dx,dy. Then immediately call .startDrag() on the new cached image and continue on like we did for mousedown.

如何知道缓存图像何时完成加载？我认为这就是 toImage（） 回调函数适用于。如果没有，希望javascript onload 事件将用于确定图像何时完成生成。

How to know when the cached image finishes loading? I think that's what the toImage() callback function is for. If not, than hopefully a javascript onload event will work to determine when the image finishes generating.

最终结果将会在缓存图像缓存的情况下为舞台上的触摸事件缓慢拖拽。然后我们翻转开关并停止拖动舞台，开始拖动缓存的图像，然后在 touchend 上恢复/更新舞台。

The end result will be that you'll get your slow choppy drag on the stage for touch events UNTIL the image is cached. Then we flip the switch and stop dragging the stage, start dragging the cached image, and then revert/update the stage on touchend.

希望这可以解决您的问题......

Hope that works as a semi-solution to your problem...

另一个更新

好的，这是另一个可能有助于提高性能的想法！

Okay here's another idea that actually might help your performance!

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

If your stage isn't modifying nodes very often, you can pre-cache the stage image so that it's already generated, and .hide() it. Then when you need to drag it, you just need to set the x,y of the cached image to match the stage's current x,y and then .show() the cached image. This will eliminate the time needed to wait/load the cached image when you first start dragging.

如果您确实要添加节点或移动节点或其他任何内容，缓存图像。希望这是可管理的，因为我们不想太频繁缓存图像（消耗性能）。此外，缓存的图像将为您的 stage.drag 事件做好准备。

If you do happen to add a node or move a node or anything, after that cache the image. Hopefully this is manageable as we don't want to cache the image too often (drains performance). Again the cached image will be ready for your stage.drag event beforehand.

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

The goal is to have the stage cached before you do mousedown touchstart and start dragging. Hopefully this helps.

这篇关于如何在dragstart之前缓存整个图层并将其恢复为dragend？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！