javascript - Zoom de lienzo al cursor del mouse

html5 canvas

Question

Estoy programando un proyecto HTML5 <canvas> que implica acercar y alejar imágenes usando la rueda de desplazamiento. Quiero acercarme al cursor como lo hace google maps, pero estoy completamente perdido en cómo calcular los movimientos.

Lo que tengo: imagen xey (esquina superior izquierda); ancho y altura de la imagen; cursor xey en relación con el centro del lienzo.

Answer 1

Espero que estas bibliotecas JS te ayuden: (HTML5, JS)

1. Lupa

http://www.netzgesta.de/loupe/

2. CanvasZoom

https://github.com/akademy/CanvasZoom

3. Scroller

https://github.com/zynga/scroller

En cuanto a mí, estoy usando lupa. ¡Es impresionante! Para ti es el mejor caso: scroller.

Answer 2

Recientemente necesité archivar los mismos resultados que Phrogz, pero en lugar de usar context.scale() , calculé el tamaño de cada objeto en función de la proporción.

Esto es lo que se me ocurrió. La lógica detrás de esto es muy simple. Antes de escalar, calculo la distancia del punto desde el borde en porcentajes y luego ajusto la ventana gráfica para corregir el lugar.

Me tomó bastante tiempo llegar a eso, espero que ahorre tiempo a alguien.

$(function () {
  var canvas = $(''canvas.main'').get(0)
  var canvasContext = canvas.getContext(''2d'')

  var ratio = 1
  var vpx = 0
  var vpy = 0
  var vpw = window.innerWidth
  var vph = window.innerHeight

  var orig_width = 4000
  var orig_height = 4000

  var width = 4000
  var height = 4000

  $(window).on(''resize'', function () {
    $(canvas).prop({
      width: window.innerWidth,
      height: window.innerHeight,
    })
  }).trigger(''resize'')

  $(canvas).on(''wheel'', function (ev) {
    ev.preventDefault() // for 

    var step

    if (ev.originalEvent.wheelDelta) {
      step = (ev.originalEvent.wheelDelta > 0) ? 0.05 : -0.05
    }

    if (ev.originalEvent.deltaY) {
      step = (ev.originalEvent.deltaY > 0) ? 0.05 : -0.05
    }

    if (!step) return false // yea..

    var new_ratio = ratio + step
    var min_ratio = Math.max(vpw / orig_width, vph / orig_height)
    var max_ratio = 3.0

    if (new_ratio < min_ratio) {
      new_ratio = min_ratio
    }

    if (new_ratio > max_ratio) {
      new_ratio = max_ratio
    }

    // zoom center point
    var targetX = ev.originalEvent.clientX || (vpw / 2)
    var targetY = ev.originalEvent.clientY || (vph / 2)

    // percentages from side
    var pX = ((vpx * -1) + targetX) * 100 / width
    var pY = ((vpy * -1) + targetY) * 100 / height

    // update ratio and dimentsions
    ratio = new_ratio
    width = orig_width * new_ratio
    height = orig_height * new_ratio

    // translate view back to center point
    var x = ((width * pX / 100) - targetX)
    var y = ((height * pY / 100) - targetY)

    // don''t let viewport go over edges
    if (x < 0) {
      x = 0
    }

    if (x + vpw > width) {
      x = width - vpw
    }

    if (y < 0) {
      y = 0
    }

    if (y + vph > height) {
      y = height - vph
    }

    vpx = x * -1
    vpy = y * -1
  })

  var is_down, is_drag, last_drag

  $(canvas).on(''mousedown'', function (ev) {
    is_down = true
    is_drag = false
    last_drag = { x: ev.clientX, y: ev.clientY }
  })

  $(canvas).on(''mousemove'', function (ev) {
    is_drag = true

    if (is_down) {
      var x = vpx - (last_drag.x - ev.clientX)
      var y = vpy - (last_drag.y - ev.clientY)

      if (x <= 0 && vpw < x + width) {
        vpx = x
      }

      if (y <= 0 && vph < y + height) {
        vpy = y
      }

      last_drag = { x: ev.clientX, y: ev.clientY }
    }
  })

  $(canvas).on(''mouseup'', function (ev) {
    is_down = false
    last_drag = null

    var was_click = !is_drag
    is_drag = false

    if (was_click) {

    }
  })

  $(canvas).css({ position: ''absolute'', top: 0, left: 0 }).appendTo(document.body)

  function animate () {
    window.requestAnimationFrame(animate)

    canvasContext.clearRect(0, 0, canvas.width, canvas.height)

    canvasContext.lineWidth = 1
    canvasContext.strokeStyle = ''#ccc''

    var step = 100 * ratio

    for (var x = vpx; x < width + vpx; x += step) {
      canvasContext.beginPath()
      canvasContext.moveTo(x, vpy)
      canvasContext.lineTo(x, vpy + height)
      canvasContext.stroke()
    }
    for (var y = vpy; y < height + vpy; y += step) {
      canvasContext.beginPath()
      canvasContext.moveTo(vpx, y)
      canvasContext.lineTo(vpx + width, y)
      canvasContext.stroke()
    }

    canvasContext.strokeRect(vpx, vpy, width, height)

    canvasContext.beginPath()
    canvasContext.moveTo(vpx, vpy)
    canvasContext.lineTo(vpx + width, vpy + height)
    canvasContext.stroke()

    canvasContext.beginPath()
    canvasContext.moveTo(vpx + width, vpy)
    canvasContext.lineTo(vpx, vpy + height)
    canvasContext.stroke()

    canvasContext.restore()
  }

  animate()
})

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
 <canvas class="main"></canvas>
</body>
</html>

Answer 3

Tomé como base la respuesta de @ Phrogz e hice una pequeña biblioteca que permite al lienzo arrastrar, hacer zoom y rotar. Aquí está el ejemplo.

var canvas = document.getElementById(''canvas'')
//assuming that @param draw is a function where you do your main drawing.
var control = new CanvasManipulation(canvas, draw)
control.init()
control.layout()
//now you can drag, zoom and rotate in canvas

Puede encontrar ejemplos más detallados y documentación en la page del proyecto

Answer 4

En resumen, desea translate() el contexto del lienzo por su desplazamiento, scale() para acercar o alejar, y luego translate() nuevo por el lado opuesto al desplazamiento del mouse. Tenga en cuenta que debe transformar la posición del cursor del espacio de la pantalla en el contexto del lienzo transformado.

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

Demostración: http://phrogz.net/tmp/canvas_zoom_to_cursor.html

He puesto un http://phrogz.net/tmp/canvas_zoom_to_cursor.html en mi sitio web para que pueda examinar, admitir el arrastre, hacer clic para acercar, desplazar-clic hacia afuera, o desplazar la rueda hacia arriba / abajo.

El único problema (actual) es que Safari amplía demasiado rápido en comparación con Chrome o Firefox.