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

add more accurate way to measure text width and height

Browse Source
This commit is contained in:
Alex Khizhnyi 2021-06-24 09:40:23 +03:00
parent 0236496cd7
commit 9bff5e654e
No known key found for this signature in database
GPG Key ID: 2F49EC28E91C847D
4 changed files with 1322 additions and 1322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v8.0.4 * Konva JavaScript Framework v8.0.4
* http://konvajs.org/ * http://konvajs.org/
* Licensed under the MIT * Licensed under the MIT
* Date: Tue Jun 08 2021 * Date: Thu Jun 24 2021
* *
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -13393,14 +13393,14 @@
* @returns {Object} { width , height} of measured text * @returns {Object} { width , height} of measured text
*/ */
measureSize(text) { measureSize(text) {
var _context = getDummyContext(), fontSize = this.fontSize(), metrics; const context = getDummyContext();
_context.save(); context.save();
_context.font = this._getContextFont(); context.font = this._getContextFont();
metrics = _context.measureText(text); const metrics = context.measureText(text);
_context.restore(); context.restore();
return { return {
width: metrics.width, width: Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight),
height: fontSize, height: Math.abs(metrics.actualBoundingBoxAscent) + Math.abs(metrics.actualBoundingBoxDescent),
}; };
} }
_getContextFont() { _getContextFont() {

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

24
src/shapes/Text.ts
View File

@ -92,12 +92,12 @@ function normalizeFontFamily(fontFamily: string) {
.join(', '); .join(', ');
} }
var dummyContext; var dummyContext: CanvasRenderingContext2D;
function getDummyContext() { function getDummyContext() {
if (dummyContext) { if (dummyContext) {
return dummyContext; return dummyContext;
} }
dummyContext = Util.createCanvasElement().getContext(CONTEXT_2D); dummyContext = Util.createCanvasElement().getContext(CONTEXT_2D) as CanvasRenderingContext2D;
return dummyContext; return dummyContext;
} }
@ -363,21 +363,21 @@ export class Text extends Shape<TextConfig> {
* @param {String} [text] text to measure * @param {String} [text] text to measure
* @returns {Object} { width , height} of measured text * @returns {Object} { width , height} of measured text
*/ */
measureSize(text) { measureSize(text: string) {
var _context = getDummyContext(), const context = getDummyContext();
fontSize = this.fontSize(),
metrics;
_context.save(); context.save();
_context.font = this._getContextFont(); context.font = this._getContextFont();
const metrics = context.measureText(text);
context.restore();
metrics = _context.measureText(text);
_context.restore();
return { return {
width: metrics.width, width: Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight),
height: fontSize, height: Math.abs(metrics.actualBoundingBoxAscent) + Math.abs(metrics.actualBoundingBoxDescent),
}; };
} }
_getContextFont() { _getContextFont() {
return ( return (
this.fontStyle() + this.fontStyle() +

2
test/unit/Text-test.ts
View File

@ -662,7 +662,7 @@ describe('Text', function () {
if (isBrowser) { if (isBrowser) {
assert.equal( assert.equal(
layer.getContext().getTrace(false, true), layer.getContext().getTrace(false, true),
"clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);shadowColor=rgba(255,0,0,0.5);shadowBlur=1;shadowOffsetX=10;shadowOffsetY=10;font=normal normal 16px Calibri;textBaseline=middle;textAlign=left;translate(20,20);save();fillStyle=#555;fillText(HEADING,133,8);restore();save();fillStyle=#555;fillText(,170,24);restore();save();fillStyle=#555;fillText(All the world's a stage, and all the men and women,6,40);restore();save();fillStyle=#555;fillText(merely players. They have their exits and their,21,56);restore();save();fillStyle=#555;fillText(entrances; And one man in his time plays many,18,72);restore();save();fillStyle=#555;fillText(parts.,152,88);restore();restore();" "clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);shadowColor=rgba(255,0,0,0.5);shadowBlur=1;shadowOffsetX=10;shadowOffsetY=10;font=normal normal 16px Calibri;textBaseline=middle;textAlign=left;translate(20,20);save();fillStyle=#555;fillText(HEADING,139,8);restore();save();fillStyle=#555;fillText(,170,24);restore();save();fillStyle=#555;fillText(All the world's a stage, and all the men and women,4,40);restore();save();fillStyle=#555;fillText(merely players. They have their exits and their,20,56);restore();save();fillStyle=#555;fillText(entrances; And one man in his time plays many,17,72);restore();save();fillStyle=#555;fillText(parts.,151,88);restore();restore();"
); );
} else { } else {
// use relax, because in GitHub Actions calculations are too different // use relax, because in GitHub Actions calculations are too different