mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-04-21 14:34:43 +00:00
Fix loadFromJSON default values for fill and stroke (#3735)
This commit is contained in:
Stefan Kienzle
Andrea Bogazzi
parent
45c868cd2b
commit
79c5d734c8
3 changed files with 134 additions and 41 deletions
|
|
@ -1814,8 +1814,12 @@
|
|||
object = clone(object, true);
|
||||
if (forceAsync) {
|
||||
fabric.util.enlivenPatterns([object.fill, object.stroke], function(patterns) {
|
||||
object.fill = patterns[0];
|
||||
object.stroke = patterns[1];
|
||||
if (typeof patterns[0] !== 'undefined') {
|
||||
object.fill = patterns[0];
|
||||
}
|
||||
if (typeof patterns[1] !== 'undefined') {
|
||||
object.stroke = patterns[1];
|
||||
}
|
||||
var instance = extraParam ? new klass(object[extraParam], object) : new klass(object);
|
||||
callback && callback(instance);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,6 +21,21 @@
|
|||
'["c", 0.877, -9.979, 2.893, -12.905, 4.942, -15.621], ["C", 17.878, 21.775, 18.713, 17.397, 18.511, ' +
|
||||
'13.99], ["z", null]]}], "background": "#ff5555","overlay": "rgba(0,0,0,0.2)"}';
|
||||
|
||||
var PATH_WITHOUT_DEFAULTS_JSON = '{"objects": [{"type": "path", "left": 268, "top": 266, "width": 51, "height": 49, "path": [["M", 18.511, 13.99],' +
|
||||
' ["c", 0, 0, -2.269, -4.487, -12.643, 4.411], ["c", 0, 0, 4.824, -14.161, 19.222, -9.059],' +
|
||||
' ["l", 0.379, -2.1], ["c", -0.759, -0.405, -1.375, -1.139, -1.645, -2.117], ["c", -0.531, ' +
|
||||
'-1.864, 0.371, -3.854, 1.999, -4.453], ["c", 0.312, -0.118, 0.633, -0.169, 0.953, -0.169], ' +
|
||||
'["c", 1.299, 0, 2.514, 0.953, 2.936, 2.455], ["c", 0.522, 1.864, -0.372, 3.854, -1.999, ' +
|
||||
'4.453], ["c", -0.229, 0.084, -0.464, 0.127, -0.692, 0.152], ["l", -0.379, 2.37], ["c", ' +
|
||||
'1.146, 0.625, 2.024, 1.569, 2.674, 2.758], ["c", 3.213, 2.514, 8.561, 4.184, 11.774, -8.232],' +
|
||||
' ["c", 0, 0, 0.86, 16.059, -12.424, 14.533], ["c", 0.008, 2.859, 0.615, 5.364, -0.076, 8.224],' +
|
||||
' ["c", 8.679, 3.146, 15.376, 14.389, 17.897, 18.168], ["l", 2.497, -2.151], ["l", 1.206, 1.839],' +
|
||||
' ["l", -3.889, 3.458], ["C", 46.286, 48.503, 31.036, 32.225, 22.72, 35.81], ["c", -1.307, 2.851,' +
|
||||
' -3.56, 6.891, -7.481, 8.848], ["c", -4.689, 2.336, -9.084, -0.802, -11.277, -2.868], ["l",' +
|
||||
' -1.948, 3.104], ["l", -1.628, -1.333], ["l", 3.138, -4.689], ["c", 0.025, 0, 9, 1.932, 9, 1.932], ' +
|
||||
'["c", 0.877, -9.979, 2.893, -12.905, 4.942, -15.621], ["C", 17.878, 21.775, 18.713, 17.397, 18.511, ' +
|
||||
'13.99], ["z", null]]}], "background": "#ff5555","overlay": "rgba(0,0,0,0.2)"}';
|
||||
|
||||
var PATH_OBJ_JSON = '{"type": "path", "originX": "left", "originY": "top", "left": 268, "top": 266, "width": 51, "height": 49,' +
|
||||
' "fill": "rgb(0,0,0)", "stroke": null, "strokeWidth": 1, "scaleX": 1, "scaleY": 1, ' +
|
||||
'"angle": 0, "flipX": false, "flipY": false, "opacity": 1, "path": [["M", 18.511, 13.99],' +
|
||||
|
|
@ -734,14 +749,14 @@
|
|||
equal(obj.get('width'), 49.803999999999995);
|
||||
equal(obj.get('height'), 48.027);
|
||||
equal(obj.get('fill'), 'rgb(0,0,0)');
|
||||
equal(obj.get('stroke'), null);
|
||||
equal(obj.get('strokeWidth'), 1);
|
||||
equal(obj.get('scaleX'), 1);
|
||||
equal(obj.get('scaleY'), 1);
|
||||
equal(obj.get('angle'), 0);
|
||||
equal(obj.get('flipX'), false);
|
||||
equal(obj.get('flipY'), false);
|
||||
equal(obj.get('opacity'), 1);
|
||||
strictEqual(obj.get('stroke'), null);
|
||||
strictEqual(obj.get('strokeWidth'), 1);
|
||||
strictEqual(obj.get('scaleX'), 1);
|
||||
strictEqual(obj.get('scaleY'), 1);
|
||||
strictEqual(obj.get('angle'), 0);
|
||||
strictEqual(obj.get('flipX'), false);
|
||||
strictEqual(obj.get('flipY'), false);
|
||||
strictEqual(obj.get('opacity'), 1);
|
||||
ok(obj.get('path').length > 0);
|
||||
start();
|
||||
});
|
||||
|
|
@ -761,13 +776,42 @@
|
|||
equal(obj.get('width'), 49.803999999999995);
|
||||
equal(obj.get('height'), 48.027);
|
||||
equal(obj.get('fill'), 'rgb(0,0,0)');
|
||||
equal(obj.get('stroke'), null);
|
||||
equal(obj.get('strokeWidth'), 1);
|
||||
equal(obj.get('scaleX'), 1);
|
||||
equal(obj.get('scaleY'), 1);
|
||||
equal(obj.get('angle'), 0);
|
||||
equal(obj.get('flipX'), false);
|
||||
equal(obj.get('flipY'), false);
|
||||
strictEqual(obj.get('stroke'), null);
|
||||
strictEqual(obj.get('strokeWidth'), 1);
|
||||
strictEqual(obj.get('scaleX'), 1);
|
||||
strictEqual(obj.get('scaleY'), 1);
|
||||
strictEqual(obj.get('angle'), 0);
|
||||
strictEqual(obj.get('flipX'), false);
|
||||
strictEqual(obj.get('flipY'), false);
|
||||
strictEqual(obj.get('opacity'), 1);
|
||||
ok(obj.get('path').length > 0);
|
||||
start();
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('loadFromJSON with json object without default values', function() {
|
||||
canvas.loadFromJSON(JSON.parse(PATH_WITHOUT_DEFAULTS_JSON), function(){
|
||||
var obj = canvas.item(0);
|
||||
|
||||
ok(!canvas.isEmpty(), 'canvas is not empty');
|
||||
equal(obj.type, 'path', 'first object is a path object');
|
||||
equal(canvas.backgroundColor, '#ff5555', 'backgroundColor is populated properly');
|
||||
equal(canvas.overlayColor, 'rgba(0,0,0,0.2)', 'overlayColor is populated properly');
|
||||
|
||||
equal(obj.get('originX'), 'left');
|
||||
equal(obj.get('originY'), 'top');
|
||||
equal(obj.get('left'), 268);
|
||||
equal(obj.get('top'), 266);
|
||||
equal(obj.get('width'), 49.803999999999995);
|
||||
equal(obj.get('height'), 48.027);
|
||||
equal(obj.get('fill'), 'rgb(0,0,0)');
|
||||
strictEqual(obj.get('stroke'), null);
|
||||
strictEqual(obj.get('strokeWidth'), 1);
|
||||
strictEqual(obj.get('scaleX'), 1);
|
||||
strictEqual(obj.get('scaleY'), 1);
|
||||
strictEqual(obj.get('angle'), 0);
|
||||
strictEqual(obj.get('flipX'), false);
|
||||
strictEqual(obj.get('flipY'), false);
|
||||
equal(obj.get('opacity'), 1);
|
||||
ok(obj.get('path').length > 0);
|
||||
start();
|
||||
|
|
@ -796,14 +840,14 @@
|
|||
equal(obj.get('width'), 49.803999999999995);
|
||||
equal(obj.get('height'), 48.027);
|
||||
equal(obj.get('fill'), 'rgb(0,0,0)');
|
||||
equal(obj.get('stroke'), null);
|
||||
equal(obj.get('strokeWidth'), 1);
|
||||
equal(obj.get('scaleX'), 1);
|
||||
equal(obj.get('scaleY'), 1);
|
||||
equal(obj.get('angle'), 0);
|
||||
equal(obj.get('flipX'), false);
|
||||
equal(obj.get('flipY'), false);
|
||||
equal(obj.get('opacity'), 1);
|
||||
strictEqual(obj.get('stroke'), null);
|
||||
strictEqual(obj.get('strokeWidth'), 1);
|
||||
strictEqual(obj.get('scaleX'), 1);
|
||||
strictEqual(obj.get('scaleY'), 1);
|
||||
strictEqual(obj.get('angle'), 0);
|
||||
strictEqual(obj.get('flipX'), false);
|
||||
strictEqual(obj.get('flipY'), false);
|
||||
strictEqual(obj.get('opacity'), 1);
|
||||
equal(obj.get('customID'), 'fabric_1');
|
||||
ok(obj.get('path').length > 0);
|
||||
start();
|
||||
|
|
|
|||
|
|
@ -25,6 +25,21 @@
|
|||
'["c", 0.877, -9.979, 2.893, -12.905, 4.942, -15.621], ["C", 17.878, 21.775, 18.713, 17.397, 18.511, ' +
|
||||
'13.99], ["z", null]]}], "background": "#ff5555", "overlay":"rgba(0,0,0,0.2)"}';
|
||||
|
||||
var PATH_WITHOUT_DEFAULTS_JSON = '{"objects": [{"type": "path", "left": 268, "top": 266, "width": 51, "height": 49, "path": [["M", 18.511, 13.99],' +
|
||||
' ["c", 0, 0, -2.269, -4.487, -12.643, 4.411], ["c", 0, 0, 4.824, -14.161, 19.222, -9.059],' +
|
||||
' ["l", 0.379, -2.1], ["c", -0.759, -0.405, -1.375, -1.139, -1.645, -2.117], ["c", -0.531, ' +
|
||||
'-1.864, 0.371, -3.854, 1.999, -4.453], ["c", 0.312, -0.118, 0.633, -0.169, 0.953, -0.169], ' +
|
||||
'["c", 1.299, 0, 2.514, 0.953, 2.936, 2.455], ["c", 0.522, 1.864, -0.372, 3.854, -1.999, ' +
|
||||
'4.453], ["c", -0.229, 0.084, -0.464, 0.127, -0.692, 0.152], ["l", -0.379, 2.37], ["c", ' +
|
||||
'1.146, 0.625, 2.024, 1.569, 2.674, 2.758], ["c", 3.213, 2.514, 8.561, 4.184, 11.774, -8.232],' +
|
||||
' ["c", 0, 0, 0.86, 16.059, -12.424, 14.533], ["c", 0.008, 2.859, 0.615, 5.364, -0.076, 8.224],' +
|
||||
' ["c", 8.679, 3.146, 15.376, 14.389, 17.897, 18.168], ["l", 2.497, -2.151], ["l", 1.206, 1.839],' +
|
||||
' ["l", -3.889, 3.458], ["C", 46.286, 48.503, 31.036, 32.225, 22.72, 35.81], ["c", -1.307, 2.851,' +
|
||||
' -3.56, 6.891, -7.481, 8.848], ["c", -4.689, 2.336, -9.084, -0.802, -11.277, -2.868], ["l",' +
|
||||
' -1.948, 3.104], ["l", -1.628, -1.333], ["l", 3.138, -4.689], ["c", 0.025, 0, 9, 1.932, 9, 1.932], ' +
|
||||
'["c", 0.877, -9.979, 2.893, -12.905, 4.942, -15.621], ["C", 17.878, 21.775, 18.713, 17.397, 18.511, ' +
|
||||
'13.99], ["z", null]]}], "background": "#ff5555","overlay": "rgba(0,0,0,0.2)"}';
|
||||
|
||||
var PATH_DATALESS_JSON = '{"objects":[{"type":"path","originX":"left","originY":"top","left":100,"top":100,"width":200,"height":200,"fill":"rgb(0,0,0)",' +
|
||||
'"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,' +
|
||||
'"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,' +
|
||||
|
|
@ -938,14 +953,14 @@
|
|||
equal(obj.get('width'), 49.803999999999995);
|
||||
equal(obj.get('height'), 48.027);
|
||||
equal(obj.get('fill'), 'rgb(0,0,0)');
|
||||
equal(obj.get('stroke'), null);
|
||||
equal(obj.get('strokeWidth'), 1);
|
||||
equal(obj.get('scaleX'), 1);
|
||||
equal(obj.get('scaleY'), 1);
|
||||
equal(obj.get('angle'), 0);
|
||||
equal(obj.get('flipX'), false);
|
||||
equal(obj.get('flipY'), false);
|
||||
equal(obj.get('opacity'), 1);
|
||||
strictEqual(obj.get('stroke'), null);
|
||||
strictEqual(obj.get('strokeWidth'), 1);
|
||||
strictEqual(obj.get('scaleX'), 1);
|
||||
strictEqual(obj.get('scaleY'), 1);
|
||||
strictEqual(obj.get('angle'), 0);
|
||||
strictEqual(obj.get('flipX'), false);
|
||||
strictEqual(obj.get('flipY'), false);
|
||||
strictEqual(obj.get('opacity'), 1);
|
||||
ok(obj.get('path').length > 0);
|
||||
start();
|
||||
});
|
||||
|
|
@ -967,14 +982,44 @@
|
|||
equal(obj.get('width'), 49.803999999999995);
|
||||
equal(obj.get('height'), 48.027);
|
||||
equal(obj.get('fill'), 'rgb(0,0,0)');
|
||||
equal(obj.get('stroke'), null);
|
||||
equal(obj.get('strokeWidth'), 1);
|
||||
equal(obj.get('scaleX'), 1);
|
||||
equal(obj.get('scaleY'), 1);
|
||||
equal(obj.get('angle'), 0);
|
||||
equal(obj.get('flipX'), false);
|
||||
equal(obj.get('flipY'), false);
|
||||
equal(obj.get('opacity'), 1);
|
||||
strictEqual(obj.get('stroke'), null);
|
||||
strictEqual(obj.get('strokeWidth'), 1);
|
||||
strictEqual(obj.get('scaleX'), 1);
|
||||
strictEqual(obj.get('scaleY'), 1);
|
||||
strictEqual(obj.get('angle'), 0);
|
||||
strictEqual(obj.get('flipX'), false);
|
||||
strictEqual(obj.get('flipY'), false);
|
||||
strictEqual(obj.get('opacity'), 1);
|
||||
|
||||
ok(obj.get('path').length > 0);
|
||||
start();
|
||||
});
|
||||
});
|
||||
|
||||
asyncTest('loadFromJSON with json object without default values', function() {
|
||||
ok(typeof canvas.loadFromJSON == 'function');
|
||||
|
||||
canvas.loadFromJSON(JSON.parse(PATH_WITHOUT_DEFAULTS_JSON), function(){
|
||||
var obj = canvas.item(0);
|
||||
|
||||
ok(!canvas.isEmpty(), 'canvas is not empty');
|
||||
equal(obj.type, 'path', 'first object is a path object');
|
||||
equal(canvas.backgroundColor, '#ff5555', 'backgroundColor is populated properly');
|
||||
equal(canvas.overlayColor, 'rgba(0,0,0,0.2)', 'overlayColor is populated properly');
|
||||
|
||||
equal(obj.get('left'), 268);
|
||||
equal(obj.get('top'), 266);
|
||||
equal(obj.get('width'), 49.803999999999995);
|
||||
equal(obj.get('height'), 48.027);
|
||||
equal(obj.get('fill'), 'rgb(0,0,0)');
|
||||
strictEqual(obj.get('stroke'), null);
|
||||
strictEqual(obj.get('strokeWidth'), 1);
|
||||
strictEqual(obj.get('scaleX'), 1);
|
||||
strictEqual(obj.get('scaleY'), 1);
|
||||
strictEqual(obj.get('angle'), 0);
|
||||
strictEqual(obj.get('flipX'), false);
|
||||
strictEqual(obj.get('flipY'), false);
|
||||
strictEqual(obj.get('opacity'), 1);
|
||||
|
||||
ok(obj.get('path').length > 0);
|
||||
start();
|
||||
|
|
|
|||
Loading…
Reference in a new issue