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

fix underline for experimental render

Browse Source
This commit is contained in:
Anton Lavrenov 2024-05-20 19:23:37 -05:00
parent d089066a30
commit 07bdf49bfd
2 changed files with 19 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/shapes/Text.ts
View File

@ -261,18 +261,17 @@ export class Text extends Shape<TextConfig> {
context.save();
context.beginPath();
context.moveTo(
lineTranslateX,
translateY + lineTranslateY + Math.round(fontSize / 2)
);
let yOffset = Konva._fixTextRendering
? Math.round(fontSize / 4)
: Math.round(fontSize / 2);
const x = lineTranslateX;
const y = translateY + lineTranslateY + yOffset;
context.moveTo(x, y);
spacesNumber = text.split(' ').length - 1;
oneWord = spacesNumber === 0;
lineWidth =
align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
context.lineTo(
lineTranslateX + Math.round(lineWidth),
translateY + lineTranslateY + Math.round(fontSize / 2)
);
context.lineTo(x + Math.round(lineWidth), y);
// I have no idea what is real ratio
// just /15 looks good enough
@ -286,7 +285,8 @@ export class Text extends Shape<TextConfig> {
if (shouldLineThrough) {
context.save();
context.beginPath();
context.moveTo(lineTranslateX, translateY + lineTranslateY);
let yOffset = Konva._fixTextRendering ? -Math.round(fontSize / 4) : 0;
context.moveTo(lineTranslateX, translateY + lineTranslateY + yOffset);
spacesNumber = text.split(' ').length - 1;
oneWord = spacesNumber === 0;
lineWidth =
@ -295,7 +295,7 @@ export class Text extends Shape<TextConfig> {
: width;
context.lineTo(
lineTranslateX + Math.round(lineWidth),
translateY + lineTranslateY
translateY + lineTranslateY + yOffset
);
context.lineWidth = fontSize / 15;
const gradient = this._getLinearGradient();

67
test/sandbox.html
View File

@ -30,11 +30,11 @@
<script type="module">
import Konva from '../src/index.ts';
Konva._fixTextRendering = true;
var stageWidth = window.innerWidth;
var stageHeight = window.innerHeight;
Konva._fixTextRendering = true;
var stage = new Konva.Stage({
container: 'container',
width: stageWidth,
@ -44,65 +44,16 @@
var layer = new Konva.Layer();
stage.add(layer);
// Stage Background
var background = new Konva.Rect({
width: stageWidth,
height: stageHeight,
x: 0,
y: 0,
fill: 'red',
});
layer.add(background);
// Text Item
var text = new Konva.Text({
text: 'testtest',
x: 50,
y: 25,
// width: 400,
// height: 200,
fontSize: 64,
// verticalAlign: 'middle',
align: 'center',
fontFamily: 'Times New Roman',
// textBaseline: 'alphabetic',
x: 10,
y: 10,
text: 'Simple Text',
fontSize: 300,
fontFamily: 'Calibri',
fill: 'green',
textDecoration: 'underline line-through',
});
layer.add(text);
// Top line lining up perfect in MAC OSX CHROME, inline with top of text
var topLine = new Konva.Line({
points: [125, 103, 400, 103],
stroke: 'green',
strokeWidth: 1,
});
layer.add(topLine);
// Bottom line lining up perfect in MAC OSX CHROME, inline with bottom of text
var bottomLine = new Konva.Line({
points: [125, 143, 400, 143],
stroke: 'green',
strokeWidth: 1,
});
layer.add(bottomLine);
layer.draw();
// Get text bounding box
var textRect = text.getClientRect();
// Create overlay text
var overlayText = document.createElement('div');
overlayText.id = 'overlayText';
overlayText.style.position = 'absolute';
overlayText.style.left = textRect.x + 'px';
overlayText.style.top = textRect.y + 'px';
overlayText.style.width = textRect.width + 'px';
overlayText.style.height = textRect.height + 'px';
overlayText.style.lineHeight = textRect.height + 'px'; // Center vertically
overlayText.style.textAlign = 'center';
overlayText.style.fontSize = '64px';
overlayText.innerHTML = 'testtest';
document.getElementById('container').appendChild(overlayText);
</script>
</body>
</html>