2

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/

私が間違っていることは何ですか?

前もって感謝します。

4

2 に答える 2