diff --git a/examples/textDecorations.js b/examples/textDecorations.js index 85f2f0f16..6879c5748 100644 --- a/examples/textDecorations.js +++ b/examples/textDecorations.js @@ -33,6 +33,16 @@ ct.push({ { text: 'Using colors', decoration: 'underline', decorationStyle: 'wavy', decorationColor: 'green' } ] }); +ct.push(' '); +ct.push({ + columns: [ + { text: 'Stroke width 3', decoration: 'underline', decorationColor: 'blue', decorationStrokeWidth: 3, decorationStyle: 'dashed' }, + { text: 'Stroke width 5', decoration: 'underline', decorationColor: 'red', decorationStrokeWidth: 5, decorationStyle: 'dotted' }, + { text: 'Stroke width 2', decoration: 'underline', decorationColor: 'purple', decorationStrokeWidth: 2, decorationStyle: 'wavy' }, + { text: 'Stroke width 2', decoration: 'underline', decorationColor: 'black', decorationStrokeWidth: 2, decorationStyle: 'double' }, + { text: 'Stroke width 2', decoration: 'lineThrough', decorationColor: 'grey', decorationStrokeWidth: 2 } + ] +}); diff --git a/src/StyleContextStack.js b/src/StyleContextStack.js index ec4d92d09..401d9a5d6 100644 --- a/src/StyleContextStack.js +++ b/src/StyleContextStack.js @@ -93,6 +93,7 @@ class StyleContextStack { 'decoration', 'decorationStyle', 'decorationColor', + 'decorationStrokeWidth', 'background', 'lineHeight', 'characterSpacing', diff --git a/src/TextDecorator.js b/src/TextDecorator.js index f234216ad..f688f5c48 100644 --- a/src/TextDecorator.js +++ b/src/TextDecorator.js @@ -15,6 +15,9 @@ const groupDecorations = line => { } let color = inline.decorationColor || inline.color || 'black'; let style = inline.decorationStyle || 'solid'; + let strokeWidth = typeof inline.decorationStrokeWidth === 'number' + ? inline.decorationStrokeWidth + : null; for (let ii = 0, ll = decoration.length; ii < ll; ii++) { let decorationItem = decoration[ii]; if (!currentGroup || decorationItem !== currentGroup.decoration || @@ -25,6 +28,7 @@ const groupDecorations = line => { decoration: decorationItem, decorationColor: color, decorationStyle: style, + decorationStrokeWidth: strokeWidth, inlines: [inline] }; groups.push(currentGroup); @@ -91,7 +95,9 @@ class TextDecorator { let height = biggerInline.height; let descent = height - ascent; - let lw = 0.5 + Math.floor(Math.max(biggerInline.fontSize - 8, 0) / 2) * 0.12; + let lw = typeof group.decorationStrokeWidth === 'number' + ? group.decorationStrokeWidth + : 0.5 + Math.floor(Math.max(biggerInline.fontSize - 8, 0) / 2) * 0.12; switch (group.decoration) { case 'underline': @@ -109,7 +115,7 @@ class TextDecorator { this.pdfDocument.save(); if (group.decorationStyle === 'double') { - let gap = Math.max(0.5, lw * 2); + let gap = Math.max(1.75, lw * .85 ); this.pdfDocument.fillColor(group.decorationColor) .rect(x + firstInline.x, y - lw / 2, totalWidth, lw / 2).fill() .rect(x + firstInline.x, y + gap - lw / 2, totalWidth, lw / 2).fill(); @@ -136,7 +142,7 @@ class TextDecorator { let nbWaves = Math.ceil(totalWidth / (sh * 2)) + 1; let rwx = x + firstInline.x - 1; this.pdfDocument.rect(x + firstInline.x, y - sv, totalWidth, y + sv).clip(); - this.pdfDocument.lineWidth(0.24); + this.pdfDocument.lineWidth(lw); this.pdfDocument.moveTo(rwx, y); for (let i = 0; i < nbWaves; i++) { this.pdfDocument.bezierCurveTo(rwx + sh, y - sv, rwx + sh * 2, y - sv, rwx + sh * 3, y) diff --git a/src/TextInlines.js b/src/TextInlines.js index 57ee68014..a985c16ac 100644 --- a/src/TextInlines.js +++ b/src/TextInlines.js @@ -118,6 +118,7 @@ class TextInlines { item.decoration = StyleContextStack.getStyleProperty(item, styleContextStack, 'decoration', null); item.decorationColor = StyleContextStack.getStyleProperty(item, styleContextStack, 'decorationColor', null); item.decorationStyle = StyleContextStack.getStyleProperty(item, styleContextStack, 'decorationStyle', null); + item.decorationStrokeWidth = StyleContextStack.getStyleProperty(item, styleContextStack, 'decorationStrokeWidth', null); item.background = StyleContextStack.getStyleProperty(item, styleContextStack, 'background', null); item.link = StyleContextStack.getStyleProperty(item, styleContextStack, 'link', null); item.linkToPage = StyleContextStack.getStyleProperty(item, styleContextStack, 'linkToPage', null);