有没有一种方法可以使用 KineticJS 在画布上缩放和平移？我找到了这个库kineticjs-viewport，但只是想知道是否有任何其他方法可以实现这一点，因为这个库似乎使用了很多额外的库，并且不确定哪些是完成工作绝对必要的。
或者，我什至愿意在感兴趣的区域周围绘制一个矩形并放大该特定区域。关于如何实现这一目标的任何想法？一个 JSFiddle 的例子会很棒！
问问题
12609 次
7 回答
25
您可以简单地添加.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)
于 2012-10-06T10:19:57.463 回答
4
这是缩放和平移图层的非常快速和简单的实现。如果您有更多需要同时平移和缩放的图层，我建议将它们分组，然后将 on("click") 应用于该组以获得相同的效果。
如果不明显，点击左上角的浅蓝色方块进行放大缩小，点击左下角的粉色方块进行左右平移。
编辑：作为说明，这当然可以更改为支持“mousedown”或其他事件，我不明白为什么不能将转换实现为 Kinetic.Animations 以使其更平滑。
于 2012-10-04T12:38:21.467 回答
3
这就是我到目前为止所做的......希望它会对你有所帮助。
于 2012-10-02T02:19:38.307 回答
3
我实际上写了 kineticjs-viewport。我很高兴听到你对此感兴趣。
它实际上不仅仅用于拖动。它还允许缩放和以性能为中心的剪辑。剪辑区域之外的东西根本不会被渲染，因此即使您有一个包含大量对象的巨大图层，您也可以获得出色的渲染性能。
这就是我的用例。例如，您通过较小的视口区域查看的大型 RTS 地图——想想星际争霸。
我希望这有帮助。
于 2013-04-02T02:25:22.797 回答
2
当我今天与 Kinetic 合作时，我发现了一个您可能感兴趣的SO 问题。
我知道作为评论会更好，但我没有足够的代表，无论如何，我希望这会有所帮助。
于 2012-10-01T20:54:10.837 回答
2
这些答案似乎不适用于 KineticJS 5.1.0。这些主要不适用于 scale 函数的签名更改：
stage.setScale(newscale); --> stage.setScale({x:newscale,y:newscale});
但是，以下解决方案似乎适用于 KineticJS 5.1.0：
JSFiddle：http: //jsfiddle.net/rpaul/ckwu7u86/3/
于 2014-11-12T05:53:44.933 回答
1
不幸的是，设置状态或图层可拖动会阻止对象不可拖动。Duopixel 的缩放解决方案很好，但我宁愿将它设置为舞台级别，而不是图层级别。
她是我的解决方案
var stage = new Kinetic.Stage({
container : 'container',
width: $("#container").width(),
height: $("#container").height(),
});
var layer = new Kinetic.Layer();
//layer.setDraggable("draggable");
var center = { x:stage.getWidth() / 2, y: stage.getHeight() / 2};
var circle = new Kinetic.Circle({
x: center.x-100,
y: center.y,
radius: 50,
fill: 'green',
draggable: true
});
layer.add(circle);
layer.add(circle.clone({x: center.x+100}));
// zoom by scrollong
document.getElementById("container").addEventListener("mousewheel", function(e) {
var zoomAmount = e.wheelDeltaY*0.0001;
stage.setScale(stage.getScale().x+zoomAmount)
stage.draw();
e.preventDefault();
}, false)
// pan by mouse dragging on stage
stage.on("dragstart dragmove", function(e) {window.draggingNode = true;});
stage.on("dragend", function(e) { window.draggingNode = false;});
$("#container").on("mousedown", function(e) {
if (window.draggingNode) return false;
if (e.which==1) {
window.draggingStart = {x: e.pageX, y: e.pageY, stageX: stage.getX(), stageY: stage.getY()};
window.draggingStage = true;
}
});
$("#container").on("mousemove", function(e) {
if (window.draggingNode || !window.draggingStage) return false;
stage.setX(window.draggingStart.stageX+(e.pageX-window.draggingStart.x));
stage.setY(window.draggingStart.stageY+(e.pageY-window.draggingStart.y));
stage.draw();
});
$("#container").on("mouseup", function(e) { window.draggingStage = false } );
stage.add(layer);
于 2012-12-20T21:30:00.440 回答