React Konva — это мощная библиотека, которая привносит простоту и гибкость React в мир интерактивной графики. Независимо от того, создаете ли вы игру, визуализацию данных или любое другое приложение, требующее богатых графических элементов, React Konva предоставляет надежный набор инструментов и компонентов, которые сделают ваш процесс разработки более плавным. В этой статье мы рассмотрим различные методы и примеры кода, которые помогут вам использовать весь потенциал React Konva.

1. Начало работы:
   Для начала убедитесь, что в вашем проекте установлены React и React Konva. Это можно сделать, выполнив следующие команды:

npm install react
npm install react-konva konva

2. Базовые фигуры.
   React Konva предоставляет компоненты для рендеринга основных фигур, таких как прямоугольники, круги и линии. Вот пример рендеринга прямоугольника:

import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
const App = () => {
  return (
    <Stage width={500} height={500}>
      <Layer>
        <Rect
          x={20}
          y={20}
          width={200}
          height={100}
          fill="red"
        />
      </Layer>
    </Stage>
  );
};
export default App;

3. Обработка событий:
   React Konva позволяет обрабатывать различные события, такие как щелчок, перетаскивание и наведение курсора, на графических элементах. Вот пример обработки события клика на прямоугольнике:

import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
const App = () => {
  const handleClick = () => {
    console.log('Rectangle clicked!');
  };
  return (
    <Stage width={500} height={500}>
      <Layer>
        <Rect
          x={20}
          y={20}
          width={200}
          height={100}
          fill="red"
          onClick={handleClick}
        />
      </Layer>
    </Stage>
  );
};
export default App;

4. Анимация.
   React Konva позволяет создавать плавную анимацию с помощью компонента Animation. Вот пример анимации положения прямоугольника:

import React, { useEffect, useRef } from 'react';
import { Stage, Layer, Rect, Animation } from 'react-konva';
const App = () => {
  const rectRef = useRef(null);
  useEffect(() => {
    const anim = new window.Konva.Animation(frame => {
      const period = 2000;
      const amplitude = 100;
      const x = amplitude * Math.sin((2 * Math.PI * frame.time) / period);
      rectRef.current.x(x);
    }, [rectRef.current]);
    anim.start();
    return () => anim.stop();
  }, []);
  return (
    <Stage width={500} height={500}>
      <Layer>
        <Rect
          ref={rectRef}
          y={100}
          width={100}
          height={50}
          fill="green"
        />
      </Layer>
    </Stage>
  );
};
export default App;

5. Перетаскивание:
   React Konva позволяет легко реализовать функцию перетаскивания для графических элементов. Вот пример перетаскивания прямоугольника:

import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
const App = () => {
  return (
    <Stage width={500} height={500}>
      <Layer>
        <Rect
          x={20}
          y={20}
          width={200}
          height={100}
          fill="red"
          draggable
        />
      </Layer>
    </Stage>
  );
};
export default App;

React Konva открывает мир возможностей для создания привлекательной интерактивной графики в ваших приложениях React. В этой статье мы рассмотрели некоторые основные методы и предоставили примеры кода для рисования фигур, обработки событий, анимации элементов и реализации функций перетаскивания. Освоив React Konva, вы сможете поднять свои навыки веб-разработки на новый уровень и создавать потрясающие визуальные интерактивные возможности для своих пользователей.