1

複数のレイヤーのドラッグを同期しようとしています。例: http://jsfiddle.net/e8Z3a/

var stage = new Kinetic.Stage({
  container: document.getElementById('canvas'),
  width: 600,
  height: 600
});

var imageLayer = new Kinetic.Layer();
stage.add(imageLayer);

var imageObj = new Image();
imageObj.src = 'http://laughingsquid.com/wp-content/uploads/Tard2.jpg';

imageObj.onload = function () {
  var image = new Kinetic.Image({
      image: imageObj
  });

  imageLayer.add(image);
  imageLayer.setWidth(imageObj.naturalWidth);
  imageLayer.setHeight(imageObj.naturalHeight);

  imageLayer.draw();
};


var drawingLayer = new Kinetic.Layer();
stage.add(drawingLayer);

var mustache = new Kinetic.Polygon({
  points: [
    380, 380,
    410, 350,
    380, 390,
    210, 390,
    180, 350,
    210, 380
  ],
  fill: 'black'
});

drawingLayer.add(mustache);
drawingLayer.draw();

var posX, posY;
imageLayer.on('dragstart', function(event) {
  posX = event.clientX;
  posY = event.clientY;
});

imageLayer.on('dragmove dragend', function(event) {
  drawingLayer.move(event.clientX - posX, event.clientY - posY);
  drawingLayer.draw();

  posX = event.clientX;
  posY = event.clientY;
});

imageLayer.setDraggable(true);

問題は、同期で一部のイベントが欠落していることです。一連の短いドラッグを実行した後、途中でいくつかのイベントが欠落しているかのように、口ひげレイヤーが後ろに残ります。

私の観察は、高速ドラッグが機能するという推測につながります。つまり、マウスを動かさずに画像をつかみ、ランダムな方向にすばやく移動し、マウスを停止して離すと、レイヤーは同期されたままになります。問題は、マウスの移動中につかんだり離したりすることです。

この種の問題をデバッグする方法を教えてもらえますか? イベント関連のものに対するTDDのようなアプローチはありますか? デバッグコードを追加しながら、一連のイベントを記録して再生する方法はありますか? ここでは、従来の段階的なデバッグはまったく役に立ちません...

4

1 に答える 1

3

私はシンプルに行きます、

imageLayer.on('dragmove', function() {
    drawingLayer.setAttrs({x:this.getX(), y:this.getY()});
    drawingLayer.draw();
});

私の例、 http://jsfiddle.net/QTu8K/38 (更新)

于 2013-02-15T17:50:31.940 に答える