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，因此使用了原型链中下一个对象的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/

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

Answer 2

问题是没有SVG等同于fillText所以FabricJS似乎忽略了它。 My workaround使用fabric.Group并构建内部Rect和Text

var LabeledRect = function(options) {
    var rect = new fabric.Rect({
        width: options.width,
        height: options.height,
        fill: options.fill
    });

    var label = new fabric.Text(options.label);

    var group = new fabric.Group([rect, label]);

    group.left = options.left;
    group.top = options.top;

    group.toSVG = function() {
        var e=[];
        for(var t = 0; t < this._objects.length; t++)
            e.push(this._objects[t].toSVG());

        return'<g transform="'+this.getSvgTransform()+'">'+e.join("")+"</g>"
    };

    return group;
};

我覆盖toSVG的原因是因为默认实现以相反的顺序（for(var t=this._objects.length;t--;)）循环遍历子项。我不知道为什么会这样做，但是文本呈现在矩形下面。

toSVG方法不能使用Fabric.js在扩展类上工作

2 个答案: