Zoom et Pan dans KineticJS

Vous pouvez simplement ajouter .setDraggable("draggable") à une couche et vous serez en mesure de le faire glisser tant qu'il y a un objet sous le curseur. Vous pouvez ajouter un grand, transparent rect de faire tout ce déplaçable. Le zoom peut être atteint par la création de l'échelle de la couche. Dans cet exemple, je vais contrôler si la molette de la souris, mais c'est tout simplement une fonction où vous passez le montant que vous voulez de zoom (positif pour effectuer un zoom avant, négatif pour effectuer un zoom arrière). Voici le code:

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/

OriginalL'auteur Duopixel

c'est ce que j'ai fait jusqu'à présent.. espérons que cela vous aidera.

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

OriginalL'auteur v1r00z

Que je travaillais avec des Cinétiques aujourd'hui j'ai trouvé un DONC, la question qui pourraient vous intéresser.

Je sais que ce serait mieux comme commentaire, mais je n'ai pas assez de rep pour que, de toute façon, j'espère que ça aide.

OriginalL'auteur Richard Otvos

Malheureusement, la configuration de l'état ou de la couche déplaçable empêche les objets qui ne sont pas déplaçables.
Duopixel du zoom solution est bonne, mais je préfère le mettre pour le niveau de la scène, pas au niveau du calque.

Elle est ma solution

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/

OriginalL'auteur allenhwkim