Scroll zoom effect

[Nickolia]

Sorry for my English.

Is it possible the zoom using the scrolling to move the mouse pointer on the canvas?

[boldenburg]

var canvas = new fabric.CanvasWithViewport("c", {selection: false, isGrabMode: true});
$(canvas.getElement().parentNode).on('DOMMouseScroll mousewheel', function(e) {
  var e = window.event || e; // old IE support
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.originalEvent.detail)));
  if (delta > 0) {
    canvas.setZoom(canvas.viewport.zoom*1.1);
  } else {
    canvas.setZoom(canvas.viewport.zoom/1.1);
  }
  return false;
});

[Kampii]

This is nice! How can you add the zoom center to be the coordinate of the mouse cursor?

[boldenburg]

You have to modify the library to do this. I would make a pull request but given that another bugfix pull request has been open since May 29 it looks like the author has abandoned this project.

Viewport.prototype.setZoom = function(newZoom) {
  var halfHeight, halfWidth;
  halfWidth = this.canvas.width / 2;
  halfHeight = this.canvas.height / 2;
  this._adjustPositionAfterZoom({x: halfWidth, y: halfHeight}, newZoom);
  return this.zoom = newZoom;
};

Viewport.prototype.zoomToPoint = function(point, newZoom) {
  this._adjustPositionAfterZoom(point, newZoom);
  return this.zoom = newZoom;
}

Viewport.prototype._adjustPositionAfterZoom = function(point, newZoom) {
  var k;
  k = newZoom / this.zoom;
  this.position.x = point.x - k * (point.x - this.position.x);
  return this.position.y = point.y - k * (point.y - this.position.y);
}

The following is CoffeeScript and uses jQuery's mousewheel library (https://github.com/jquery/jquery-mousewheel):

$(canvas.getElement().parentNode).on('mousewheel', (e) ->
  newZoom = Math.round(10*(canvas.viewport.zoom + (e.deltaY/10)))/10
  canvas.zoomToPoint({ x: e.offsetX, y: e.offsetY }, newZoom);
  return false)

[Kampii]

Thank you a lot! I followed your description and here (http://c-ev.com/zoom/v1my/example/index.html) is the result. It works weird. Clearly I must have done something wrong. Have you ever seen anything like this?

[boldenburg]

For the border you have to make the changes in https://github.com/rstgroup/fabricjs-viewport/pull/26

For the weird zooming effect, you have the mousewheel event double-bound. You bind it once in A2 and then once below with this code:

$('.canvas-container').bind('mousewheel', function(e){
   e.preventDefault();
   console.log(c);
   if(e.originalEvent.wheelDelta /120 > 0) {
       c.setZoom(c.viewport.zoom*1.1);
   }
   else{
       c.setZoom(c.viewport.zoom/1.1);
   }
});

[Kampii]

I updated the object.coffee (http://c-ev.com/zoom/v1my/src/fabric/controls_extension/object.coffee) and changed the A2 section but no improvement. I guess it is because the border issue is not fixed?!

[Kampii]

Your latest A2 section code is what I am using.

[boldenburg]

Try removing this section:

$('.canvas-container').bind('mousewheel', function(e){
    e.preventDefault();
    console.log(c);
    if(e.originalEvent.wheelDelta /120 > 0) {
        c.setZoom(c.viewport.zoom*1.1);
    }
    else{
        c.setZoom(c.viewport.zoom/1.1);
    }
});

[Kampii]

That did change something.. Now it doesn't zoom that fast, however, the weird stuff is still present.

EDIT: Actually now it is really broken

[boldenburg]

newZoom = c.viewport.zoom + e.deltaY;

[Kampii]

The same thing..

[boldenburg]

I'm not sure. It looks like it's only ever setting the viewport zoom to 1.1 or to 0.9. I'd try starting with a blank HTML page and add only the JavaScript libraries, the canvas, and the zoom event. This solution worked for me.

[Kampii]

Okay.. will try! Thank you a lot for your time! I owe you a beer! :)

Have you ever tried to set up a limit for the zoom so that it would not be possible to zoom out/ in out of the initial view? For instance like here (http://c-ev.com/zoom/v4/example/index.html) if you zoom in the one corner and then zoom out in the opposite corner, then you will start to see the white space. I am trying to merge the "panning" with the "scroll zoom with zoom center" and restriction of the "white space".

[boldenburg]

No problem! Let me know if you continue to have the problem with a barebones page, it's weird that it doesn't work as expected. I think it's an interaction with something else, which is why I recommend going to basics to debug.

I haven't tried to limit how far the viewport can pan, no, I just include a button that resets the viewport to a default location.