Custom SVG Object in fabric.js
Custom SVG Object
HTML
<script src="https://github.com/kangax/fabric.js/blob/master/dist/fabric.js"></script>
<button id="btnAddSVG">1 - Add SVG</button>
<button id="btnAddCustomSVG">2 - Add Custom SVG</button>
<button id="btnSerializeToJSON">3 - Serialize to JSON</button>
<button id="btnConsoleLogJSON">4 - console.log(json)</button>
<button id="btnClearCanvas">5 - Clear Canvas</button>
<button id="btnRestore">6 - Restore</button>
<canvas id="canvas" width="400" height="400"></canvas>
CSS
canvas{
border-width: 1px;
border-style: solid;
border-color: #333;
}
JavaScript
var src = 'http://fabricjs.com/assets/9.svg';
var src2 = 'http://fabricjs.com/assets/10.svg';
var json;
var canvas = new fabric.Canvas("canvas");
//////////////////////////////////////////////////////////////
// create CustomSVG class from Path class
// extends Path putting "possibleColors" atribute (array of strings - hexadecimal colors)
// cria classe customizável de svg
fabric.CustomSVG = fabric.util.createClass(fabric.Path, {
type: 'custom-svg',
initialize: function(paths, options) {
this.callSuper('initialize', paths, options);
options && this.set('possibleColors', options.possibleColors);
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'),
{possibleColors: this.possibleColors}
);
}
});
fabric.CustomSVG.fromObject = function(object) {
var paths = instantiatePaths(object.paths);
return new fabric.CustomSVG(object.paths, object);
};
fabric.CustomSVG.async = false;
function instantiatePaths(paths) {
for (var i = 0, len = paths.length; i < len; i++) {
if (!(paths[i] instanceof fabric.Object)) {
var klassName = camelize(capitalize(paths[i].type));
paths[i] = fabric[klassName].fromObject(paths[i]);
}
}
return paths;
}
///////////////////////////////////////////////////////////////
$("#btnAddSVG").click(function(){
fabric.loadSVGFromURL(src, function(objects, options) {
var object;
if (objects.length > 1) {
object = new fabric.PathGroup(objects, options);
}
else {
object = objects[0];
}
object.set({left: 0, top: 0});
object.hasRotatingPoint = true;
canvas.add(object);
canvas.renderAll();
});
});
$("#btnAddCustomSVG").click(function(){
fabric.loadSVGFromURL(src2, function(objects, options) {
...