有没有办法使用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)
