在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/