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です..
私が間違っていることは何ですか?
前もって感謝します。