lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 06:07:13 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added overline text decoration support

Browse Source
This commit is contained in:
Erik Angerstig 2021-10-11 13:02:58 -05:00
parent a6bbbff406
commit f255db7769
1 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/shapes/Text.ts
View File

@ -132,7 +132,7 @@ function checkDefaultFill(config) {
* @param {Number} [config.fontSize] in pixels. Default is 12 * @param {Number} [config.fontSize] in pixels. Default is 12
* @param {String} [config.fontStyle] can be 'normal', 'bold', 'italic' or even 'italic bold'. Default is 'normal' * @param {String} [config.fontStyle] can be 'normal', 'bold', 'italic' or even 'italic bold'. Default is 'normal'
* @param {String} [config.fontVariant] can be normal or small-caps. Default is normal * @param {String} [config.fontVariant] can be normal or small-caps. Default is normal
* @param {String} [config.textDecoration] can be line-through, underline or empty string. Default is empty string. * @param {String} [config.textDecoration] can be line-through, underline, overline or empty string. Default is empty string.
* @param {String} config.text * @param {String} config.text
* @param {String} [config.align] can be left, center, or right * @param {String} [config.align] can be left, center, or right
* @param {String} [config.verticalAlign] can be top, middle or bottom * @param {String} [config.verticalAlign] can be top, middle or bottom
@ -189,6 +189,7 @@ export class Text extends Shape<TextConfig> {
textDecoration = this.textDecoration(), textDecoration = this.textDecoration(),
shouldUnderline = textDecoration.indexOf('underline') !== -1, shouldUnderline = textDecoration.indexOf('underline') !== -1,
shouldLineThrough = textDecoration.indexOf('line-through') !== -1, shouldLineThrough = textDecoration.indexOf('line-through') !== -1,
shouldOverline = textDecoration.indexOf('overline') !== -1,
n; n;
var translateY = 0; var translateY = 0;
@ -277,6 +278,31 @@ export class Text extends Shape<TextConfig> {
context.stroke(); context.stroke();
context.restore(); context.restore();
} }
if (shouldOverline) {
context.save();
context.beginPath();
context.moveTo(
lineTranslateX,
translateY + lineTranslateY - Math.round(fontSize / 2)
);
spacesNumber = text.split(' ').length - 1;
oneWord = spacesNumber === 0;
lineWidth =
align === JUSTIFY && lastLine && !oneWord
? totalWidth - padding * 2
: width;
context.lineTo(
lineTranslateX + Math.round(lineWidth),
translateY + lineTranslateY - Math.round(fontSize / 2)
);
context.lineWidth = fontSize / 15;
context.strokeStyle = fill;
context.stroke();
context.restore();
}
if (letterSpacing !== 0 || align === JUSTIFY) { if (letterSpacing !== 0 || align === JUSTIFY) {
// var words = text.split(' '); // var words = text.split(' ');
spacesNumber = text.split(' ').length - 1; spacesNumber = text.split(' ').length - 1;
@ -816,7 +842,7 @@ Factory.addGetterSetter(Text, 'letterSpacing', 0, getNumberValidator());
Factory.addGetterSetter(Text, 'text', '', getStringValidator()); Factory.addGetterSetter(Text, 'text', '', getStringValidator());
/** /**
* get/set text decoration of a text. Possible values are 'underline', 'line-through' or combination of these values separated by space * get/set text decoration of a text. Possible values are 'underline', 'line-through', 'overline' or combination of these values separated by space
* @name Konva.Text#textDecoration * @name Konva.Text#textDecoration
* @method * @method
* @param {String} textDecoration * @param {String} textDecoration