evert/svgcanvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #11 from Validark/main

Browse Source 
Use browser's built-in font parser
This commit is contained in:
Zeno Zeng 2022-03-09 23:00:52 +08:00 committed by GitHub
commit 3573673b60
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
context.js
View File

@ -380,15 +380,15 @@ export default (function () {
* @private
*/
Context.prototype.__applyStyleToCurrentElement = function (type) {
var currentElement = this.__currentElement;
var currentStyleGroup = this.__currentElementsToStyle;
if (currentStyleGroup) {
currentElement.setAttribute(type, "");
currentElement = currentStyleGroup.element;
currentStyleGroup.children.forEach(function (node) {
node.setAttribute(type, "");
})
}
var currentElement = this.__currentElement;
var currentStyleGroup = this.__currentElementsToStyle;
if (currentStyleGroup) {
currentElement.setAttribute(type, "");
currentElement = currentStyleGroup.element;
currentStyleGroup.children.forEach(function (node) {
node.setAttribute(type, "");
})
}
var keys = Object.keys(STYLES), i, style, value, regex, matches, id, nodeIndex, node;
for (i = 0; i < keys.length; i++) {
@ -556,11 +556,11 @@ export default (function () {
* @private
*/
Context.prototype.__applyCurrentDefaultPath = function () {
var currentElement = this.__currentElement;
var currentElement = this.__currentElement;
if (currentElement.nodeName === "path") {
currentElement.setAttribute("d", this.__currentDefaultPath);
currentElement.setAttribute("d", this.__currentDefaultPath);
} else {
console.error("Attempted to apply path command to node", currentElement.nodeName);
console.error("Attempted to apply path command to node", currentElement.nodeName);
}
};
@ -908,52 +908,6 @@ export default (function () {
};
/**
* Parses the font string and returns svg mapping
* @private
*/
Context.prototype.__parseFont = function () {
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;
var fontPart = regex.exec( this.font );
var data = {
style : fontPart[1] || 'normal',
size : fontPart[4] || '10px',
family : fontPart[6] || 'sans-serif',
weight: fontPart[3] || 'normal',
decoration : fontPart[2] || 'normal',
href : null
};
//canvas doesn't support underline natively, but we can pass this attribute
if (this.__fontUnderline === "underline") {
data.decoration = "underline";
}
//canvas also doesn't support linking, but we can pass this as well
if (this.__fontHref) {
data.href = this.__fontHref;
}
return data;
};
/**
* Helper to link text fragments
* @param font
* @param element
* @return {*}
* @private
*/
Context.prototype.__wrapTextLink = function (font, element) {
if (font.href) {
var a = this.__createElement("a");
a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
a.appendChild(element);
return a;
}
return element;
};
/**
* Fills or strokes text
* @param text
@ -963,16 +917,21 @@ export default (function () {
* @private
*/
Context.prototype.__applyText = function (text, x, y, action) {
var font = this.__parseFont(),
var el = document.createElement("span");
el.setAttribute("style", 'font:' + this.font);
var style = el.style, // CSSStyleDeclaration object
parent = this.__closestGroupOrSvg(),
textElement = this.__createElement("text", {
"font-family" : font.family,
"font-size" : font.size,
"font-style" : font.style,
"font-weight" : font.weight,
"text-decoration" : font.decoration,
"x" : x,
"y" : y,
"font-family": style.fontFamily,
"font-size": style.fontSize,
"font-style": style.fontStyle,
"font-weight": style.fontWeight,
// canvas doesn't support underline natively, but we do :)
"text-decoration": this.__fontUnderline,
"x": x,
"y": y,
"text-anchor": getTextAnchor(this.textAlign),
"dominant-baseline": getDominantBaseline(this.textBaseline)
}, true);
@ -981,7 +940,16 @@ export default (function () {
this.__currentElement = textElement;
this.__applyTransformation(textElement);
this.__applyStyleToCurrentElement(action);
parent.appendChild(this.__wrapTextLink(font,textElement));
if (this.__fontHref) {
var a = this.__createElement("a");
// canvas doesn't natively support linking, but we do :)
a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", this.__fontHref);
a.appendChild(textElement);
textElement = a;
}
parent.appendChild(textElement);
};
/**