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

An interactive graphics application that combines PixiJS and Skia engines. Create, edit and export high-quality graphics with features like custom shapes, image manipulation, and professional-grade PDF export capabilities.
https://github.com/subbotinroman/pixiskia-app

canvas pixi-js skia typescript vite

Last synced: about 2 months ago
JSON representation

An interactive graphics application that combines PixiJS and Skia engines. Create, edit and export high-quality graphics with features like custom shapes, image manipulation, and professional-grade PDF export capabilities.

• Host: GitHub
• URL: https://github.com/subbotinroman/pixiskia-app
• Owner: SubbotinRoman
• License: mit
• Created: 2025-01-02T22:52:59.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-04T20:46:27.000Z (over 1 year ago)
• Last Synced: 2025-09-13T15:51:19.508Z (10 months ago)
• Topics: canvas, pixi-js, skia, typescript, vite
• Language: TypeScript
• Homepage: https://subbotinroman.github.io/PixiSkia-App/
• Size: 498 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/) 👈







---

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

![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