-
-
Notifications
You must be signed in to change notification settings - Fork 923
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The height of the text when using react-konva and konva is not the same, causing the text to appear skewed #1798
Comments
I don't think we can do much from Konva side.
Something like this: const Konva = require('konva');
const { Canvas, DOMMatrix, Image } = require('skia-canvas');
global.DOMMatrix = DOMMatrix;
Konva.Util['createCanvasElement'] = () => {
const node = new Canvas(300, 300);
if (!node['style']) {
node['style'] = {};
}
return node;
}; |
I try the solutions 2 but can't fix :((
|
Does it produce the result? Like you have an image output? |
Well, I don't think there is much to do. Only the first option is left. If nothing works, I would go with puppeteer. |
|
What do you mean by that? You can't use |
I use the native canvas in HTML, and on the server, I use a |
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:
nodejs code:
I am using Nodejs 20.15.0
"konva": "^9.3.14"
"react-konva": "^18.2.10"
The text was updated successfully, but these errors were encountered: