Skip to content

DrawIt – RoughJS-Based React Drawing App: A modern and fast canvas drawing application. It includes many advanced features such as keyboard shortcuts, text tools, and project save/load.

Notifications You must be signed in to change notification settings

eneserbap/drawIt

Repository files navigation

DrawIt – RoughJS Tabanlı React Çizim Uygulaması ✏️

Modern, ve hızlı bir canvas çizim uygulamasıdır. RoughJS kullanarak “elde çizilmiş” hissi veren şekiller üretir. Klavye kısayolları, metin araçları, proje kaydetme/yükleme gibi birçok gelişmiş özelliğe sahiptir.


🚀 Özellikler

🖍️ Çizim Araçları

  • Pencil (P) – Basit, hızlı serbest çizim
  • Rectangle (R) – RoughJS ile elde çizilmiş dikdörtgen
  • Arrow (A) – Ok çizme (otomatik üçgen başlıklı)
  • Text (T) – Yazı ekleme, canlı imleç
  • Selection (V) – Nesne taşıma
  • Eraser (E) – Nesne silme

🎨 Görsel Özellikler

  • Renk seçme
  • Kalem kalınlığı ayarı
  • Metin boyutu ayarı

💾 Kaydetme & Yükleme

  • Proje kaydetme (.drawit)
  • Proje yükleme
  • PNG / JPEG dışa aktarma

⌨️ Klavye Kısayolları

Kısayol İşlev
P Pencil
R Rectangle
A Arrow
T Text
V Selection
E Eraser
Ctrl + Z Geri al
Delete / Backspace Seçili nesneyi sil
Ctrl + S Export menüsü
? Kısayol menüsü

🛠️ Teknolojiler

  • React
  • RoughJS
  • Lucide-React (ikonlar)
  • Canvas API

📦 Kurulum

git clone https://github.com/eneserbap/drawIt.git
cd project-folder
npm install
npm start

📁 Dosya Yapısı

  • Board.jsx → Tüm çizim mantığı
  • Canvas render + RoughJS entegrasyonu
  • Undo, selection, eraser, text editor, export ve daha fazlası

🖼️ Ekran Görüntüsü

DrawItSS

📝 Lisans

MIT


Canlı Demo

https://drawitt.vercel.app

About

DrawIt – RoughJS-Based React Drawing App: A modern and fast canvas drawing application. It includes many advanced features such as keyboard shortcuts, text tools, and project save/load.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published