Drawnix with shape recognition

[Jufyer]

I would really love a feature that lets you draw a line, hold the mouse button for one second, and have the line automatically snap perfectly straight. This could also work for other shapes, such as squares or triangles.

[pubuzhixing8]

Hi @Jufyer, welcome to the drawnix community, could you explain the feature in detail?

@NaoCoding you could imagine what the feature is?

[NaoCoding]

uhhh. I have no idea, any preview video or something for better understanding?

[Jufyer]

Here is the version good notes uses: https://www.goodnotes.com/blog/shape-recognition

[NaoCoding]

Here is the version good notes uses: https://www.goodnotes.com/blog/shape-recognition

Ohh I see. Automatically make the shape

[Gingiris]

Great feature idea! This is essentially "smooth line stabilization" combined with shape detection — Excalidraw calls it their "rough canvas" approach.

Here is how you could implement it:

1. Stabilization (smooth freehand lines)

• Sample points at regular intervals while drawing
• Apply Ramer-Douglas-Peucker algorithm to simplify the path
• Use bezier curve fitting to smooth corners

2. Shape detection (snap to perfect shapes)

• After drawing ends, compare the simplified path against common shapes (line, rectangle, ellipse, triangle)
• Calculate a "fit score" for each shape
• If the fit score exceeds a threshold (e.g., 85%), auto-convert to the perfect shape
• You can see how Excalidraw does this: https://github.com/excalidraw/excalidraw/blob/master/src/element/shape.ts

3. Hold-to-lock approach

• Track hold duration with pointerdown event
• After 500-800ms of continuous draw, lock the current shape type
• This UX pattern is used by many drawing apps (Procreate, Sketch)

Libraries that help:

• roughjs - renders hand-drawn looking shapes
• perfect-freehand - converts strokes to smooth fills

Would love to see this feature in drawnix! Happy to help with implementation if you open an issue with the API design.