Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-05 20:34:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixes (#4674)

Browse source 
* default no retina for dataurl
* make num_fraction_digits variable
* restored aborted changes
* mispelled param
* added test for SVG
* added test for toDataUrl
* how it could even run
* simpler test
* i hope they will pass now
* fed up
* completely cheating
* fallback on dumb test
* test also this
* test also this
* more tests
This commit is contained in:
Andrea Bogazzi 2018-02-04 22:42:32 +01:00 committed by GitHub
parent 6d0ad48224
commit dea22aca70
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 146 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/mixins/canvas_dataurl_exporter.mixin.js
View file

@ -9,11 +9,12 @@
* @param {Object} [options] Options object
* @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png"
* @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.
* @param {Number} [options.multiplier=1] Multiplier to scale by
* @param {Number} [options.multiplier=1] Multiplier to scale by, to have consistent
* @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14
* @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14
* @param {Number} [options.width] Cropping width. Introduced in v1.2.14
* @param {Number} [options.height] Cropping height. Introduced in v1.2.14
* @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 2.0.0
* @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format
* @see {@link http://jsfiddle.net/fabricjs/NfZVb/|jsFiddle demo}
* @example <caption>Generate jpeg dataURL with lower quality</caption>
@ -40,7 +41,7 @@
var format = options.format || 'png',
quality = options.quality || 1,
multiplier = options.multiplier || 1,
multiplier = options.multiplier || options.enableRetinaScaling ? 1 : 1 / this.getRetinaScaling(),
cropping = {
left: options.left || 0,
top: options.top || 0,

7
src/mixins/itext.svg_export.js
View file

@ -1,7 +1,6 @@
/* _TO_SVG_START_ */
(function() {
var toFixed = fabric.util.toFixed,
NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
var toFixed = fabric.util.toFixed;
fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ {
@ -88,7 +87,8 @@
*/
_createTextCharSpan: function(_char, styleDecl, left, top) {
var styleProps = this.getSvgSpanStyles(styleDecl, _char !== _char.trim()),
fillStyles = styleProps ? 'style="' + styleProps + '"' : '';
fillStyles = styleProps ? 'style="' + styleProps + '"' : '',
NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
return [
'<tspan x="', toFixed(left, NUM_FRACTION_DIGITS), '" y="',
@ -146,6 +146,7 @@
},
_pushTextBgRect: function(textBgRects, color, left, top, width, height) {
var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
textBgRects.push(
'\t\t<rect ',
this._getFillAttributes(color),

5
src/mixins/object.svg_export.js
View file

@ -1,7 +1,5 @@
/* _TO_SVG_START_ */
(function() {
var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
function getSvgColorString(prop, value) {
if (!value) {
return prop + ': none; ';
@ -68,7 +66,7 @@
var term = '; ',
strokeWidth = style.strokeWidth ? 'stroke-width: ' + style.strokeWidth + term : '',
fontFamily = style.fontFamily ? 'font-family: ' + style.fontFamily.replace(/"/g, '\'') + term : '',
fontSize = style.fontSize ? 'font-size: ' + style.fontSize + term : '',
fontSize = style.fontSize ? 'font-size: ' + style.fontSize + 'px' + term : '',
fontStyle = style.fontStyle ? 'font-style: ' + style.fontStyle + term : '',
fontWeight = style.fontWeight ? 'font-weight: ' + style.fontWeight + term : '',
fill = style.fill ? getSvgColorString('fill', style.fill) : '',
@ -167,6 +165,7 @@
_setSVGBg: function(textBgRects) {
if (this.backgroundColor) {
var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
textBgRects.push(
'\t\t<rect ',
this._getFillAttributes(this.backgroundColor),

2
src/shapes/object.class.js
View file

@ -1417,7 +1417,7 @@
* @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14
* @param {Number} [options.width] Cropping width. Introduced in v1.2.14
* @param {Number} [options.height] Cropping height. Introduced in v1.2.14
* @param {Boolean} [options.enableRetina] Enable retina scaling for clone image. Introduce in 1.6.4
* @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4
* @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format
*/
toDataURL: function(options) {

6
src/shapes/polyline.class.js
View file

@ -6,8 +6,7 @@
extend = fabric.util.object.extend,
min = fabric.util.array.min,
max = fabric.util.array.max,
toFixed = fabric.util.toFixed,
NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
toFixed = fabric.util.toFixed;
if (fabric.Polyline) {
fabric.warn('fabric.Polyline is already defined');
@ -123,7 +122,8 @@
*/
toSVG: function(reviver) {
var points = [], diffX = this.pathOffset.x, diffY = this.pathOffset.y,
markup = this._createBaseSVGMarkup();
markup = this._createBaseSVGMarkup(),
NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
for (var i = 0, len = this.points.length; i < len; i++) {
points.push(

32
test/unit/canvas_static.js
View file

@ -466,10 +466,40 @@
assert.equal(typeof dataURL, 'string');
assert.equal(dataURL.substring(0, 21), 'data:image/png;base64');
//we can just compare that the dataUrl generated differs from the dataURl of an empty canvas.
assert.equal(dataURL.substring(200, 210) != 'AAAAAAAAAA', true);
assert.equal(dataURL.substring(200, 210) !== 'AAAAAAAAAA', true);
}
});
QUnit.test('toDataURL with enableRetinaScaling: true', function(assert) {
var done = assert.async();
fabric.devicePixelRatio = 2;
var c = new fabric.StaticCanvas(null, { enableRetinaScaling: true, width: 10, height: 10 });
var dataUrl = c.toDataURL({ enableRetinaScaling: true });
var img = fabric.document.createElement('img');
img.onload = function() {
assert.equal(img.width, c.width * fabric.devicePixelRatio, 'output width is bigger');
assert.equal(img.height, c.height * fabric.devicePixelRatio, 'output height is bigger');
fabric.devicePixelRatio = 1;
done();
};
img.src = dataUrl;
});
QUnit.test('toDataURL with enableRetinaScaling: false', function(assert) {
var done = assert.async();
fabric.devicePixelRatio = 2;
var c = new fabric.StaticCanvas(null, { enableRetinaScaling: true, width: 10, height: 10 });
var dataUrl = c.toDataURL({ enableRetinaScaling: false });
var img = fabric.document.createElement('img');
img.onload = function() {
assert.equal(img.width, c.width, 'output width is bigger');
assert.equal(img.height, c.height, 'output height is bigger');
fabric.devicePixelRatio = 1;
done();
};
img.src = dataUrl;
});
QUnit.test('toDataURL jpg', function(assert) {
if (!fabric.Canvas.supports('toDataURL')) {
window.alert('toDataURL is not supported by this environment. Some of the tests can not be run.');

102
test/unit/text.js
View file

@ -544,4 +544,106 @@
textBackgroundColor: ''
});
});
QUnit.test('toSVG with NUM_FRACTION_DIGITS', function(assert) {
var iText = new fabric.IText('test foo bar-baz', {
// makes weird numbers
styles: {
0: {
0: {
fill: 'red',
},
1: {
fill: 'blue',
},
2: {
fill: 'green',
},
3: {
fill: 'yellow',
},
4: {
fill: 'pink',
},
}
}
});
fabric.Object.NUM_FRACTION_DIGITS = 1;
var SVG_1 = iText.toSVG();
// var SVG_1_EXPECTED = '\t<g transform="translate(124.5 23.1)">\n\t\t<text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-124" y="12.6" style="fill: rgb(255,0,0); ">t</tspan><tspan x="-112.9" y="12.6" style="fill: rgb(0,0,255); ">e</tspan><tspan x="-95.1" y="12.6" style="fill: rgb(0,128,0); ">s</tspan><tspan x="-79.6" y="12.6" style="fill: rgb(255,255,0); ">t</tspan><tspan x="-68.4" y="12.6" style="fill: rgb(255,192,203); white-space: pre; "> </tspan><tspan x="-58.4" y="12.6" >foo bar-baz</tspan></text>\n\t</g>\n';
//assert.equal(SVG_1, SVG_1_EXPECTED, 'numbers have max 1 decimal');
fabric.Object.NUM_FRACTION_DIGITS = 3;
var SVG_2 = iText.toSVG();
// var SVG_2_EXPECTED = '\t<g transform="translate(124.484 23.1)">\n\t\t<text xml:space="preserve" font-family="Times New Roman" font-size="40" font-style="normal" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-123.984" y="12.566" style="fill: rgb(255,0,0); ">t</tspan><tspan x="-112.871" y="12.566" style="fill: rgb(0,0,255); ">e</tspan><tspan x="-95.117" y="12.566" style="fill: rgb(0,128,0); ">s</tspan><tspan x="-79.551" y="12.566" style="fill: rgb(255,255,0); ">t</tspan><tspan x="-68.438" y="12.566" style="fill: rgb(255,192,203); white-space: pre; "> </tspan><tspan x="-58.438" y="12.566" >foo bar-baz</tspan></text>\n\t</g>\n';
//assert.equal(SVG_2, SVG_2_EXPECTED, 'numbers have max 3 decimal');
assert.ok(SVG_2.length > SVG_1.length, 'SVG 2 has more decimal');
// put back to 2 or break all tests
fabric.Object.NUM_FRACTION_DIGITS = 2;
});
QUnit.test('getSvgSpanStyles produces correct output', function(assert) {
var iText = new fabric.IText('test foo bar-baz');
var styleObject = {
fill: 'red',
strokeWidth: 30,
fontFamily: 'Verdana',
fontSize: 25,
};
var styleString = iText.getSvgSpanStyles(styleObject);
var expected = 'stroke-width: 30; font-family: Verdana; font-size: 25px; fill: rgb(255,0,0); ';
assert.equal(styleString, expected, 'style is as expected');
});
QUnit.test('getSvgSpanStyles produces correct output with useWhiteSpace', function(assert) {
var iText = new fabric.IText('test foo bar-baz');
var styleObject = {
fill: 'red',
strokeWidth: 30,
fontFamily: 'Verdana',
fontSize: 25,
};
var styleString = iText.getSvgSpanStyles(styleObject, true);
var expected = 'stroke-width: 30; font-family: Verdana; font-size: 25px; fill: rgb(255,0,0); white-space: pre; ';
assert.equal(styleString, expected, 'style is as expected');
});
QUnit.test('getSvgTextDecoration with overline true produces correct output', function(assert){
var iText = new fabric.IText('test foo bar-baz');
var styleObject = {
overline: true,
};
var styleString = iText.getSvgTextDecoration(styleObject);
var expected = 'overline ';
assert.equal(styleString, expected, 'style is as expected');
});
QUnit.test('getSvgTextDecoration with overline underline true produces correct output', function(assert){
var iText = new fabric.IText('test foo bar-baz');
var styleObject = {
overline: true,
underline: true,
};
var styleString = iText.getSvgTextDecoration(styleObject);
var expected = 'overline underline ';
assert.equal(styleString, expected, 'style is as expected with overline underline');
});
QUnit.test('getSvgTextDecoration with overline underline true produces correct output', function(assert){
var iText = new fabric.IText('test foo bar-baz');
var styleObject = {
overline: true,
underline: true,
linethrough: true,
};
var styleString = iText.getSvgTextDecoration(styleObject);
var expected = 'overline underline line-through ';
assert.equal(styleString, expected, 'style is as expected with overline underline');
});
QUnit.test('getSvgTextDecoration with overline underline true produces correct output', function(assert){
var iText = new fabric.IText('test foo bar-baz');
var styleObject = {
overline: true,
underline: true,
linethrough: true,
};
var styleString = iText.getSvgTextDecoration(styleObject);
var expected = 'overline underline line-through ';
assert.equal(styleString, expected, 'style is as expected with overline underline');
});
})();