Fabric JS - Custom Class - Hyperlink
Fabric JS - Custom Class - Hyperlink
HTML
<a href="https://www.google.com/" target="_blank" id="export-btn">Export SVG</a>
<canvas id="container" width="780" height="500"></canvas>
JavaScript
var LabeledRect = fabric.util.createClass(fabric.Rect, {
type: 'labeledRect',
initialize: function(options) {
options || (options = { });
this.callSuper('initialize', options);
this.set('label', options.label || '');
this.set('mattsLabel', options.mattsLabel || '');
this.set('href', options.href || '');
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
label: this.get('label'),
mattsLabel: this.get('mattsLabel'),
href: this.get('href')
});
},
_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);
ctx.fillText(this.mattsLabel, -this.width/2, -this.height/2 + 40);
},
toSVG: function() {
return this.callSuper('toSVG') +
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'
}).toSVG() +
"<a xlink:href='http://www.yahoo.com'>" +
new fabric.Text(this.mattsLabel,{
originX: 'left',
originY: 'top',
left: this.left - this.width/2,
top: this.top - this.height/2 + 20,
fontSize: 20,
fill: '#FFCCC',
fontFamily: 'Helvetica'
}).toSVG() +
"</a>"
}
});
var canvas = new fabric.Canvas('container');
var labeledRect = new LabeledRect({
width: 100,
height: 50,
left: 100,
top: 100,
label: 'Matts Test',
mattsLabel: '------2nd Label------',
fill: '#faa'
});
canvas.add(labeledRect);
document.getElementById('export-btn').onclick = function()...