D3原始碼解讀系列之Path

d3的path部分是對原生繪製方法的一種封裝形式。由於d3.js內部是以svg作為預設的繪圖方式，因此內部的計算方式都是將資料轉換成svg中path元素的d屬性值。通過統一的介面讓其和canvas繪圖的api保持一致。

Path

d3的path部分是為了模擬canvas的繪圖方式，但是採用的是svg來作圖。原始碼如下：

//path建構函式
function Path() {
    this._x0 = this._y0 = // 當前路徑的起點
    this._x1 = this._y1 = null; // 當前路徑的終點
    this._ = [];
}

function path() {
    return new Path;
}

Path.prototype = path.prototype = {
    constructor: Path,
    //移動至指定位置
    moveTo: function(x, y) {
      this._.push("M", this._x0 = this._x1 = +x, ",", this._y0 = this._y1 = +y);
    },
    //關閉路徑
    closePath: function() {
      if (this._x1 !== null) {
        this._x1 = this._x0, this._y1 = this._y0;
        this._.push("Z");
      }
    },
    //繪製直線
    lineTo: function(x, y) {
      this._.push("L", this._x1 = +x, ",", this._y1 = +y);
    },
    //繪製二次貝塞爾曲線
    quadraticCurveTo: function(x1, y1, x, y) {
      // Q x1 x2（控制點）, x y（終點）
      this._.push("Q", +x1, ",", +y1, ",", this._x1 = +x, ",", this._y1 = +y);
    },
    //繪製三次貝塞爾曲線
    bezierCurveTo: function(x1, y1, x2, y2, x, y) {
      this._.push("C", +x1, ",", +y1, ",", +x2, ",", +y2, ",", this._x1 = +x, ",", this._y1 = +y);
    },
    arcTo: function(x1, y1, x2, y2, r) {
      x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
      var x0 = this._x1,
          y0 = this._y1,
          x21 = x2 - x1,
          y21 = y2 - y1,
          x01 = x0 - x1,
          y01 = y0 - y1,
          l01_2 = x01 * x01 + y01 * y01;

      // Is the radius negative? Error.
      if (r < 0) throw new Error("negative radius: " + r);

      // Is this path empty? Move to (x1,y1).
      if (this._x1 === null) {
        this._.push(
          "M", this._x1 = x1, ",", this._y1 = y1
        );
      }

      // Or, is (x1,y1) coincident with (x0,y0)? Do nothing.
      else if (!(l01_2 > epsilon));

      // Or, are (x0,y0), (x1,y1) and (x2,y2) collinear?
      // Equivalently, is (x1,y1) coincident with (x2,y2)?
      // Or, is the radius zero? Line to (x1,y1).
      else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) {
        this._.push(
          "L", this._x1 = x1, ",", this._y1 = y1
        );
      }

      // Otherwise, draw an arc!
      else {
        var x20 = x2 - x0,
            y20 = y2 - y0,
            l21_2 = x21 * x21 + y21 * y21,
            l20_2 = x20 * x20 + y20 * y20,
            l21 = Math.sqrt(l21_2),
            l01 = Math.sqrt(l01_2),
            l = r * Math.tan((pi$1 - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2),
            t01 = l / l01,
            t21 = l / l21;

        // If the start tangent is not coincident with (x0,y0), line to.
        if (Math.abs(t01 - 1) > epsilon) {
          this._.push(
            "L", x1 + t01 * x01, ",", y1 + t01 * y01
          );
        }

        this._.push(
          "A", r, ",", r, ",0,0,", +(y01 * x20 > x01 * y20), ",", this._x1 = x1 + t21 * x21, ",", this._y1 = y1 + t21 * y21
        );
      }
    },
    //(x, y)為參照點座標，a0和a1分別為起點弧度和終點弧度
    arc: function(x, y, r, a0, a1, ccw) {
      x = +x, y = +y, r = +r;
      var dx = r * Math.cos(a0),
          dy = r * Math.sin(a0),
          //起點(x0, y0)座標
          x0 = x + dx,
          y0 = y + dy,
          //clockwise，順時針
          cw = 1 ^ ccw,
          da = ccw ? a0 - a1 : a1 - a0;

      if (r < 0) throw new Error("negative radius: " + r);

      // 如果path為空，則move到(x0, y0)
      if (this._x1 === null) {
        this._.push(
          "M", x0, ",", y0
        );
      }

      // (x0, y0)與之前位置不一致，用直線連線到(x0, y0)
      else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) {
        this._.push(
          "L", x0, ",", y0
        );
      }

      if (!r) return;

      // 如果是一個圓，直接畫兩個圓弧實現這個圓形
      // A rx（x軸半徑） ry（y軸半徑） x-axis-rotation（x軸逆時針旋轉角度） large-arc-flag（0表示小角度弧即小於180°，1表示大角度弧） sweep-flag（0表示從起點到終點逆時針畫弧，1表示順時針） x（弧線終點x軸） y（弧線終點y軸）
      if (da > tauEpsilon) {
        this._.push(
          "A", r, ",", r, ",0,1,", cw, ",", x - dx, ",", y - dy,
          "A", r, ",", r, ",0,1,", cw, ",", this._x1 = x0, ",", this._y1 = y0
        );
      }

      // 以r為半徑，從當前點向endAngle位置畫弧線
      else {
        if (da < 0) da = da % tau$1 + tau$1;
        this._.push(
          "A", r, ",", r, ",0,", +(da >= pi$1), ",", cw, ",", this._x1 = x + r * Math.cos(a1), ",", this._y1 = y + r * Math.sin(a1)
        );
      }
    },
    rect: function(x, y, w, h) {
      this._.push("M", this._x0 = this._x1 = +x, ",", this._y0 = this._y1 = +y, "h", +w, "v", +h, "h", -w, "Z");
    },
    // 將整個陣列轉化成一個字串
    toString: function() {
      return this._.join("");
    }
  };
複製程式碼