Question

我想问你一点帮助。我对svg缩放有一些严重的问题。我正在使用javascript OOP与库svg.js. 有一个类Camera包含两个方法：zoomIn（）和zoomOut（）

现在似乎有效，但它只在（0,0）点缩放。我正在进行一些谷歌搜索，但找不到任何漂亮的解决方案。

这是我的Camera.zoomIn（）函数：

#!/bin/bash
while :; do
    [ $(mysql -uroot -e "show full processlist" | tee -a plist.log | wc -l) -lt 51 ] && rm plist.log
    sleep 1
done

相同的zoomOut函数：

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;
};

我也有一些点变换方法（如果它有用）：

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;
};

如果你们中的一些人可以帮助我，我将非常感激。

祝你有个美好的一天：）

Answer 1

好的伙计们，我找到了解决方案：https://gamedev.stackexchange.com/questions/9330/zoom-to-cursor-calculation/9344#9344?newreg=c8ca68a4166449e0a8cb54dc851a7916

在伪代码中。

这是我对javascript的翻译：

放大：

 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;
 };

缩小：

 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;
 };

非常感谢stackexchange上的Guy

svg.js使用viewbox缩放点

1 个答案: