Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/subbotinroman/pixiskia-app

Приложение для создания графики. Позволяет рисовать различные фигуры, добавлять изображения и сохранять результат в PDF-файл высокого качества.
https://github.com/subbotinroman/pixiskia-app

canvas pixi-js skia typescript vite

Last synced: 25 days ago
JSON representation

Приложение для создания графики. Позволяет рисовать различные фигуры, добавлять изображения и сохранять результат в PDF-файл высокого качества.

Host: GitHub
URL: https://github.com/subbotinroman/pixiskia-app
Owner: SubbotinRoman
License: mit
Created: 2025-01-02T22:52:59.000Z (28 days ago)
Default Branch: main
Last Pushed: 2025-01-02T23:12:53.000Z (28 days ago)
Last Synced: 2025-01-03T00:19:19.055Z (28 days ago)
Topics: canvas, pixi-js, skia, typescript, vite
Language: TypeScript
Homepage: https://subbotinroman.github.io/PixiSkia-App/
Size: 493 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.txt

Awesome Lists containing this project

README

# PixiSkia-App (TypeScript / Pixi.js / Skia)

## Обзор 🌟

Приложение для создания графики. Позволяет рисовать различные фигуры, добавлять изображения и сохранять результат в PDF-файл высокого качества. Использует современные технологии Pixi.js и Skia для быстрой и качественной работы с графикой.

### [Посмотреть демо](https://subbotinroman.github.io/PixiSkia-App/) 👈

PixiSkia-App preview

---

## Стек технологий ⚙️

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
![Pixi.js](https://img.shields.io/badge/pixi.js-orange.svg?style=for-the-badge)
![Skia](https://img.shields.io/badge/Skia-Canvas-blue.svg?style=for-the-badge)
![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)

---

## Возможности 🚀

- 🎨 Отображение графики через две системы (Pixi.js и Skia)
- 📐 Поддержка трансформаций (сдвиг, поворот, масштабирование)
- 🖼️ Отрисовка векторных фигур и изображений
- 🖱️ Взаимодействие с элементами через клики мышью
- 📄 Сохранение результата в PDF высокого качества
- 🔄 Переключение между разными наборами фигур
- ⚡ Быстрая работа благодаря Vite

---

## Как запустить локально 💻

1. Клонируйте репозиторий:
```bash
git clone https://github.com/SubbotinRoman/PixiSkia-App.git
```

2. Перейдите в папку с проектом:
```bash
cd PixiSkia-App
```

3. Установите зависимости:
```bash
npm install
```

4. Запустите сервер разработки:
```bash
npm run dev
```

5. Откройте в браузере:
```
http://localhost:3000/PixiSkia-App/
```
---

## Использование 🎮

1. Интерфейс приложения содержит два canvas:
- Левый canvas: отображение графики через Pixi.js
- Правый canvas: отображение графики через Skia

2. Доступные действия:
- Кнопка "Сгенерировать случайную линию / фигуру": добавляет новый случайный элемент
- Кнопка "Экспорт в PNG": сохраняет все нарисованные фигуры в PDF-файл
- Кнопка "Переключить контейнер": показывает другой набор готовых фигур

3. Интерактивность:
- Клик по элементам
- Обработка нажатий мыши

---

## Структура проекта 📁

- `src/`
- `main.ts` - основной файл приложения
- `SkiaRenderer.ts` - обертка для отображения графики через Skia
- `types.ts` - TypeScript типы и интерфейсы

---

## Требования 📋

- Node.js 16+
- npm или yarn