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/

Answer 2

这是一个非常快速和简单的缩放和平移图层的实现。如果你有更多的图层需要同时进行平移和缩放，我建议将它们分组，然后将on（“click”）应用到该组以获得相同的效果。

http://jsfiddle.net/renyn/56/

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

编辑：作为一个注释，这当然可以改为支持“mousedown”或其他事件，我不明白为什么转换无法实现为Kinetic.Animations以使它们更流畅。

Answer 3

这是我到目前为止所做的...希望它会对你有所帮助。

http://jsfiddle.net/v1r00z/ZJE7w/

Answer 4

我实际上写了kineticjs-viewport。我很高兴听到你对它感兴趣。

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

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

我希望这会有所帮助。

Answer 5

当我今天与Kinetic合作时，我发现了一个你感兴趣的SO question。

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

Answer 6

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

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

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

JSFiddle：http://jsfiddle.net/rpaul/ckwu7u86/3/

Answer 7

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

http://jsfiddle.net/bighostkim/jsqJ2/

在KineticJS中缩放和平移

7 个答案: