8

コンテナを固定点にスケーリングする際に問題が発生しています。
私の場合、ステージをマウス カーソルに合​​わせて拡大縮小 (ズーム) しようとしています。

純粋なキャンバスを使用する方法を次に示します: http://phrogz.net/tmp/canvas_zoom_to_cursor.html ( Zoom Canvas to Mouse Cursorで説明)

KineticJS API を使用しているときに同じロジックを適用する方法がわかりません。

サンプルコード:

var position = this.stage.getUserPosition();
var scale = Math.max(this.stage.getScale().x + (0.05 * (scaleUp ? 1 : -1)), 0);
this.stage.setScale(scale);
// Adjust scale to position...?
this.stage.draw();
4

4 に答える 4

16

@Eric Rowellから提供されたヒントと SO の質問に投稿されたコードを使用して、多くの苦労と検索と試行を行った後、ポイントをズームインします (スケールと変換を使用)。KineticJSを使用します。

これが動作するDEMOです。

コードは次のとおりです。

var ui = {
    stage: null,
    scale: 1,
    zoomFactor: 1.1,
    origin: {
        x: 0,
        y: 0
    },
    zoom: function(event) {
        event.preventDefault();
        var evt = event.originalEvent,
            mx = evt.clientX /* - canvas.offsetLeft */,
            my = evt.clientY /* - canvas.offsetTop */,
            wheel = evt.wheelDelta / 120;
        var zoom = (ui.zoomFactor - (evt.wheelDelta < 0 ? 0.2 : 0));
        var newscale = ui.scale * zoom;
        ui.origin.x = mx / ui.scale + ui.origin.x - mx / newscale;
        ui.origin.y = my / ui.scale + ui.origin.y - my / newscale;

        ui.stage.setOffset(ui.origin.x, ui.origin.y);
        ui.stage.setScale(newscale);
        ui.stage.draw();

        ui.scale *= zoom;
    }
};

$(function() {
    var width = $(document).width() - 2,
        height = $(document).height() - 5;
    var stage = ui.stage = new Kinetic.Stage({
        container: 'container',
        width: width,
        height: height
    });
    var layer = new Kinetic.Layer({
        draggable: true
    });
    var rectX = stage.getWidth() / 2 - 50;
    var rectY = stage.getHeight() / 2 - 25;

    var box = new Kinetic.Circle({
        x: 100,
        y: 100,
        radius: 50,
        fill: '#00D200',
        stroke: 'black',
        strokeWidth: 2,
    });

    // add cursor styling
    box.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
    });
    box.on('mouseout', function() {
        document.body.style.cursor = 'default';
    });

    layer.add(box);
    stage.add(layer);

    $(stage.content).on('mousewheel', ui.zoom);
});​
于 2012-12-01T19:59:24.390 に答える
3

中心点が固定点に配置されるように、ステージをオフセットする必要があります。これは、ステージの中心点がデフォルトでキャンバスの左上隅に設定されているための例です。ステージが幅 600 ピクセル、高さ 400 ピクセルで、ステージを中央からズームしたいとします。これを行う必要があります：

var stage = new Kinetic.Stage({
   container: 'container',
   width: 600,
   height: 400,
   offset: [300, 200]
};
于 2012-09-12T01:01:19.580 に答える
2

上記のデモは、ステージの x 座標と y 座標が 0 の場合にのみ機能します。たとえば、ステージがドラッグ可能な場合、ドラッグ中にこれらの座標が変更されるため、オフセット計算に含める必要があります。これは、キャンバス オフセットからそれらを差し引くことで実現できます。

jsfiddle

zoom: function(event) {
    event.preventDefault();
    var evt = event.originalEvent,
        mx = evt.offsetX - ui.scale.getX(),
        my = evt.offsetY - ui.scale.getY(),
    var zoom = (ui.zoomFactor - (evt.wheelDelta < 0 ? 0.2 : 0));
    var newscale = ui.scale * zoom;

    var origin = ui.box.getPosition();
    origin.x = mx - (mx - origin.x) * zoom;
    origin.y = my - (my - origin.y) * zoom;

    ui.box.setPosition(origin.x, origin.y);
    ui.box.setScale(newscale);
    ui.stage.draw();

    ui.scale *= zoom;
}
于 2013-09-13T21:41:25.563 に答える