9

KineticJS を使用してキャンバスをズームおよびパンする方法はありますか? このライブラリkineticjs-viewportを見つけましたが、このライブラリは非常に多くの余分なライブラリを使用しているようで、仕事を完了するために絶対に必要なものがわからないため、これを達成する他の方法があるかどうか疑問に思っています。

あるいは、関心領域の周りに長方形を描き、その特定の領域にズームするというアイデアにもオープンです。これを達成する方法についてのアイデアはありますか？JSFiddle の例は素晴らしいでしょう!

4

7 に答える 7

25

レイヤーに追加するだけ.setDraggable("draggable")で、カーソルの下にオブジェクトがある限りドラッグできます。大きな透明rectを追加して、すべてをドラッグ可能にすることができます。ズームは、レイヤーのスケールを設定することで実現できます。この例では、マウスホイールで制御していますが、ズームしたい量を渡すだけの関数です (ズームインする場合は正、ズームアウトする場合は負)。コードは次のとおりです。

var stage = new Kinetic.Stage({
    container: "canvas",
    width: 500,
    height: 500
});

var draggableLayer = new Kinetic.Layer();
draggableLayer.setDraggable("draggable");

//a large transparent background to make everything draggable
var background = new Kinetic.Rect({
    x: -1000,
    y: -1000,
    width: 2000,
    height: 2000,
    fill: "#000000",
    opacity: 0
});

draggableLayer.add(background);


//don't mind this, just to create fake elements
var addCircle = function(x, y, r){
  draggableLayer.add(new Kinetic.Circle({
        x: x*700,
        y: y*700,
        radius: r*20,
        fill: "rgb("+ parseInt(255*r) +",0,0)"
    })
  );
}

var circles = 300
while (circles) {
  addCircle(Math.random(),Math.random(), Math.random())
  circles--;
}

var zoom = function(e) {
  var zoomAmount = e.wheelDeltaY*0.001;
  draggableLayer.setScale(draggableLayer.getScale().x+zoomAmount)
  draggableLayer.draw();
}

document.addEventListener("mousewheel", zoom, false)

stage.add(draggableLayer)

http://jsfiddle.net/zAUYd/

于 2012-10-06T10:19:57.463 に答える
4

これは、レイヤーのズームとパンの非常に迅速で簡単な実装です。パンとズームを同時に行う必要のあるレイヤーがさらにある場合は、それらをグループ化してから、そのグループにon（ "click"）を適用して同じ効果を得るようにすることをお勧めします。

http://jsfiddle.net/renyn/56/

はっきりしない場合は、左上の水色の四角をクリックしてズームインおよびズームアウトし、左下のピンクの四角をクリックして左右にパンします。

編集：注として、これはもちろん「マウスダウン」または他のイベントをサポートするように変更できます。また、変換をスムーズにするためにKinetic.Animationsとして実装できなかった理由がわかりません。

于 2012-10-04T12:38:21.467 に答える
3

これは私がこれまで行ってきたことです..それがあなたを助けることを願っています.

http://jsfiddle.net/v1r00z/ZJE7w/

于 2012-10-02T02:19:38.307 に答える
2

これらの回答は、KineticJS 5.1.0 では機能しないようです。これらは、主にスケール関数の署名の変更には機能しません。

 stage.setScale(newscale); --> stage.setScale({x:newscale,y:newscale});

ただし、次のソリューションは KineticJS 5.1.0 で機能するようです。

JSFiddle: http://jsfiddle.net/rpaul/ckwu7u86/3/

于 2014-11-12T05:53:44.933 に答える
2

今日キネティックで働いていたので、あなたが興味を持っているかもしれないSOの質問を見つけました.

コメントの方が良いことはわかっていますが、そのための十分な担当者がいません。とにかく、それが役立つことを願っています.

于 2012-10-01T20:54:10.837 に答える
1

残念ながら、状態またはレイヤーをドラッグ可能に設定すると、オブジェクトをドラッグ可能にできなくなります。Duopixel のズーム ソリューションは優れていますが、レイヤー レベルではなく、ステージ レベルで設定したいと思います。

彼女は私の解決策です

var stage = new Kinetic.Stage({
    container : 'container',
    width: $("#container").width(),
    height: $("#container").height(),
});
var layer = new Kinetic.Layer();

//layer.setDraggable("draggable");
var center = { x:stage.getWidth() / 2, y: stage.getHeight() / 2};

var circle = new Kinetic.Circle({
    x: center.x-100,
    y: center.y,
    radius: 50,
    fill: 'green',
    draggable: true
});
layer.add(circle);
layer.add(circle.clone({x: center.x+100}));

// zoom by scrollong
document.getElementById("container").addEventListener("mousewheel", function(e) {
  var zoomAmount = e.wheelDeltaY*0.0001;
  stage.setScale(stage.getScale().x+zoomAmount)
  stage.draw();
  e.preventDefault();
}, false)

// pan by mouse dragging on stage
stage.on("dragstart dragmove", function(e) {window.draggingNode = true;});
stage.on("dragend", function(e) { window.draggingNode = false;});
$("#container").on("mousedown", function(e) {
    if (window.draggingNode) return false;
    if (e.which==1) {
        window.draggingStart = {x: e.pageX, y: e.pageY, stageX: stage.getX(), stageY: stage.getY()};
        window.draggingStage = true;
    }
});
$("#container").on("mousemove", function(e) {
    if (window.draggingNode || !window.draggingStage) return false;
    stage.setX(window.draggingStart.stageX+(e.pageX-window.draggingStart.x));
    stage.setY(window.draggingStart.stageY+(e.pageY-window.draggingStart.y));
    stage.draw();
});
$("#container").on("mouseup", function(e) { window.draggingStage = false } );

stage.add(layer);

http://jsfiddle.net/bighostkim/jsqJ2/

于 2012-12-20T21:30:00.440 に答える