Javascript 在KineticJS中缩放和平移

有没有一种方法可以使用KineticJS在画布上缩放和平移？我找到了这个库，但只是想知道是否有其他方法可以实现这一点，因为这个库似乎使用了太多额外的库，并且不确定哪些库是完成这项工作绝对必要的

---

或者，我甚至愿意在感兴趣的区域周围画一个矩形，然后放大到某个特定区域。关于如何实现这一点有什么想法吗？一个JSFIDLE示例将非常棒

当我今天与Kinetic合作时，我发现了一个您可能感兴趣的方法

---

我知道作为一个评论会更好，但我没有足够的代表，无论如何，我希望这能有所帮助。

这就是我目前所做的。。希望它能帮助你

---

下面是一个快速而简单的层缩放和平移实现。如果您有更多需要同时平移和缩放的层，我建议将它们分组，然后将“打开”（“单击”）应用于该组以获得相同的效果

如果不明显，则单击左上角的浅蓝色方块进行放大和缩小，单击左下角的粉红色方块进行左右平移

---

编辑：请注意，这当然可以更改为支持“mousedown”或其他事件，我不明白为什么转换不能作为动能动画来实现，以使它们更平滑。

您可以简单地添加

.setDragable（“Dragable”）

拖动到一个图层上，只要光标下有一个对象，就可以拖动它。您可以添加一个大的、透明的

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)

---

不幸的是，设置状态或图层可拖动会阻止对象不可拖动。 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);

---

我实际上编写了kineticjs视口。我很高兴听到你对它感兴趣

它实际上不仅仅是为了拖动。它还允许缩放和以性能为中心的剪辑。剪辑区域之外的东西根本不会渲染，因此即使有一个包含大量对象的巨大层，也可以获得出色的渲染性能

这就是我的用例。例如，通过较小的视口区域查看的大型RTS地图——比如星际争霸

---

我希望这有帮助

这些答案似乎不适用于KineticJS 5.1.0。这些主要不适用于比例函数的特征变化：

 stage.setScale(newscale); --> stage.setScale({x:newscale,y:newscale});

但是，以下解决方案似乎适用于KineticJS 5.1.0：

---

JSFiddle:

太棒了！这正是我想要的。我尝试在一个舞台上使用鼠标事件，但运气不太好，所以我想问你-你能在支持鼠标向下事件和支持更流畅的动画方面给我更多指导吗？我不建议将它们应用到整个舞台上，这将毫无偏见地捕获所有鼠标事件。试着像我一样将它们分配到各个形状。我不确定你到底需要什么指导，不过动能的API和教程非常有用。我并不惊讶，5.0.0和5.0.1在4.0.2中有很多突破性的变化。你能更新你回答中提到的JSFIDLE吗？它不再工作了（Firefox、Chrome），除了在IE9中，它工作得很好。你知道为什么吗？调试控制台也不会抛出任何错误…如果我使用

e.wheelDelta

而不是

e.wheelDeltaY

，它看起来可以工作。知道为什么吗？我想IE用的是deltaY。鼠标滚轮缩放只是一个例子，如果你想保留它，那么你应该使用一个垫片来弥补浏览器实现中的差异，比如nice，一个问题是如果图层是可拖动的，那么该图层上的对象虽然设置为可拖动，但不可拖动。你知道有什么方法可以设置只能拖动背景进行平移吗？jsfiddle:在FF和Chrome上都不起作用了。您可以更新它吗？您可以添加一个如何使用视口的示例吗？repo中有一个演示页面：