javascript - 在 KineticJS 中缩放和平移

Question

有没有一种方法可以使用 KineticJS 在 Canvas 上缩放和平移？我找到了这个图书馆 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/