Skip to content

Commit

Permalink
Add support for variable fonts.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ILOVEPIE
ILOVEPIE committed May 29, 2024
1 parent b5194a7 commit 21da9b6
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 25 deletions.
30 changes: 30 additions & 0 deletions src/canvas-2d-shape-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ const shape_renderer_prototype = global.Object.create(Object, {
value: function _init () {
const options = Object.freeze({
"alpha": true,
"colorSpace": "srgb",
"desynchronized": true
});
if (typeof global.OffscreenCanvas === "undefined") {
Expand Down Expand Up @@ -770,6 +771,13 @@ const shape_renderer_prototype = global.Object.create(Object, {
offsetYUnscaled,
false
);
this._ctx.globalCompositeOperation = "xor";
this._drawShape(
cmds,
offsetXUnscaled,
offsetYUnscaled,
false
);
} else {
for (let i = -outline_x; i <= outline_x; i++) {
this._drawShape(
Expand All @@ -779,6 +787,14 @@ const shape_renderer_prototype = global.Object.create(Object, {
false
);
}
this._ctx.globalCompositeOperation = "xor";
this._drawShape(
cmds,
offsetXUnscaled,
offsetYUnscaled,
false
);

}
} else {
if (outline_gt_zero) {
Expand All @@ -800,6 +816,13 @@ const shape_renderer_prototype = global.Object.create(Object, {
offsetYUnscaled,
false
);
this._ctx.globalCompositeOperation = "xor";
this._drawShape(
cmds,
offsetXUnscaled,
offsetYUnscaled,
false
);
} else {
for (let i = -outline_y; i <= outline_y; i++) {
this._drawShape(
Expand All @@ -809,6 +832,13 @@ const shape_renderer_prototype = global.Object.create(Object, {
false
);
}
this._ctx.globalCompositeOperation = "xor";
this._drawShape(
cmds,
offsetXUnscaled,
offsetYUnscaled,
false
);
}
}
} else {
Expand Down
41 changes: 27 additions & 14 deletions src/canvas-2d-text-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,9 @@ const text_renderer_prototype = global.Object.create(Object, {
this._fontInfo = {};
this._fontInfo.name = fontName;
this._fontInfo.font = font;
this._fontInfo.requestedItalic = fontItalicized;
this._fontInfo.foundItalic = foundItalic;
this._fontInfo.requestedWeight = fontWeight;
this._fontInfo.foundWeight = foundWeight;
this._fontInfo.size = fontSize;
this._fontInfo.weight = fontWeight;
Expand Down Expand Up @@ -628,7 +630,9 @@ const text_renderer_prototype = global.Object.create(Object, {
pixelScaleRatio: this._pixelScaleRatio,
fontName: this._fontInfo.name,
fontSize: this._fontInfo.size,
rFontWeight: this._fontInfo.requestedWeight,
fontWeight: this._fontInfo.weight,
rFontItalic: this._fontInfo.requestedItalic,
fontItalic: this._fontInfo.italic
};
return sabre.hashObject(state);
Expand Down Expand Up @@ -670,36 +674,45 @@ const text_renderer_prototype = global.Object.create(Object, {
* @param {boolean} underline if true, underline text, if false do nothing.
*/
value: function _drawGlyph (glyph, offsetX, offsetY, stroke, strikethrough, underline) {
const glyphbb = glyph.getBoundingBox();
const fontSize = this._fontInfo.size;
const fontUnitsScale = this._fontInfo.font.unitsPerEm || 1000;
const fontSizeMultiplier = fontSize / fontUnitsScale;
const yoffset =
this._fontInfo.font.ascender * fontSizeMultiplier;
const options = {}
options["variation"] = {};
options["variation"]["wght"] = this._fontInfo.requestedWeight;
options["variation"]["ital"] = this._fontInfo.requestedItalic?1:0;
options["fill"] = this._ctx.fillStyle;
options["stroke"] = this._ctx.strokeStyle;
options["strokeWidth"] = this._ctx.lineWidth;
const path = glyph.getPath(
offsetX,
offsetY + yoffset,
fontSize
fontSize,
options,
this._fontInfo.font
);
path.fill = null;
path.stroke = null;
path.draw(this._ctx);
if (stroke) {
this._ctx.stroke();
//this._ctx.fill();
} else {
this._ctx.fill();
const glyphbb = path.getBoundingBox();
if(!stroke){
path.fill = this._ctx.fillStyle;
path.stroke = null;
}else{
path.stroke = this._ctx.strokeStyle;
path.strokeWidth = this._ctx.lineWidth;
path.fill = this._ctx.strokeStyle;
}
path.draw(this._ctx);
if (strikethrough) {
this._ctx.beginPath();
const size = this._fontInfo.strikethroughSize * fontSizeMultiplier;
const position = this._fontInfo.strikethroughPosition * fontSizeMultiplier;
this._ctx.rect(offsetX + Math.min(glyphbb.x1, 0) * fontSizeMultiplier, offsetY + yoffset - position, glyph.advanceWidth * fontSizeMultiplier, size);
if (stroke) {
this._ctx.stroke();
} else {
this._ctx.fill();
this._ctx.fillStyle = this._ctx.strokeStyle;
}
this._ctx.fill();
}
if (underline) {
this._ctx.beginPath();
Expand All @@ -708,9 +721,9 @@ const text_renderer_prototype = global.Object.create(Object, {
this._ctx.rect(offsetX + Math.min(glyphbb.x1, 0) * fontSizeMultiplier, offsetY + yoffset - position, glyph.advanceWidth * fontSizeMultiplier, size);
if (stroke) {
this._ctx.stroke();
} else {
this._ctx.fill();
this._ctx.fillStyle = this._ctx.strokeStyle;
}
this._ctx.fill();
}
},
writable: false
Expand Down
11 changes: 11 additions & 0 deletions src/font-server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ const font_server_prototype = Object.create(Object, {
if (this._fontMapping[name]) return this._fontMapping[name];
let results = [];
for (let i = 0; i < this._fonts.length; i++) {
if(!this._fonts[i]) continue;
let addFont = false;
const nameTable = this._fonts[i].tables.name;
const fontFamily =
Expand Down Expand Up @@ -136,6 +137,9 @@ const font_server_prototype = Object.create(Object, {
if((fontFamily+" "+fontSubfamily).toLowerCase().trim() === name){
addFont = true;
}
}else if(this._fonts[i].variation){
if(name.startsWith(fontFamily.toLowerCase().trim()))
addFont = true;
}
}
if (preferredFamily) {
Expand All @@ -145,11 +149,18 @@ const font_server_prototype = Object.create(Object, {
if((preferredFamily+" "+preferredSubfamily).toLowerCase().trim() === name){
addFont = true;
}
}else if(this._fonts[i].variation){
if(name.startsWith(preferredFamily.toLowerCase().trim()))
addFont = true;
}
}
if (fullName) {
if (fullName.toLowerCase().trim() === nameTypes)
addFont = true;
else if(this._fonts[i].variation){
if(name.startsWith(fullName.toLowerCase().trim()))
addFont = true;
}
}
if (addFont) {
const font = this._fonts[i];
Expand Down
25 changes: 14 additions & 11 deletions src/renderer-main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,7 @@ const renderer_prototype = global.Object.create(Object, {
*/
value: function _getCacheWidth () {
const pixelRatio = sabre.getPixelRatio();
return Math.min(this._compositingCanvas.width*2,global.screen.width*pixelRatio);
return Math.min(this._compositingCanvas.width*2,Math.max(this._compositingCanvas.width*2,global.screen.width*pixelRatio));
},
writable: false
},
Expand All @@ -386,7 +386,7 @@ const renderer_prototype = global.Object.create(Object, {
*/
value: function _getCacheHeight () {
const pixelRatio = sabre.getPixelRatio();
return Math.min(this._compositingCanvas.height*2,global.screen.height*pixelRatio);
return Math.min(this._compositingCanvas.height*2,Math.max(this._compositingCanvas.height*2,global.screen.height*pixelRatio));
},
writable: false
},
Expand Down Expand Up @@ -3168,7 +3168,10 @@ const renderer_prototype = global.Object.create(Object, {
this._clearCache();
allocationInfo = this._allocateCacheSpace(cacheInfo.textureDimensions[0],cacheInfo.textureDimensions[1],extraSpace);
}
[cacheInfo.x,cacheInfo.y,cacheInfo.width,cacheInfo.height] = allocationInfo;
cacheInfo.x = allocationInfo[0];
cacheInfo.y = allocationInfo[1];
cacheInfo.width = allocationInfo[2];
cacheInfo.height = allocationInfo[3];
this._loadGlyphToVram(source, this._textureSubtitleBounds);
this._gl.bindBuffer(
this._gl.ARRAY_BUFFER,
Expand Down Expand Up @@ -4401,10 +4404,10 @@ const renderer_prototype = global.Object.create(Object, {
}
if (blendDisabled) {
this._gl.enable(this._gl.BLEND);
this._gl.blendFunc(
this._gl.SRC_ALPHA,
this._gl.ONE_MINUS_SRC_ALPHA
);
this._gl.blendFunc(
this._gl.SRC_ALPHA,
this._gl.ONE_MINUS_SRC_ALPHA
);
}
},
writable: false
Expand Down Expand Up @@ -4444,9 +4447,9 @@ const renderer_prototype = global.Object.create(Object, {
return _this._findFont(name, weight, italic);
};
this._textRenderer.setRequestFont(requestFont);
this._textRenderer.setScaledOutlineAndShadowEnabled(config.renderer["scaled_border_and_shadow"]);
this._textRenderer.setScaledOutlineAndShadowEnabled(config.renderer["scaled_border_and_shadow"]??false);
this._textMaskRenderer.setRequestFont(requestFont);
this._textMaskRenderer.setScaledOutlineAndShadowEnabled(config.renderer["scaled_border_and_shadow"]);
this._textMaskRenderer.setScaledOutlineAndShadowEnabled(config.renderer["scaled_border_and_shadow"]??false);
this._config = config;
this._scheduler.setEvents(
/** @type {Array<SSASubtitleEvent>} */ (
Expand Down Expand Up @@ -4508,10 +4511,10 @@ const renderer_prototype = global.Object.create(Object, {
break;
/*
case <BT.2100's PQ string here>:
this._nativeColorSpace = sabre.ColorSpaces.BT2100_PQ;
this._nativeColorSpace = sabre.NativeColorSpaces.BT2100_PQ;
break;
case <BT.2100's HLG string here>:
this._nativeColorSpace = sabre.ColorSpaces.BT2100_HLG;
this._nativeColorSpace = sabre.NativeColorSpaces.BT2100_HLG;
break;
*/
}
Expand Down

0 comments on commit 21da9b6

Please sign in to comment.