javascript - toSVG 方法不适用于 Fabric.js 的扩展类

Question

我正在使用 Fabric.js 进行一个项目。

现在我需要创建一个自定义类并将其导出到 SVG。

我正在使用 Fabric.js 教程开始:

http://www.sitepoint.com/fabric-js-advanced/

这是javascript代码:

var LabeledRect = fabric.util.createClass(fabric.Rect, {
  type: 'labeledRect',
  initialize: function(options) {
    options || (options = { });
    this.callSuper('initialize', options);
    this.set('label', options.label || '');
  },
  toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'), {
      label: this.get('label')
    });
  },
  _render: function(ctx) {
    this.callSuper('_render', ctx);
    ctx.font = '20px Helvetica';
    ctx.fillStyle = '#333';
    ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
  }
});

var canvas = new fabric.Canvas('container');

var labeledRect = new LabeledRect({
  width: 100,
  height: 50,
  left: 100,
  top: 100,
  label: 'test',
  fill: '#faa'
});
canvas.add(labeledRect);
document.getElementById('export-btn').onclick = function() {
canvas.deactivateAll().renderAll(); 
window.open('data:image/svg+xml;utf8,' + encodeURIComponent(canvas.toSVG()));

};

这里是 HTML:

<canvas id="container" width="780" height="500"></canvas>
<a href="#" id="export-btn">Export SVG</a>

这是我的 jsfiddle..

http://jsfiddle.net/QPDy5/

我做错了什么？

提前致谢。

Answer 1

Fabric 中的每个“类”(矩形、圆形、图像、路径等)都知道如何输出其 SVG 标记。负责它的方法是toSVG。可以看到toSVG of fabric.Rect ，例如，或 fabric.Text one .

由于您在这里创建了 fabric.Rect 的子类并且没有指定 toSVG，因此使用原型(prototype)链中下一个对象的 toSVG .继承链中的下一个“类”恰好是 fabric.Rect，因此您将看到 fabric.Rect.prototype.toSVG 的结果。

解决方案很简单:在子类中指定toSVG。理论上，您需要合并来自 fabric.Rect#toSVG 和 fabric.Text#toSVG 的代码，但为了避免重复并保持可维护性，我们可以利用一些黑客的:

toSVG: function() {
  var label = new fabric.Text(this.label, {
      originX: 'left',
      originY: 'top',
      left: this.left - this.width / 2,
      top: this.top - this.height / 2,
      fontSize: 20,
      fill: '#333',
      fontFamily: 'Helvetica'
  });
  return this.callSuper('toSVG') + label.toSVG();
}

当然，最好将“fontSize”、“fill”和“fontFamily”移动到实例级属性，以避免在那里重复它们。

这是修改后的测试 — http://jsfiddle.net/fabricjs/QPDy5/1/

@Sergiu Paraschiv 向小组建议的是另一个同样可行的解决方案。