javascript – 放大和平移KineticJS

有没有办法使用KineticJS缩放和平移画布？我发现这个图书馆 kineticjs-viewport,但只是想知道是否有其他方法实现这一点,因为这个图书馆似乎正在使用这么多额外的图书馆,我不知道哪些是完成工作绝对必要的.

或者,我甚至可以在感兴趣的区域绘制一个矩形,并放大到该特定区域.关于如何实现这一点的任何想法？ JSfiddle的例子会很棒！

解决方法

您可以简单地将.setDraggable(“draggable”)添加到图层,只要在光标下面有一个对象,您就可以拖动它.您可以添加一个大的透明矩形,以使所有的东西都可以拖动.可以通过设置图层的比例来实现变焦.在这个例子中,我通过鼠标滚轮控制它,但它只是一个功能,您可以通过您想要放大的数量(正向放大,负向缩小).这是代码：

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)"
    })
  );
}

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/