forked from fabricjs/fabric.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Adding additional object properties to serialized JSON
RottenFinger edited this page Jan 26, 2016
·
5 revisions
To add additional object properties when serializing objects with JSON.stringify(obj)
and loading with canvas.loadFromJSON(json)
:
-
properties should be returned from
toObject
method offabric.Object
: https://github.com/kangax/fabric.js/blob/master/src/shapes/object.class.js#L803 or fromtoObject
method of a more specific "class". -
properties should be added to
stateProperties
array offabric.Object
: https://github.com/kangax/fabric.js/blob/master/src/shapes/object.class.js#L707 or tostateProperties
of a more specific "class".
Example of adding "lockMovementX", "lockMovementY", "lockRotation", etc.
/**
* Returns an object representation of an instance
* @method toObject
* @return {Object}
*/
toObject: function(propertiesToInclude) {
var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
object = {
type: this.type,
originX: this.originX,
originY: this.originY,
left: toFixed(this.left, NUM_FRACTION_DIGITS),
top: toFixed(this.top, NUM_FRACTION_DIGITS),
width: toFixed(this.width, NUM_FRACTION_DIGITS),
height: toFixed(this.height, NUM_FRACTION_DIGITS),
fill: (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill,
stroke: (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke,
strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS),
strokeDashArray: this.strokeDashArray ? this.strokeDashArray.concat() : this.strokeDashArray,
strokeLineCap: this.strokeLineCap,
strokeLineJoin: this.strokeLineJoin,
strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS),
scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS),
scaleY: toFixed(this.scaleY, NUM_FRACTION_DIGITS),
angle: toFixed(this.getAngle(), NUM_FRACTION_DIGITS),
flipX: this.flipX,
flipY: this.flipY,
opacity: toFixed(this.opacity, NUM_FRACTION_DIGITS),
shadow: (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow,
visible: this.visible,
clipTo: this.clipTo && String(this.clipTo),
backgroundColor: this.backgroundColor,
fillRule: this.fillRule,
globalCompositeOperation: this.globalCompositeOperation,
transformMatrix: this.transformMatrix ? this.transformMatrix.concat() : this.transformMatrix,
skewX: toFixed(this.skewX, NUM_FRACTION_DIGITS),
skewY: toFixed(this.skewY, NUM_FRACTION_DIGITS),
selectable: this.selectable,
lockMovementX:this.lockMovementX,
lockMovementY:this.lockMovementY,
lockScalingX: this.lockScalingX,
lockScalingY: this.lockScalingY,
lockUniScaling: this.lockUniScaling,
lockRotation: this.lockRotation
};
...
stateProperties: (
'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' +
'stroke strokeWidth strokeDashArray strokeLineCap strokeLineJoin strokeMiterLimit ' +
'angle opacity fill fillRule globalCompositeOperation shadow clipTo visible backgroundColor ' +
'alignX alignY meetOrSlice skewX skewY selectable lockMovementX lockMovementY lockScalingX lockScalingY lockUniScaling lockRotation'
).split(' '),