Skip to content

Commit 3573673

Browse files
zenozengzenozeng
authored
Merge pull request #11 from Validark/main
Use browser's built-in font parser
2 parents 519719e + 8a221b2 commit 3573673

File tree

1 file changed

+57
-89
lines changed

1 file changed

+57
-89
lines changed

‎context.js

+57-89
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ export default (function () {
293293

294294
/**
295295
* Log
296-
*
296+
*
297297
* @private
298298
*/
299299
Context.prototype.__debug = function(...data) {
@@ -380,15 +380,15 @@ export default (function () {
380380
* @private
381381
*/
382382
Context.prototype.__applyStyleToCurrentElement = function (type) {
383-
var currentElement = this.__currentElement;
384-
var currentStyleGroup = this.__currentElementsToStyle;
385-
if (currentStyleGroup) {
386-
currentElement.setAttribute(type, "");
387-
currentElement = currentStyleGroup.element;
388-
currentStyleGroup.children.forEach(function (node) {
389-
node.setAttribute(type, "");
390-
})
391-
}
383+
var currentElement = this.__currentElement;
384+
var currentStyleGroup = this.__currentElementsToStyle;
385+
if (currentStyleGroup) {
386+
currentElement.setAttribute(type, "");
387+
currentElement = currentStyleGroup.element;
388+
currentStyleGroup.children.forEach(function (node) {
389+
node.setAttribute(type, "");
390+
})
391+
}
392392

393393
var keys = Object.keys(STYLES), i, style, value, regex, matches, id, nodeIndex, node;
394394
for (i = 0; i < keys.length; i++) {
@@ -531,7 +531,7 @@ export default (function () {
531531
if (this.__transformMatrixStack && this.__transformMatrixStack.length > 0) {
532532
this.setTransform(this.__transformMatrixStack.pop())
533533
}
534-
534+
535535
};
536536

537537
/**
@@ -556,11 +556,11 @@ export default (function () {
556556
* @private
557557
*/
558558
Context.prototype.__applyCurrentDefaultPath = function () {
559-
var currentElement = this.__currentElement;
559+
var currentElement = this.__currentElement;
560560
if (currentElement.nodeName === "path") {
561-
currentElement.setAttribute("d", this.__currentDefaultPath);
561+
currentElement.setAttribute("d", this.__currentDefaultPath);
562562
} else {
563-
console.error("Attempted to apply path command to node", currentElement.nodeName);
563+
console.error("Attempted to apply path command to node", currentElement.nodeName);
564564
}
565565
};
566566

@@ -585,7 +585,7 @@ export default (function () {
585585
// creates a new subpath with the given point
586586
this.__currentPosition = {x: x, y: y};
587587
this.__addPathCommand(format("M {x} {y}", {
588-
x: this.__matrixTransform(x, y).x,
588+
x: this.__matrixTransform(x, y).x,
589589
y: this.__matrixTransform(x, y).y
590590
}));
591591
};
@@ -606,12 +606,12 @@ export default (function () {
606606
this.__currentPosition = {x: x, y: y};
607607
if (this.__currentDefaultPath.indexOf('M') > -1) {
608608
this.__addPathCommand(format("L {x} {y}", {
609-
x: this.__matrixTransform(x, y).x,
609+
x: this.__matrixTransform(x, y).x,
610610
y: this.__matrixTransform(x, y).y
611611
}));
612612
} else {
613613
this.__addPathCommand(format("M {x} {y}", {
614-
x: this.__matrixTransform(x, y).x,
614+
x: this.__matrixTransform(x, y).x,
615615
y: this.__matrixTransform(x, y).y
616616
}));
617617
}
@@ -628,7 +628,7 @@ export default (function () {
628628
cp1y: this.__matrixTransform(cp1x, cp1y).y,
629629
cp2x: this.__matrixTransform(cp2x, cp2y).x,
630630
cp2y: this.__matrixTransform(cp2x, cp2y).y,
631-
x: this.__matrixTransform(x, y).x,
631+
x: this.__matrixTransform(x, y).x,
632632
y: this.__matrixTransform(x, y).y
633633
}));
634634
};
@@ -639,9 +639,9 @@ export default (function () {
639639
Context.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
640640
this.__currentPosition = {x: x, y: y};
641641
this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {
642-
cpx: this.__matrixTransform(cpx, cpy).x,
642+
cpx: this.__matrixTransform(cpx, cpy).x,
643643
cpy: this.__matrixTransform(cpx, cpy).y,
644-
x: this.__matrixTransform(x, y).x,
644+
x: this.__matrixTransform(x, y).x,
645645
y: this.__matrixTransform(x, y).y
646646
}));
647647
};
@@ -908,52 +908,6 @@ export default (function () {
908908

909909
};
910910

911-
/**
912-
* Parses the font string and returns svg mapping
913-
* @private
914-
*/
915-
Context.prototype.__parseFont = function () {
916-
var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i;
917-
var fontPart = regex.exec( this.font );
918-
var data = {
919-
style : fontPart[1] || 'normal',
920-
size : fontPart[4] || '10px',
921-
family : fontPart[6] || 'sans-serif',
922-
weight: fontPart[3] || 'normal',
923-
decoration : fontPart[2] || 'normal',
924-
href : null
925-
};
926-
927-
//canvas doesn't support underline natively, but we can pass this attribute
928-
if (this.__fontUnderline === "underline") {
929-
data.decoration = "underline";
930-
}
931-
932-
//canvas also doesn't support linking, but we can pass this as well
933-
if (this.__fontHref) {
934-
data.href = this.__fontHref;
935-
}
936-
937-
return data;
938-
};
939-
940-
/**
941-
* Helper to link text fragments
942-
* @param font
943-
* @param element
944-
* @return {*}
945-
* @private
946-
*/
947-
Context.prototype.__wrapTextLink = function (font, element) {
948-
if (font.href) {
949-
var a = this.__createElement("a");
950-
a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
951-
a.appendChild(element);
952-
return a;
953-
}
954-
return element;
955-
};
956-
957911
/**
958912
* Fills or strokes text
959913
* @param text
@@ -963,16 +917,21 @@ export default (function () {
963917
* @private
964918
*/
965919
Context.prototype.__applyText = function (text, x, y, action) {
966-
var font = this.__parseFont(),
920+
var el = document.createElement("span");
921+
el.setAttribute("style", 'font:' + this.font);
922+
923+
var style = el.style, // CSSStyleDeclaration object
967924
parent = this.__closestGroupOrSvg(),
968925
textElement = this.__createElement("text", {
969-
"font-family" : font.family,
970-
"font-size" : font.size,
971-
"font-style" : font.style,
972-
"font-weight" : font.weight,
973-
"text-decoration" : font.decoration,
974-
"x" : x,
975-
"y" : y,
926+
"font-family": style.fontFamily,
927+
"font-size": style.fontSize,
928+
"font-style": style.fontStyle,
929+
"font-weight": style.fontWeight,
930+
931+
// canvas doesn't support underline natively, but we do :)
932+
"text-decoration": this.__fontUnderline,
933+
"x": x,
934+
"y": y,
976935
"text-anchor": getTextAnchor(this.textAlign),
977936
"dominant-baseline": getDominantBaseline(this.textBaseline)
978937
}, true);
@@ -981,7 +940,16 @@ export default (function () {
981940
this.__currentElement = textElement;
982941
this.__applyTransformation(textElement);
983942
this.__applyStyleToCurrentElement(action);
984-
parent.appendChild(this.__wrapTextLink(font,textElement));
943+
944+
if (this.__fontHref) {
945+
var a = this.__createElement("a");
946+
// canvas doesn't natively support linking, but we do :)
947+
a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", this.__fontHref);
948+
a.appendChild(textElement);
949+
textElement = a;
950+
}
951+
952+
parent.appendChild(textElement);
985953
};
986954

987955
/**
@@ -1055,7 +1023,7 @@ export default (function () {
10551023
xAxisRotation:0,
10561024
largeArcFlag:largeArcFlag,
10571025
sweepFlag:sweepFlag,
1058-
endX: this.__matrixTransform(endX, endY).x,
1026+
endX: this.__matrixTransform(endX, endY).x,
10591027
endY: this.__matrixTransform(endX, endY).y
10601028
}));
10611029

@@ -1209,9 +1177,9 @@ export default (function () {
12091177
};
12101178

12111179
/**
1212-
* SetTransform changes the current transformation matrix to
1180+
* SetTransform changes the current transformation matrix to
12131181
* the matrix given by the arguments as described below.
1214-
*
1182+
*
12151183
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform
12161184
*/
12171185
Context.prototype.setTransform = function (a, b, c, d, e, f) {
@@ -1225,7 +1193,7 @@ export default (function () {
12251193
/**
12261194
* GetTransform Returns a copy of the current transformation matrix,
12271195
* as a newly created DOMMAtrix Object
1228-
*
1196+
*
12291197
* @returns A DOMMatrix Object
12301198
*/
12311199
Context.prototype.getTransform = function () {
@@ -1235,21 +1203,21 @@ export default (function () {
12351203

12361204
/**
12371205
* ResetTransform resets the current transformation matrix to the identity matrix
1238-
*
1206+
*
12391207
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform
12401208
*/
12411209
Context.prototype.resetTransform = function () {
12421210
this.setTransform(1, 0, 0, 1, 0, 0);
12431211
};
12441212

12451213
/**
1246-
* Add the scaling transformation described by the arguments to the current transformation matrix.
1247-
*
1248-
* @param x The x argument represents the scale factor in the horizontal direction
1214+
* Add the scaling transformation described by the arguments to the current transformation matrix.
1215+
*
1216+
* @param x The x argument represents the scale factor in the horizontal direction
12491217
* @param y The y argument represents the scale factor in the vertical direction.
12501218
* @see https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-scale
12511219
*/
1252-
Context.prototype.scale = function (x, y) {
1220+
Context.prototype.scale = function (x, y) {
12531221
if (y === undefined) {
12541222
y = x;
12551223
}
@@ -1263,7 +1231,7 @@ export default (function () {
12631231

12641232
/**
12651233
* Rotate adds a rotation to the transformation matrix.
1266-
*
1234+
*
12671235
* @param angle The rotation angle, clockwise in radians. You can use degree * Math.PI / 180 to calculate a radian from a degree.
12681236
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate
12691237
* @see https://www.w3.org/TR/css-transforms-1
@@ -1282,7 +1250,7 @@ export default (function () {
12821250

12831251
/**
12841252
* Translate adds a translation transformation to the current matrix.
1285-
*
1253+
*
12861254
* @param x Distance to move in the horizontal direction. Positive values are to the right, and negative to the left.
12871255
* @param y Distance to move in the vertical direction. Positive values are down, and negative are up.
12881256
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate
@@ -1293,9 +1261,9 @@ export default (function () {
12931261
};
12941262

12951263
/**
1296-
* Transform multiplies the current transformation with the matrix described by the arguments of this method.
1264+
* Transform multiplies the current transformation with the matrix described by the arguments of this method.
12971265
* This lets you scale, rotate, translate (move), and skew the context.
1298-
*
1266+
*
12991267
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
13001268
*/
13011269
Context.prototype.transform = function (a, b, c, d, e, f) {
@@ -1308,7 +1276,7 @@ export default (function () {
13081276
}
13091277

13101278
/**
1311-
*
1279+
*
13121280
* @param {*} sx The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
13131281
* @param {*} sy The y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
13141282
* @param {*} sw The width of the rectangle from which the ImageData will be extracted. Positive values are to the right, and negative to the left.

0 commit comments

Comments
 (0)