Hay una forma en la que uno podría zoom y panorámica en un lienzo con KineticJS? He encontrado esta biblioteca kineticjs-ventanilla, pero me preguntaba si hay alguna otra forma de lograr esto porque esta biblioteca parece ser el uso de tantas librerías extra y no estoy seguro de que son absolutamente necesarios para conseguir el trabajo hecho.

Alternativamente, estoy abierto a la idea de dibujar un rectángulo alrededor de la región de interés y la ampliación en el que un área en particular. Cualquier idea sobre cómo lograr esto? Un JSFiddle ejemplo sería increíble!

OriginalEl autor Legend | 2012-09-28

7 Comentarios

  1. 25

    Usted puede simplemente añadir .setDraggable("draggable") a una capa y usted será capaz de arrastrar todo el tiempo no es un objeto bajo el cursor. Usted puede agregar una gran transparente rect a hacer todo lo que pueden arrastrarse. El zoom se puede lograr mediante el ajuste de la escala de la capa. En este ejemplo estoy controlando mediante la rueda del ratón, pero es simplemente una función de donde se pasa de la cantidad que usted desee ampliar (positivo para acercar, negativo para alejar la imagen). Aquí está el código:

    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/

    Esto funciona muy bien, excepto en IE9. Tendría alguna idea de por qué? La consola de depuración de no tirar ningún error, ya sea…
    Parece que funciona si uso e.wheelDelta en lugar de e.wheelDeltaY. Alguna idea de por qué?
    Creo que IE utiliza deltaY. La rueda de zoom, era solo un ejemplo, si usted tiene la intención de mantener continuación, usted debe utilizar una cuña que hace la diferencia en el navegador de implementaciones como github.com/cobbweb/jquery-mousewheel
    niza, uno de los problemas es que si la capa es posible arrastrar, los objetos de esa capa no draggale aunque se pueden arrastrar. ¿Conoces alguna forma para establecer el fondo sólo es posible arrastrar para la expansión?
    El jsfiddle : jsfiddle.net/zAUYd no funciona, ni en FF, ni Chrome. Podrías actualizarlo ?

    OriginalEl autor Duopixel

  2. 4

    Aquí una forma muy rápida y simple aplicación de zoom y panorámica de la capa. Si tiene más capas que habría de pan y zoom al mismo tiempo, me permito sugerir la agrupación y, a continuación, la aplicación de la(«clic»)s a que grupo para conseguir el mismo efecto.

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

    Si no es obvio, a la luz de cuadrados azules en la parte superior izquierda se hace clic para zoom in y zoom out, y el rosa cuadrados en la parte inferior izquierda se hace clic en para desplazarse a izquierda y derecha.

    Edit: Como nota, por supuesto, esto podría ser cambiado para apoyar «mousedown» u otros eventos, y no veo por qué las transformaciones no podía ser implementado como Cinética.Animaciones para hacerlos más suaves.

    Impresionante! Esto es exactamente lo que quiero. He intentado utilizar los eventos del ratón encima de un escenario, pero no tienen mucha suerte con ella, así que me siento tentado a preguntarle – ¿sería capaz de guiarme más en el apoyo a los eventos mousedown y el apoyo de una suave animación?
    Yo no aconsejaría que aplicar en el conjunto de la etapa, esta sería la captura de todos los eventos de ratón sin perjuicio de lo dispuesto. Intente asignar a formas individuales como lo hice yo. No estoy seguro exactamente lo que el asesoramiento que necesita, el Api y tutoriales para la Cinética son bastante útiles, aunque.
    No me sorprende, 5.0.0 y 5.0.1 tiene un montón de cambios recientes de la 4.0.2.
    Podrías actualizar el jsfiddle menciona en su respuesta ? No funciona (Firefox, Chrome)

    OriginalEl autor michael.orchard

  3. 3

    De hecho, me escribió kineticjs-ventanilla. Estoy feliz de saber que estaba interesado en ella.

    Es en realidad más que simplemente arrastrando. También permite hacer zoom y centrados en el desempeño de recorte. Las cosas fuera de la región de recorte no se representan en absoluto, así que usted puede tener un gran rendimiento de la representación, incluso si usted tiene una enorme capa con un montón de objetos.

    Que el caso de uso que tenía. Por ejemplo, una gran RTS mapa que puede ver a través de una pequeña ventanilla de la región — creo que Starcraft.

    Espero que esto ayude.

    Se puede añadir un ejemplo sobre cómo utilizar la ventanilla para esto?
    Hay una página de demostración en la repo: kineticjs-viewport.googlecode.com/git/demo.html

    OriginalEl autor Andrew Lundgren

  4. 2

    Como estaba trabajando con Cinética hoy me he encontrado un ASÍ, pregunta que podrían ser de interés para usted.

    Sé que sería mejor como un comentario, pero no tengo suficiente rep para que, de todos modos, espero que le ayude.

    OriginalEl autor Richard Otvos

  5. 2

    Estas respuestas parece no funcionar con el KineticJS 5.1.0. Estos no funcionan principalmente para cambiar la firma de la escala de función:

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

    Sin embargo, la siguiente solución que parece funcionar con el KineticJS 5.1.0:

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

    OriginalEl autor Razan Paul

  6. 1

    Desafortunadamente, la configuración del estado o de la capa de arrastrarse evita que los objetos no se pueden arrastrar.
    Duopixel del zoom es buena, pero prefiero que lo establecido para el nivel del escenario, no a nivel de la capa.

    Ella es mi solución

    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/

    OriginalEl autor allenhwkim

Dejar respuesta

Please enter your comment!
Please enter your name here