有没有一种方法可以使用 KineticJS 在 Canvas 上缩放和平移?我找到了这个图书馆 kineticjs-viewport , 但只是想知道是否有任何其他方法可以实现这一点,因为这个库似乎使用了很多额外的库,我不确定哪些是完成工作所绝对必要的。
或者,我什至愿意在感兴趣的区域周围绘制一个矩形并放大该特定区域。关于如何实现这一目标的任何想法?一个 JSFiddle 示例会很棒!
最佳答案
您只需将.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)
关于javascript - 在 KineticJS 中缩放和平移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12633554/