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

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();
});

注意拖动缓存层后需要更新原始节点.