Comments (7)
I'm looking at this again. Even with C command support (Bézier curves) it still looks wrong. Looking at the path stream it seems that a TTF creates one long path where as the OTF creates three paths. I see three Z commands (end of path) in the OTF stream and just one in the TTF stream. This explains why the centers are filled. The TTF has a single path so the inside/outside polygon test works correctly. The OTF is essentially drawing three separate polygons: the outside shape of the B, then the first hole, then the second hole. Of course the code doesn't know that these second ones should be holes instead of additional polygons. I'll have to think about how to address this.
from node-pureimage.
Most likely this is an issue with our font parser dependency. What version of opentype.js do you see works correctly?
from node-pureimage.
I have an idea of the root cause (or at least one root cause). It's probably because the text processing code doesn't respect Cubics, only quadratic curves. TrueType only uses Quadratics but I believe newer font types (like open type) use Cubics. I'll add cubics to a branch and see if that fixes it.
from node-pureimage.
This is what it looks like with the patch on the bug_144 branch. Much better, though now we can see that holes are filled
from node-pureimage.
Most likely this is an issue with our font parser dependency. What version of opentype.js do you see works correctly?
Not sure about the exact version of opentype.js I tested with. Just opened https://opentype.js.org/, chose the font file, and checked the render result.
from node-pureimage.
Can you see if the current release fixes your issues?
from node-pureimage.
Not fixed. The results seem the same.
Font: Inter-Regular v3.019
PureImage Version: 0.3.15
Node Version: 18.12.1
from node-pureimage.
Related Issues (20)
- [feature] createConicGradient missing
- Path is distorted
- Please support lineCap
- Transparent background HOT 2
- Create a virtual Canvas (without `canvas#data` object)
- Image transparency overwrites existing content
- Error: export 'make' (imported as 'PImage') was not found in 'pureimage' (module has no exports) HOT 7
- [feature request] setting the encode option (e.g. PNG compression level) HOT 4
- Can this run on the browser? HOT 2
- NPM packages are missing TypeScript types HOT 6
- make() is deprecated HOT 2
- Setting background colour on large canvas takes a LONG time HOT 3
- Error [ERR_MODULE_NOT_FOUND]: Cannot find package in version 0.4.11 HOT 4
- NPM version 0.4.11 is missing the dist folder. HOT 2
- fillText problem HOT 3
- strokeRect doesn't respect lineWidth HOT 1
- very bad performance HOT 5
- Filled counters in text
- lineTo stops without success or error
- Fails to import pureimage with moduleResolution: nodenext
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from node-pureimage.