lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 06:55:17 +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

2614
konva.js
View File

File diff suppressed because it is too large Load Diff

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

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

@ -662,7 +662,7 @@ describe('Text', function () {
if (isBrowser) {
assert.equal(
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 {
// use relax, because in GitHub Actions calculations are too different