diff --git a/src/canvas-2d-shape-renderer.js b/src/canvas-2d-shape-renderer.js index 1a21431..dc334a0 100644 --- a/src/canvas-2d-shape-renderer.js +++ b/src/canvas-2d-shape-renderer.js @@ -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") { @@ -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( @@ -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) { @@ -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( @@ -809,6 +832,13 @@ const shape_renderer_prototype = global.Object.create(Object, { false ); } + this._ctx.globalCompositeOperation = "xor"; + this._drawShape( + cmds, + offsetXUnscaled, + offsetYUnscaled, + false + ); } } } else { diff --git a/src/canvas-2d-text-renderer.js b/src/canvas-2d-text-renderer.js index af696bb..0fae490 100644 --- a/src/canvas-2d-text-renderer.js +++ b/src/canvas-2d-text-renderer.js @@ -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; @@ -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); @@ -670,26 +674,35 @@ 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; @@ -697,9 +710,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(); } if (underline) { this._ctx.beginPath(); @@ -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 diff --git a/src/font-server.js b/src/font-server.js index 2bc03e4..f6f602e 100644 --- a/src/font-server.js +++ b/src/font-server.js @@ -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 = @@ -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) { @@ -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]; diff --git a/src/renderer-main.js b/src/renderer-main.js index 4a969e5..c0568ca 100644 --- a/src/renderer-main.js +++ b/src/renderer-main.js @@ -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 }, @@ -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 }, @@ -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, @@ -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 @@ -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} */ ( @@ -4508,10 +4511,10 @@ const renderer_prototype = global.Object.create(Object, { break; /* case : - this._nativeColorSpace = sabre.ColorSpaces.BT2100_PQ; + this._nativeColorSpace = sabre.NativeColorSpaces.BT2100_PQ; break; case : - this._nativeColorSpace = sabre.ColorSpaces.BT2100_HLG; + this._nativeColorSpace = sabre.NativeColorSpaces.BT2100_HLG; break; */ }