Closed
Description
I want to use react-konva to preview and drag text. Additionally, I plan to use konva in a Node.js server to render a PDF file with thousands of pages. However, when I render a test page, there is a problem: the height of some fonts is not consistent. As a result, the text "hg" with a custom font appears skewed.
Is there anything else you need help with?
image in react web:
image in nodejs server:
My custom font I use is SVN-Pateglamt-Script, you can download at:
https://drive.google.com/file/d/1YmEdMiq4H5ESV7503EN8ZDjHjMun9shO/view?usp=sharing
This is my code in react version and nodejs version:
React code:
import React, { useState } from "react";
import { Stage, Layer, Text } from "react-konva";
import "./App.css";
const widthGiay = 1240;
const heightGiay = 874;
function App() {
const stageRef = React.useRef(null);
return (
<div>
<div
style={{
width: widthGiay,
height: heightGiay,
border: "1px solid red"
}}
>
<Stage width={widthGiay} height={heightGiay} ref={stageRef}>
<Layer>
<Text
text="Hg"
x={0}
y={0}
fontFamily="Calibri"
fontSize={360}
draggable
/>
<Text
text="Hg"
x={500}
y={0}
fontFamily="SVN-Pateglamt-Script"
fontSize={360}
draggable
/>
</Layer>
</Stage>
</div>
</div>
);
}
export default App;
nodejs code:
import { registerFont } from "canvas";
import Konva from "konva";
var stage = new Konva.Stage({
width: 1240,
height: 874,
});
// add canvas element
var layer = new Konva.Layer();
stage.add(layer);
registerFont("./fonts/SVN-Pateglamt-Script.ttf", {
family: "SVN-Pateglamt-Script",
});
var simpleText = new Konva.Text({
x: 0,
y: 0,
text: "Hg",
fontSize: 360,
fontFamily: "Calibri",
});
var simpleText2 = new Konva.Text({
x: 500,
y: 0,
text: "Hg",
fontSize: 360,
fontFamily: "SVN-Pateglamt-Script",
draggable: true,
});
layer.add(simpleText);
layer.add(simpleText2);
console.log("uri", stage.toDataURL());
I am using Nodejs 20.15.0
"konva": "^9.3.14"
"react-konva": "^18.2.10"
Metadata
Metadata
Assignees
Labels
No labels