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

font fixes. close #910

Browse Source
This commit is contained in:
Anton Lavrenov 2020-06-25 12:18:31 -05:00
parent 0bbae02bb4
commit 08d1ca7c5f
6 changed files with 230 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -3,8 +3,6 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/). This project adheres to [Semantic Versioning](http://semver.org/).
## Not released:
## 7.0.0 - 2020-06-23 ## 7.0.0 - 2020-06-23
* **BREAKING** `inherit` option is removed from `visible` and `listening`. They now just have boolean values `true` or `false`. If you do `group.listening(false);` then whole group and all its children will be removed from the hitGraph (and they will not listen to events). Probably 99% `Konva` applications will be not affected by this *breaking change*. * **BREAKING** `inherit` option is removed from `visible` and `listening`. They now just have boolean values `true` or `false`. If you do `group.listening(false);` then whole group and all its children will be removed from the hitGraph (and they will not listen to events). Probably 99% `Konva` applications will be not affected by this *breaking change*.

20
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v7.0.0 * Konva JavaScript Framework v7.0.0
* http://konvajs.org/ * http://konvajs.org/
* Licensed under the MIT * Licensed under the MIT
* Date: Tue Jun 23 2020 * Date: Thu Jun 25 2020
* *
* 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)
@ -13274,6 +13274,20 @@
], ],
// cached variables // cached variables
attrChangeListLen$1 = ATTR_CHANGE_LIST$1.length; attrChangeListLen$1 = ATTR_CHANGE_LIST$1.length;
function normalizeFontFamily(fontFamily) {
return fontFamily
.split(',')
.map(function (family) {
family = family.trim();
var hasSpace = family.indexOf(' ') >= 0;
var hasQuotes = family.indexOf('"') >= 0 || family.indexOf("'") >= 0;
if (hasSpace && !hasQuotes) {
family = "\"" + family + "\"";
}
return family;
})
.join(', ');
}
var dummyContext$1; var dummyContext$1;
function getDummyContext$1() { function getDummyContext$1() {
if (dummyContext$1) { if (dummyContext$1) {
@ -13586,9 +13600,7 @@
SPACE$1 + SPACE$1 +
(this.fontSize() + PX_SPACE) + (this.fontSize() + PX_SPACE) +
// wrap font family into " so font families with spaces works ok // wrap font family into " so font families with spaces works ok
'"' + normalizeFontFamily(this.fontFamily()));
this.fontFamily() +
'"');
}; };
Text.prototype._addTextLine = function (line) { Text.prototype._addTextLine = function (line) {
if (this.align() === JUSTIFY) { if (this.align() === JUSTIFY) {

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

21
src/shapes/Text.ts
View File

@ -64,6 +64,22 @@ var AUTO = 'auto',
], ],
// cached variables // cached variables
attrChangeListLen = ATTR_CHANGE_LIST.length; attrChangeListLen = ATTR_CHANGE_LIST.length;
function normalizeFontFamily(fontFamily: string) {
return fontFamily
.split(',')
.map((family) => {
family = family.trim();
const hasSpace = family.indexOf(' ') >= 0;
const hasQuotes = family.indexOf('"') >= 0 || family.indexOf("'") >= 0;
if (hasSpace && !hasQuotes) {
family = `"${family}"`;
}
return family;
})
.join(', ');
}
var dummyContext; var dummyContext;
function getDummyContext() { function getDummyContext() {
if (dummyContext) { if (dummyContext) {
@ -361,6 +377,7 @@ export class Text extends Shape<TextConfig> {
this.fontFamily() this.fontFamily()
); );
} }
return ( return (
this.fontStyle() + this.fontStyle() +
SPACE + SPACE +
@ -368,9 +385,7 @@ export class Text extends Shape<TextConfig> {
SPACE + SPACE +
(this.fontSize() + PX_SPACE) + (this.fontSize() + PX_SPACE) +
// wrap font family into " so font families with spaces works ok // wrap font family into " so font families with spaces works ok
'"' + normalizeFontFamily(this.fontFamily())
this.fontFamily() +
'"'
); );
} }
_addTextLine(line) { _addTextLine(line) {

165
test/performance/jump-text.html Normal file
View File

@ -0,0 +1,165 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../../konva.js"></script>
<!-- <script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script> -->
<script src="http://www.html5canvastutorials.com/lib/stats/stats.js"></script>
<script defer="defer">
var lastTime = 0;
var width = window.innerWidth;
var height = window.innerHeight;
var bunnys = [];
var gravity = 0.75;
var maxX = width - 10;
var minX = 0;
var maxY = height - 10;
var minY = 0;
var startBunnyCount = 4000;
var isAdding = false;
var count = 0;
var container;
var layer;
var stats;
var amount = 10;
var counter;
Konva.pixelRatio = 1;
var stage = new Konva.Stage({
container: 'container',
width: width - 10,
height: height - 10,
});
layer = new Konva.Layer({ listening: false });
stage.add(layer);
stats = new Stats();
document.body.appendChild(stats.domElement);
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
window.requestAnimationFrame(update);
counter = document.createElement('div');
counter.className = 'counter';
counter.style.position = 'absolute';
counter.style.top = '50px';
document.body.appendChild(counter);
count = startBunnyCount;
counter.innerHTML = startBunnyCount + ' ELEMENTS';
container = stage;
// stage.addChild(container);
stage.on('mousedown', function () {
isAdding = true;
});
stage.on('mouseup', function () {
isAdding = false;
});
document.addEventListener('touchstart', onTouchStart, true);
document.addEventListener('touchend', onTouchEnd, true);
for (var i = 0; i < startBunnyCount; i++) {
var bunny = new Konva.Text({
transformsEnabled: 'position',
x: 10,
y: 10,
perfectDrawEnabled: false,
text: 'text',
});
bunny.speedX = Math.random() * 10;
bunny.speedY = Math.random() * 10 - 5;
bunnys.push(bunny);
layer.add(bunny);
}
function onTouchStart(event) {
isAdding = true;
}
function onTouchEnd(event) {
isAdding = false;
}
function update() {
stats.begin();
if (isAdding) {
// add 10 at a time :)
for (var i = 0; i < amount; i++) {
var bunny = new Konva.Text({
transformsEnabled: 'position',
x: 10,
y: 10,
perfectDrawEnabled: false,
text: 'text',
});
bunny.speedX = Math.random() * 10;
bunny.speedY = Math.random() * 10 - 5;
bunnys.push(bunny);
layer.add(bunny);
count++;
}
counter.innerHTML = count + ' BUNNIES';
}
for (var i = 0; i < bunnys.length; i++) {
var bunny = bunnys[i];
var pos = {
x: bunny.x(),
y: bunny.y(),
};
pos.x = pos.x + bunny.speedX;
pos.y = pos.y + bunny.speedY;
bunny.speedY += gravity;
if (pos.x > maxX - 20) {
bunny.speedX *= -1;
pos.x = maxX - 20;
} else if (pos.x < minX) {
bunny.speedX *= -1;
pos.x = minX;
}
if (pos.y > maxY - 20) {
bunny.speedY *= -0.85;
pos.y = maxY - 20;
if (Math.random() > 0.5) {
bunny.speedY -= Math.random() * 6;
}
} else if (pos.y < minY) {
bunny.speedY = 0;
pos.y = minY;
}
bunny.position({
x: pos.x,
y: pos.y,
});
}
layer.draw();
requestAnimationFrame(update);
stats.end();
}
</script>
</body>
</html>

32
test/unit/shapes/Text-test.js
View File

@ -559,7 +559,33 @@ suite('Text', function () {
stage.add(layer); stage.add(layer);
var trace = var trace =
'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px "Arial";textBaseline=middle;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,80);lineTo(189,80);stroke();restore();fillStyle=red;fillText(h,0,40);fillStyle=red;fillText(e,49,40);fillStyle=red;fillText(l,98,40);fillStyle=red;fillText(l,121,40);fillStyle=red;fillText(o,144,40);restore();save();save();beginPath();moveTo(0,160);lineTo(211,160);stroke();restore();fillStyle=red;fillText(w,0,120);fillStyle=red;fillText(o,63,120);fillStyle=red;fillText(r,112,120);fillStyle=red;fillText(l,144,120);fillStyle=red;fillText(d,167,120);restore();restore();'; 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,80);lineTo(189,80);stroke();restore();fillStyle=red;fillText(h,0,40);fillStyle=red;fillText(e,49,40);fillStyle=red;fillText(l,98,40);fillStyle=red;fillText(l,121,40);fillStyle=red;fillText(o,144,40);restore();save();save();beginPath();moveTo(0,160);lineTo(211,160);stroke();restore();fillStyle=red;fillText(w,0,120);fillStyle=red;fillText(o,63,120);fillStyle=red;fillText(r,112,120);fillStyle=red;fillText(l,144,120);fillStyle=red;fillText(d,167,120);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
// ======================================================
test('test text with crazy font families', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var text = new Konva.Text({
text: 'hello',
fontFamily: 'Arial',
});
layer.add(text);
layer.draw();
text.fontFamily('Font Awesome');
layer.draw();
text.fontFamily('Font Awesome, Arial');
layer.draw();
text.fontFamily('"Font Awesome", Arial');
layer.draw();
var trace =
'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);font=normal normal 12px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(hello,0,6);restore();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);font=normal normal 12px "Font Awesome";textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(hello,0,6);restore();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);font=normal normal 12px "Font Awesome", Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(hello,0,6);restore();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);font=normal normal 12px "Font Awesome", Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(hello,0,6);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace); assert.equal(layer.getContext().getTrace(), trace);
}); });
@ -703,7 +729,7 @@ suite('Text', function () {
stage.add(layer); stage.add(layer);
var trace = var trace =
'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);beginPath();rect(0,0,200,100);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,10,10);font=normal normal 16px "Arial";textBaseline=middle;textAlign=left;translate(10,42);save();fillStyle=#555;fillText(Some awesome text,17.523,8);restore();restore();'; 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);beginPath();rect(0,0,200,100);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,10,10);font=normal normal 16px Arial;textBaseline=middle;textAlign=left;translate(10,42);save();fillStyle=#555;fillText(Some awesome text,17.523,8);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace); assert.equal(layer.getContext().getTrace(), trace);
}); });
@ -942,7 +968,7 @@ suite('Text', function () {
// this text should look like it is positioned in y = 40 // this text should look like it is positioned in y = 40
var trace = var trace =
'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();rect(0,0,100,120);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,0,0);font=normal normal 40px "Arial";textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(Some good text,0,60);restore();restore();'; 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();rect(0,0,100,120);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,0,0);font=normal normal 40px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(Some good text,0,60);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace); assert.equal(layer.getContext().getTrace(), trace);
}); });