0

プロジェクトでKonvaJsを使用しています。にバインドされたドラッグを実装する必要がありますKonva.Layer。私のレイヤーには他にもたくさんの形や画像があります。レイヤーの動きを幅と高さの 50% まで制限する必要があります。このplunkrで行った方法。この問題は、ユーザーがマウス ホイールを使用してレイヤーをズームインまたはズームアウトすると発生します。ズーム後、ドラッグ バウンドの動作が異なる理由がわかりません。私は数学を正しく行うことができないようです。ユーザーがズームを実行していないときにレイヤーの移動が制限される方法など、同じ動作が必要です。これは私がやっていることです:

//... a helper object for zooming
var zoomHelper = {
    stage: null,
    scale: 1,
    zoomFactor: 1.1,
    origin: {
        x: 0,
        y: 0
    },
    zoom: function(event) {
        event.preventDefault();
        var delta;
        if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
            if (event.originalEvent.detail > 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        } else {
            if (event.originalEvent.wheelDelta < 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        }
        var evt = event.originalEvent,
            mx = evt.clientX - zoomHelper.stage.getX(),
            my = evt.clientY - zoomHelper.stage.getY(),
            zoom = (zoomHelper.zoomFactor - delta),
            newscale = zoomHelper.scale * zoom;
        zoomHelper.origin.x = mx / zoomHelper.scale + zoomHelper.origin
            .x - mx / newscale;
        zoomHelper.origin.y = my / zoomHelper.scale + zoomHelper.origin
            .y - my / newscale;
        zoomHelper.stage.setOffset({
            x: zoomHelper.origin.x,
            y: zoomHelper.origin.y
        });
        zoomHelper.stage.setScale({
            x: newscale,
            y: newscale
        });
        zoomHelper.stage.draw();
        zoomHelper.scale *= zoom;
        preCalculation();
    }
};


// Code goes here
var w = window.innerWidth;
var h = window.innerHeight;
var height, minX, minY, maxX, maxY;
var stage = new Konva.Stage({
  container: 'container',
  width: w,
  height: h
});
zoomHelper.stage =stage;
var layer = new Konva.Layer({
  draggable: true,
  dragBoundFunc: function(pos) {
    console.log('called');
    var X = pos.x;
    var Y = pos.y;
    if (X < minX) {
      X = minX;
    }
    if (X > maxX) {
      X = maxX;
    }
    if (Y < minY) {
      Y = minY;
    }
    if (Y > maxY) {
      Y = maxY;
    }
    return ({
      x: X,
      y: Y
    });
  }
});

stage.add(layer);

function preCalculation(){
  // pre-calc some bounds so dragBoundFunc has less calc's to do
height = layer.getHeight();
minX = stage.getX() - layer.getWidth() / 2;
maxX = stage.getX() + stage.getWidth() - layer.getWidth() / 2;
minY = stage.getY() - layer.getHeight() / 2;
maxY = stage.getY() + stage.getHeight() - layer.getHeight() / 2;
console.log(height, minX, minY, maxX, maxY);
}
preCalculation();

var img = new Image();
img.onload = function() {
  var floorImage = new Konva.Image({
    image: img,
    width: w,
    height: h
  });
  layer.add(floorImage);
  layer.draw();
};
img.src = 'https://s.yimg.com/pw/images/coverphoto02_h.jpg.v3';

$(stage.container).on('mousewheel DOMMouseScroll', zoomHelper.zoom);
4

1 に答える 1

3

使用中dragBoundFuncは、レイヤーの絶対位置を返す必要があります。最上位ノード (ステージ) の属性を変更しているため、絶対位置を維持するのが難しい場合があります。したがって、「dragmove」イベント内でバインドされた関数を設定することができます:

layer.on('dragmove', function() {
  var x = Math.max(minX, Math.min(maxX, layer.x()));
  var y = Math.max(minY, Math.min(maxY, layer.y()));
  layer.x(x);
  layer.y(y);
});

http://plnkr.co/edit/31MUmOjXBUVuaHVJsL3c?p=preview

于 2016-01-27T22:51:15.707 に答える