嘿，老友，今天聊聊怎么用 pixi.js 搞一个和 fabric.js 对象继承差不多的玩意儿。你别急，先别想那种死板的继承链，我给你说说怎么把两者的精华拿出来凑合。哈哈。

fabric.js 给我们一个 FabricObject 的基类，然后各种形状、图像、文字等dou从它继承。pixi.js 则是把所有东西挂在 Container 或者 Graphics 上。两套体系差距大，但Ru果你想把 pixi Zuo成“Fabric 样子”，那就得搞清楚两边的坐标系、渲染流程、事件交互这些细节。

fabric 先算自己的 localTransform，再往上叠加到 ctx.transform 上，Zui终得到世界变换矩阵。pixi 在内部Yi经帮你算好了 worldTransform, 所以我们只需要在 pixi 对象里存自己的 local 矩阵，然后让 pixi 去算全局就行。

代码片段:

class InnerObject extends ObjectGeometry {
  _render { /* placeholder */ }
}

fabric 的 Group 是 , pixi 的对应是 . 在 pixi 实现中我们往容器里塞子对象的 pixiContent, 并额外加一个 subPixiContent, 用来隔离组自身绘制和子元素绘制。

Caution!

class Group extends FabricObject {
  constructor {
    super;
    this.pixiContent.removeChildren;
    this.pixiContent.label = 'group';
    this.subPixiContent = new Container] });
    this.pixiContent.addChild;
  }
}

"为什么百度不收录"? 嗯，说实话，有可Neng是关键词太冷门，也有可Neng是技术文章太专业，没有被搜索引擎抓到足够多的标签。要想让百度收录，记得在标题里加点热点词，再配上高质量内容。还有啊，别忘了提交站点地图，保证爬虫Neng顺利访问。对啦，对啦，不对不对，还Ke以试试 SEO 插件或者手动提交链接。你懂的。

Pixi 的绘图基本靠 , 而 fabric 则用 ctx.moveTo/lineTo/arc 等 Canvas API。下面给你几个核心代码块，你直接照着改一改就Neng跑：

Pseudo Code:

class Polyline extends FabricObject {
  _render {
    const len = this.points.length;
    if ) return;
    ctx.beginPath;
    ctx.moveTo(this.points.x - this.pathOffset.x,
              this.points.y - this.pathOffset.y);
    for  {
      const p = this.points;
      ctx.lineTo(p.x - this.pathOffset.x,
                 p.y - this.pathOffset.y);
    }
    if ) ctx.closePath;
    this._renderPaintInOrder;
  }
}

No extra methods needed.

You can just set isOpen return false.

The rest stays same.

Path 对象会解析 svg 命令，然后用 Canvas API 一条条绘制：

class Path extends FabricObject {
  _renderPathCommands {
    let l = -this.pathOffset.x, t = -this.pathOffset.y;
    ctx.beginPath;
    for  {
      switch  { // first letter
        case 'L':
          ctx.lineTo;
          break;
        case 'M':
          ctx.moveTo;
          break;
        case 'C':
          ctx.bezierCurveTo(
            cmd+l, cmd+t,
            cmd+l, cmd+t,
            cmd+l, cmd+t
          );
          break;
        case 'Q':
          ctx.quadraticCurveTo(
            cmd+l, cmd+t,
            cmd+l, cmd+t
          );
          break;
        case 'Z':
          ctx.closePath;
      }
    }
  }
  _render { 
     this._renderPathCommands; 
     this._renderPaintInOrder; 
   } 
}

Piex 的 image 是 Texture，而 fabric 用 drawImage. Pixi Neng自动Zuo缩放裁剪，我们只要在 render 时把纹理尺寸映射到 canvas 上即可：

class Image extends FabricObject {
   _render { 
     // 假设Yi有 texture
     const tex = this.texture; 
     if  return;
     // 绘制前先设置 transform
     ctx.save; 
     // scale / rotate / translate 根据 object 属性
     const mtx = getMatrixFromObj; // 自己写个 helper
     ctx.transform; 
     // 用 drawImage 或者 Pixi 的 sprite.draw
     canvasDrawImage(tex.baseTexture.source,
                     ...calcSrcDstRect);
     ctx.restore; 
   } 
}

Pixie 要Zuo递归渲染，这里只是展示思路：

class Group extends FabricObject {
   drawObject { 
      // Render background first
      super._renderBackground;
      for  obj.render; 
   }
   render{  
       if ) return;
       // Apply own transform once before children  
       const mtx=this.calcTransformMatrix;  
       ctx.transform;  
       super.render.call);  
   }
}

​

--- end of article ---

---