perfect-freehand
core
perfect-freehand | core | |
---|---|---|
18 | 1 | |
4,316 | 419 | |
- | - | |
4.8 | 9.2 | |
about 2 months ago | over 2 years ago | |
HTML | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
perfect-freehand
-
Ship Shape
The library Canva use for drawing lines may be of interest: https://github.com/steveruizok/perfect-freehand
-
Help with Excalidraw templates
Sorry to hijack this post, but I do habe a similar problem especially regarding the options for smoothing and streamline options. I think those features give me an annoying delay when drawing so I want to tweak them. If Im not mistaken excalidraw is based on perfect freehand and Changing those settings in their web app helps with input delay. Unfortunately these options are not documented in excalidraw (not even in those Videos) and i cant figure out what to change to affect these options. Any tips?
-
Interactive sketches to illustrate SOLID programming principles
It is here https://github.com/steveruizok/perfect-freehand
-
Coding a paint program of sorts, how can I code in pen pressure?
It's all in the title. I've been trying to find an answer for hours now. I want the program to be able to recognise the pressure applied and produce a stroke using that info, kinda like perfect freehand but with python. Can anyone help?
-
Perfect pressure-sensitive drawing for both iOS and Android.
Hi everyone. This is a component for drawing perfect pressure-sensitive freehand lines using perfect-freehand and Skia renderer. It's my first published RN module.
- Ask HN: Any solution to smooth line drawings, maybe converts to bezier?
-
I made a website builder editable with Notion. And you can draw on it.
No drawings are made with SVG. Under the hood, I used this library https://github.com/steveruizok/perfect-freehand
- Perfect Freehand
-
tldraw - a tiny little drawing app, just released!
Thanks! For the pressure sensitive lines, I’m using another open source library that I made called perfect-freehand: https://github.com/steveruizok/perfect-freehand
-
Tldraw – a tiny little drawing app
Yep, I'm a big fan of Excalidraw and am a contributor there too. I also re-implemented the pen tool in Excalidraw to use my digital ink library, perfect freehand (https://github.com/steveruizok/perfect-freehand), which is used extensively in tldraw.
tldraw is a separate project. The big difference is that Excalidraw renders to HTML canvas while tldraw renders to a regular DOM tree. There's a trade off: canvas can have better performance on some machines, while my approach with tldraw makes it easier to implement more complex embedded content. I wouldn't expect any changes, so use whichever you prefer!
core
-
Tldraw – a tiny little drawing app
Hey, author here! Glad folks are enjoying this.
A few notes:
- I post a _lot_ about tldraw on Twitter. If you're curious about how this came together, or want to follow along as we ship new features, check out my timeline (https://twitter.com/steveruizok).
- The whole tldraw project is MIT licensed and open source (https://github.com/tldraw). And it's still in development! If you'd like to contribute, join the Discord channel (https://discord.gg/SBBEVCA4PG) or drop by the repo (https://github.com/tldraw/tldraw).
- The multiplayer is using a pre-release version of Liveblocks (https://liveblocks.io/)—and honestly isn't using it in a very clever way—and so can have some desync issues. Consider this part of the app an early beta.
- We also ship a Visual Studio Code extension that lets you use tldraw inside of VS Code! (https://marketplace.visualstudio.com/items?itemName=tldraw-o...)
A little more about the project itself:
The tldraw project has a few different layers.
At the bottom, there is a renderer named @tldraw/core (https://github.com/tldraw/core) that is essentially a "put React components on a canvas UI" engine. You give it a data model along with a set of utilities to interpret that data model. Simple but very fast, very flexible, and packed with helpers for building these kinds of apps. It's already being used for some pretty ambitious projects apart from tldraw itself.
The main library, @tldraw/tldraw (https://github.com/tldraw/core), exports the whole tldraw "app" as a React component named . This component can be embedded in any React project. It can be controlled either by props or by its own API (ie `app.selectAll().duplicate()`).
The website is a very thin Next.js app that embeds the component.
There are also a few other libraries: @tldraw/vec for the vector math and @tldraw/intersect for intersections. If you like to work on these kinds of projects, definitely bookmark those libraries! They contain a lot of useful code.
As for its development, I've taken off a few months between jobs to work on this full time. Until now, the site has been accessible only to my Github sponsors, but it's now free and open to everyone. If If you'd like to support the project's continued development, you can sponsor me here: https://github.com/sponsors/steveruizok.
I'll answer questions here but if you want to contact me directly, my DMs are open @steveruizok.
What are some alternatives?
vue-demi - 🎩 Creates Universal Library for Vue 2 & 3
react-zoom-pan-pinch - 🖼 React library to support easy zoom, pan, pinch on various html dom elements like <img> and <div>
tldraw - SDK for creating whiteboards and canvas experiences on the web.
react-diagrams - a super simple, no-nonsense diagramming library written in react that just works
excalidraw - Virtual whiteboard for sketching hand-drawn like diagrams
signature_pad - HTML5 canvas based smooth signature drawing
liveblocks - Liveblocks is a platform to ship collaborative features like comments, notifications, text editors in minutes instead of months.
react-native-skia - High-performance React Native Graphics using Skia
perfect-freehand-dart - Draw perfect freehand lines—in Flutter.
react-paint - Paint web app build with react and canvas