headline-editor-canvas v1.1.0

Canvas Editor Project

Türkçe

Bu proje, Next.js tabanlı bir canvas düzenleme uygulamasıdır. Kullanıcılar, interaktif bir arayüz üzerinden çeşitli nesneleri manipüle edebilir ve özelleştirebilir. Bu uygulama, canvas üzerinde çalışan bir çizim kütüphanesi olan Fabric.js'i kullanmaktadır.

English

This project is a Next.js-based canvas editing application. Users can manipulate and customize various objects through an interactive interface. This application uses Fabric.js, a drawing library that works on canvas.

Kullanılan Teknolojiler

• Next.js: React tabanlı web uygulama çerçevesi
• TypeScript: Tip güvenliği için JavaScript üzerine inşa edilmiş programlama dili
• Tailwind CSS: Hızlı UI geliştirme için utility-first CSS framework
• Canvas API: Dinamik, scriptable çizim için kullanılan web teknolojisi
• Fabric.js: Canvas üzerine inşa edilmiş, JavaScript ile çalışan bir çizim kütüphanesi.
• Shadcn UI: React için bir UI kütüphanesi.

Technologies Used

• Next.js: React-based web application framework
• TypeScript: A programming language built on JavaScript for type safety
• Tailwind CSS: A utility-first CSS framework for rapid UI development
• Canvas API: Web technology used for dynamic, scriptable drawing
• Fabric.js: A JavaScript drawing library built on top of Canvas
• Shadcn UI: A UI library for React

Başlangıç

Projeyi yerel ortamınızda çalıştırmak için:

npm install
npm run dev

Tarayıcınızda http://localhost:3000 adresini açarak uygulamayı görüntüleyebilirsiniz.

Getting Started

To run the project in your local environment:

npm install
npm run dev

You can view the application by opening http://localhost:3000 in your browser.

Özellikler

• İnteraktif canvas düzenleme
• Nesne seçimi ve manipülasyonu
• Özelleştirilebilir ayarlar
• Responsive tasarım
• Resim yükleme
• Yazı düzenleme
• Dikdörtgen, Çember, Yazı, Resim

Features

• Interactive canvas editing
• Object selection and manipulation
• Customizable settings
• Responsive design
• Image uploading
• Text editing
• Rectangle, Circle, Text, Image

License

MIT

Headline Editor Canvas

A React component for creating and editing news headline images with a canvas-based editor.

Installation

You can install the package using npm:

npm install @bugrakaann/headline-editor-canvas

Or using yarn:

yarn add @bugrakaann/headline-editor-canvas

Or using pnpm:

pnpm add @bugrakaann/headline-editor-canvas

Usage

import { HeadlineEditorCanvas } from "@bugrakaann/headline-editor-canvas";

function App() {
  return (
    <div>
      <HeadlineEditorCanvas />
    </div>
  );
}

Features

• Canvas-based image editor
• Text manipulation
• Image upload and manipulation
• Background color customization
• Font selection
• Export functionality
• Responsive design

Props

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT