CODEWITHSUNDEEP
javascriptsvgzoomingviewbox
Juraj Carnogursky
Juraj Carnogursky

Reputation: 355

svg.js Zoom at point with viewbox

I'd like to ask you for a little help. I am having some serious problem with svg zooming. I am using javascript OOP with library svg.js. Having a class Camera which contains two methods: zoomIn() and zoomOut()

For now it seems to work, but it's zooming only at the (0,0) point. I was making some google search, but couldn't find any handsome solution.

Here's my Camera.zoomIn() function: 

App.Model.Camera.prototype.zoomIn = function(point) {
    this.viewbox.width *= this._zoomStep;
    this.viewbox.height *= this._zoomStep;
    this._zoom += this._zoomStep;

    if(typeof point != 'undefined') {
        // Here should be some panning (this.viewbox.x, this.viewbox.y) logic.
    }

    this.update();
    return this;
};

the same based zoomOut function:

App.Model.Camera.prototype.zoomOut = function(point) {
    this.viewbox.width /= this._zoomStep;
    this.viewbox.height /= this._zoomStep;
    this._zoom -= this._zoomStep;

    if(typeof point != 'undefined') {
        // Here should be some panning (this.viewbox.x, this.viewbox.y) logic.
    }

    this.update();
    return this;
};

I also have some point transformation method (if it's useful):

App.Model.Camera.prototype.transformPoint = function(point) {
    if(point.hasOwnProperty('x') && point.hasOwnProperty('y')) {
        point.x = this.getPan().x + point.x * this.viewbox.width / this._originalSize.width;
        point.y = this.getPan().x + point.y * this.viewbox.height / this._originalSize.height;
    }
    return point;
};

I would be really thankful if some of you can help me.

Have a good day :)

Upvotes: 1

Views: 1995

Answers (1)

Juraj Carnogursky
Juraj Carnogursky

Reputation: 355

Ok Guys, I found the solution on: https://gamedev.stackexchange.com/questions/9330/zoom-to-cursor-calculation/9344#9344?newreg=c8ca68a4166449e0a8cb54dc851a7916

in pseudocode.

Here's my translation into javascript:

Zoom In:

 App.Model.Camera.prototype.zoomIn = function(point) {


     var oldWidth = this.viewbox.width;
     var oldHeight = this.viewbox.height;


     this.viewbox.width *= this._zoomStep;
     this.viewbox.height *= this._zoomStep;
      this._zoom += this._zoomStep;

     if(typeof point != 'undefined') {
          this.viewbox.x -= (point.x / this._originalSize.width * (this.viewbox.width - oldWidth));
          this.viewbox.y -= (point.y / this._originalSize.height * (this.viewbox.height - oldHeight));
     }

     this.update();
     return this;
 };

Zoom Out:

 App.Model.Camera.prototype.zoomOut = function(point) {


     var oldWidth = this.viewbox.width;
     var oldHeight = this.viewbox.height;


     this.viewbox.width /= this._zoomStep;
     this.viewbox.height /= this._zoomStep;
      this._zoom -= this._zoomStep;

     if(typeof point != 'undefined') {
          this.viewbox.x -= (point.x / this._originalSize.width * (this.viewbox.width - oldWidth));
          this.viewbox.y -= (point.y / this._originalSize.height * (this.viewbox.height - oldHeight));
     }

     this.update();
     return this;
 };

Many Thanks to the Guy on stackexchange

Upvotes: 1

Related Questions