A quoi sert Canvas en réaction

Dans React, Canvas est utilisé pour dessiner divers graphiques, animations, etc. ; vous pouvez utiliser Canvas à l'aide du plug-in "react-konva", qui est une bibliothèque tierce de canevas utilisée pour utiliser React pour faire fonctionner Canvas. pour dessiner des graphiques de toile complexes et fournit un mécanisme d'événement d'élément et une prise en charge des opérations de glisser-déposer.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

À quoi sert Canvas dans React ?

Canvas est un nouveau composant HTML5. C'est comme un rideau sur lequel divers graphiques, animations, etc. peuvent être dessinés à l'aide de JavaScript.

Canvas ne peut être piloté que par des scripts js.

élément canvas

<canvas id=&#39;mycanvas&#39; width=400 height=400>
    Your browser does not support the canvas element.
</canvas>

Les navigateurs qui prennent en charge canvas n'afficheront que la balise canvas et ignoreront le contenu alternatif. Les navigateurs qui ne prennent pas en charge Canvas afficheront directement le contenu alternatif.

Expliquez que d'autres structures DOM ne peuvent pas être imbriquées à l'intérieur du canevas.

react-konva

Application Canvas en réaction, découvrons-la. Nous utiliserons le plugin React-konva.

react-konva et react-canvas sont des bibliothèques tierces de canevas liées à React avec plus d'étoiles sur github. Étant donné que React-Canvas n'a pas été mis à jour depuis mars 2017 et ne prend pas en charge React 16, il ne sera plus pris en compte. Ici, nous introduisons principalement l'utilisation de React-konva.

React Konva est une bibliothèque JavaScript permettant de dessiner des graphiques de toile complexes à l'aide de React. Il nous permet d'utiliser le canevas de la même manière que le DOM, et prend en charge le mécanisme d'événements et les opérations de glisser-déposer des éléments dans le canevas.

Concept de base

Considérez la vue entière comme une scène. Chaque couche de la scène est considérée comme une couche. Il existe de nombreux groupes dans le calque. Dessinez des formes telles que des dessins et des images en groupe.

Les exemples sont les suivants :

import React, { Component } from "react";
import Konva from "konva";
import { render } from "react-dom";
import { Stage, Layer, Rect, Text } from "react-konva";
class ColoredRect extends React.Component {
  state = {
    color: "green"
  };
  handleClick = () => {
    this.setState({
      color: Konva.Util.getRandomColor()
    });
  };
  render() {
    return (
      <Rect
        x={20}
        y={20}
        width={50}
        height={50}
        fill={this.state.color}
        shadowBlur={5}
        onClick={this.handleClick}
      />
    );
  }
}
class App extends Component {
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Text text="Try click on rect" />
          <ColoredRect />
        </Layer>
      </Stage>
    );
  }
}

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!