toSVG方法不能使用Fabric.js在扩展类上工作 [英] toSVG method not working on extended class with Fabric.js

问题描述

我正在使用Fabric.js开展一个项目。

I'm working on a project with Fabric.js.

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

Now I need to create a custom class and to export it to SVG.

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

I'm using Fabric.js tutorial to begin:

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

这里是javascript代码：

Here is the javascript code:

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 ..

Here is my jsfiddle..

http://jsfiddle.net/QPDy5/

我做错了什么？

提前致谢。

推荐答案

Fabric中的每个类（矩形，圆形，图像，路径等）都知道如何输出其SVG标记。负责它的方法是 toSVG 。你可以看到 toSVG fabric.Rect ，或 fabric.Text 一个 。

Every "class" in Fabric (rectangle, circle, image, path, etc.) knows how to output its SVG markup. The method responsible for it is toSVG. You can see toSVG of fabric.Rect, for example, or fabric.Text one.

由于您在此处创建了 fabric.Rect 的子类，因此未指定 toSVG使用原型链中下一个对象的， toSVG 。继承链中的下一个类碰巧是 fabric.Rect ，所以你看到 fabric.Rect.prototype.toSVG的结果。

Since you created subclass of fabric.Rect here and didn't specify toSVG, toSVG of the next object in prototype chain is used. The next "class" in the inheritance chain happens to be fabric.Rect, so you're seeing a result of fabric.Rect.prototype.toSVG.

解决方案很简单：在子类中指定 toSVG 。从理论上讲，您需要将 fabric.Rect＃toSVG 和 fabric.Text＃toSVG 中的代码组合在一起，但要避免重复并保持可维护性，我们可以利用一点点黑客：

The solution is simple: specify toSVG in your subclass. Theoretically, you would need to combine the code from fabric.Rect#toSVG and fabric.Text#toSVG, but to avoid repetition and keep things maintainable, we can utilize a bit of a hack:

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应该是当然，移动到实例级属性，以避免在那里重复它们。

The "fontSize", "fill", and "fontFamily" should ideally be moved to an instance-level property of course, to avoid repeating them there.

这是一个修改过的测试 - http://jsfiddle.net/fabricjs/QPDy5/1/

Here's a modified test — http://jsfiddle.net/fabricjs/QPDy5/1/

@Sergiu Paraschiv建议的内容与一个团队是另一个尽可能可行的解决方案。

What @Sergiu Paraschiv suggested with a group is another just-as-viable solution.

这篇关于toSVG方法不能使用Fabric.js在扩展类上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！