在KineticJS中縮放和平移

Question

有沒有辦法可以使用KineticJS在畫布上縮放和平移？ 我發現這個庫kineticjs-viewport ，但只是想知道是否還有其他方法可以實現這一點，因為這個庫似乎使用了這么多額外的庫，並且我不確定哪些是完成工作所必需的。

或者，我甚至願意在感興趣的區域周圍繪制一個矩形並放大到那個特定區域。 關於如何實現這一點的任何想法？ 一個JSFiddle的例子真棒！

Answer 1

您只需將.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/

Answer 2

這是一個非常快速和簡單的縮放和平移圖層的實現。 如果你有更多的圖層需要同時進行平移和縮放，我建議將它們分組，然后將on（“click”）應用到該組以獲得相同的效果。

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

如果不是很明顯，則單擊左上角的淺藍色方塊進行放大和縮小，單擊左下方的粉紅色方塊進行左右平移。

編輯：作為一個注釋，這當然可以改為支持“mousedown”或其他事件，我不明白為什么轉換無法實現為Kinetic.Animations以使它們更順暢。

Answer 3

這就是我到目前為止所做的...希望它會對你有所幫助。

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

Answer 4

我實際上寫了kineticjs-viewport。 我很高興聽到你對它感興趣。

它實際上不僅僅是用於拖動。 它還允許縮放和以性能為中心的剪輯。 剪輯區域之外的內容根本不會渲染，因此即使您擁有包含大量對象的巨大圖層，也可以獲得出色的渲染性能。

這就是我的用例。 例如，您通過較小的視口區域查看的大型RTS地圖 - 想想星際爭霸。

我希望這有幫助。

Answer 5

當我今天和Kinetic合作時，我發現了一個可能讓你感興趣的問題 。

我知道作為評論會更好，但我沒有足夠的代表，無論如何，我希望這有幫助。

Answer 6

這些答案似乎不適用於KineticJS 5.1.0。 這些主要不適用於縮放功能的簽名更改：

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

但是，以下解決方案似乎適用於KineticJS 5.1.0：

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

Answer 7

不幸的是，設置狀態或圖層可拖動會阻止不可拖動的對象。 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/