React.js – Тема 12 – Courses WebSkill

Тема 12. React.js Painting App

Створення Додатку для малювання

Новий додаток
Форматування
Файли та папки

Створення React.js додатку, введення команд в консоль
D: або C: - переключення між дисками
cd - переходимо в необхідну вам папку
npx create-react-app назва додатку - створення нового React.js проєкту
npx create-react-app - сама команда створення
назва додатку - назва папки в якій буде додаток
cd назва додатку - переходимо в створену папку

Видаляємо непотрібні файли, чистимо index.js та App.js від непотрібних команд
Видаляємо файли: setupTests.js,repor,WebVitals.js,logo.svg,index.css,App.test.js
З файлу index.js видаляємо такі рядки
import './index.css'; import reportWebVitals from './reportWebVitals'; reportWebVitals();
Та коментарі: // If you want...
З файлу App.js видаляємо import logo from './logo.svg';
Тег <div className="app"> і все що всередині нього

В папці src залишаємо лише такі файли:
App.js, App.css, index.js
Одразу можете створити папку Components - папка для компонентів наших файлів

Скопіюйте стилізацію нижче та замініть її в файлі App.css

Інформація

Робимо заміну всієї стилізації в файлі App.css на свою, яку копіювали вище

Початок роботи із App.js та іншими файлами

Інформація

Короткий опис: Цей код створює простий додаток для малювання за допомогою HTML-канваса та React.js. Користувач може малювати на канвасі за допомогою миші, вибрати колір та розмір пензля, а також очистити канвас за допомогою кнопки "Clear".
1. Добавити новий компонент DrawingApp.j одразу підключіть та виведіть їх в App.js
2. Нижче код кожного із файлів, вставте цей код у свої створені файли.

import React, { useState, useRef, useEffect } from 'react';

import './App.css'; // Підключаємо CSS файл для стилізації

const DrawingApp = () => {

const canvasRef = useRef(null);

const [ctx, setCtx] = useState(null);

const [drawing, setDrawing] = useState(false);

const [color, setColor] = useState('#000000');

const [brushSize, setBrushSize] = useState(5);

useEffect(() => {

const canvas = canvasRef.current;

const context = canvas.getContext('2d');

setCtx(context);

}, []);

const startDrawing = (event) => {

setDrawing(true);

const { offsetX, offsetY } = event.nativeEvent;

ctx.beginPath();

ctx.moveTo(offsetX, offsetY);

};

const draw = (event) => {

if (!drawing) return;

const { offsetX, offsetY } = event.nativeEvent;

ctx.lineTo(offsetX, offsetY);

ctx.strokeStyle = color;

ctx.lineWidth = brushSize;

ctx.stroke();

};

const endDrawing = () => {

setDrawing(false);

ctx.closePath();

};

const clearCanvas = () => {

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

};

return (

<div className="drawing-container"> {/* Додаємо клас для контейнера */}

<canvas

ref={canvasRef}

width={800}

height={600}

onMouseDown={startDrawing}

onMouseMove={draw}

onMouseUp={endDrawing}

onMouseLeave={endDrawing}

className="drawing-canvas" // Додаємо клас для канвасу

<div className="controls"> {/* Додаємо контейнер для елементів управління */}

<input

type="color"

value={color}

onChange={(e) => setColor(e.target.value)}

className="color-picker" // Додаємо клас для інпута з кольором

<input

type="range"

min={1}

max={20}

value={brushSize}

onChange={(e) => setBrushSize(e.target.value)}

className="brush-size-slider" // Додаємо клас для інпута з розміром пензля

<button onClick={clearCanvas} className="clear-button">Clear</button> {/* Додаємо клас для кнопки очищення */}

</div>

);

};

export default DrawingApp;

import React, { useState, useRef, useEffect } from 'react';
import './App.css'; // Підключаємо CSS файл для стилізації

const DrawingApp = () => {
  const canvasRef = useRef(null);
  const [ctx, setCtx] = useState(null);
  const [drawing, setDrawing] = useState(false);
  const [color, setColor] = useState('#000000');
  const [brushSize, setBrushSize] = useState(5);

useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    setCtx(context);
  }, []);

const startDrawing = (event) => {
    setDrawing(true);
    const { offsetX, offsetY } = event.nativeEvent;
    ctx.beginPath();
    ctx.moveTo(offsetX, offsetY);
  };

const draw = (event) => {
    if (!drawing) return;
    const { offsetX, offsetY } = event.nativeEvent;
    ctx.lineTo(offsetX, offsetY);
    ctx.strokeStyle = color;
    ctx.lineWidth = brushSize;
    ctx.stroke();
  };

const endDrawing = () => {
    setDrawing(false);
    ctx.closePath();
  };

const clearCanvas = () => {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  };

return (
    <div className="drawing-container"> {/* Додаємо клас для контейнера */}
      <canvas
        ref={canvasRef}
        width={800}
        height={600}
        onMouseDown={startDrawing}
        onMouseMove={draw}
        onMouseUp={endDrawing}
        onMouseLeave={endDrawing}
        className="drawing-canvas" // Додаємо клас для канвасу
      />
      <div className="controls"> {/* Додаємо контейнер для елементів управління */}
        <input
          type="color"
          value={color}
          onChange={(e) => setColor(e.target.value)}
          className="color-picker" // Додаємо клас для інпута з кольором
        />
        <input
          type="range"
          min={1}
          max={20}
          value={brushSize}
          onChange={(e) => setBrushSize(e.target.value)}
          className="brush-size-slider" // Додаємо клас для інпута з розміром пензля
        />
        <button onClick={clearCanvas} className="clear-button">Clear</button> {/* Додаємо клас для кнопки очищення */}
      </div>
    </div>
  );
};

export default DrawingApp;

Скріншоти усіх файлів в нашому додатку

Створення Додатку для малювання

Завдання 1

Інформація

Undo та Redo функціонал: Додавання кнопок "Undo" і "Redo" дозволить користувачам скасувати або повторити останні дії.

Завдання 2

Інформація

Вибір типу пензля: Додавання можливості вибору типу пензля (наприклад, звичайний, круглий, квадратний тощо) та можливість налаштування його форми.

Завдання 3

Інформація

Вибір фонового кольору: Додавання можливості вибору фонового кольору для малювання.
Ось як ми можемо це зробити:

Створіть новий стан для фонового кольору в компоненті DrawingApp.
Додайте елемент відповідного типу для вибору фонового кольору у вашу форму керування.
Додайте обробник зміни, який буде оновлювати стан фонового кольору.
Використовуйте фоновий колір при очищенні полотна.

Завдання 4

Інформація

Збереження та завантаження малюнку: Додавання кнопок для збереження створеного малюнка у файлі або завантаження зображення з комп'ютера користувача.

Збереження малюнка у файлі: Ми можемо використати функціонал toDataURL() для отримання URL-адреси зображення, яке потім можна завантажити як файл.
Завантаження зображення з комп'ютера користувача: Ми можемо використати елемент <input type="file"> для створення кнопки завантаження та обробки вибору файлу користувачем.

Додаткові завдання

Завдання 1
Завдання 2
Завдання 3
Завдання 4
Завдання 5

Робочий простір з вказівником на малюнку: Додавання можливості переміщення та масштабування малюнка на робочому просторі, щоб користувачам було зручно малювати деталі.

Вибір текстури пензля: Додавання можливості вибрати текстуру для пензля (наприклад, масляна фарба, олівець, пастель тощо).

Палітра зі стандартними кольорами: Додавання палітри зі стандартними кольорами для швидкого вибору кольору.

Підтримка шарів: Додавання можливості створення різних шарів для малювання, щоб користувачі могли працювати з різними частинами малюнка незалежно.

Підтримка шаблонів або малювання по контуру: Додавання можливості завантажувати шаблони малюнка або малювати по контуру для легкого намалювання складних об'єктів.

Слідкуйте за нами:

Тема 12. React.js Painting App

Створення Додатку для малювання

Скопіюйте стилізацію нижче та замініть її в файлі App.css

Початок роботи із App.js та іншими файлами

Скріншоти усіх файлів в нашому додатку

Створення Додатку для малювання

Завдання 1

Завдання 2

Завдання 3

Завдання 4

Додаткові завдання

Посилання на пройдені теми