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

但这里的问题是，用户必须执行第二个 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.

我猜桌面缓存图像的速度比手机快?这可能只是 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...

更新

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

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

1. 将舞台 mousedown 事件与 touchstart 事件分开.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.