Was ist die Verwendung von Canvas in React

In React wird Canvas zum Zeichnen verschiedener Diagramme, Animationen usw. verwendet. Sie können Canvas mit dem Plug-In „react-konva“ verwenden, einer Canvas-Bibliothek eines Drittanbieters, mit der React zum Bedienen von Canvas verwendet wird zum Zeichnen komplexer Leinwandgrafiken und bietet einen Elementereignismechanismus und Unterstützung für Drag-and-Drop-Vorgänge.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Wozu dient Canvas in React?

Canvas ist eine neue Komponente von HTML5. Es ist wie ein Vorhang, auf den mithilfe von JavaScript verschiedene Diagramme, Animationen usw. gezeichnet werden können.

Canvas kann nur von js-Skripten gesteuert werden.

Canvas-Element

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

Browser, die Canvas unterstützen, rendern nur das Canvas-Tag und ignorieren den alternativen Inhalt. Browser, die Canvas nicht unterstützen, rendern alternative Inhalte direkt.

Erklären Sie, dass andere DOM-Strukturen nicht im Canvas verschachtelt werden können.

react-konva

Canvas-Anwendung in React, lasst uns mehr darüber erfahren. Wir werden das React-Konva-Plugin verwenden.

React-Konva und React-Canvas sind reaktionsbezogene Canvas-Bibliotheken von Drittanbietern mit mehr Sternen auf Github. Da React-Canvas seit März 2017 nicht aktualisiert wurde und React 16 nicht unterstützt, wird es nicht mehr berücksichtigt. Hier stellen wir hauptsächlich die Verwendung von React-Konva vor.

React Konva ist eine JavaScript-Bibliothek zum Zeichnen komplexer Canvas-Grafiken mit React. Es ermöglicht uns, die Leinwand genauso zu bedienen wie das DOM und bietet Unterstützung für den Ereignismechanismus und Drag-and-Drop-Vorgänge von Elementen in der Leinwand.

Grundkonzept

Betrachten Sie die gesamte Ansicht als Bühne. Jede Ebene in der Bühne wird als eine Ebene betrachtet. Es gibt viele Gruppen in der Ebene. Zeichnen Sie in der Gruppe Formen wie Zeichnungen und Bilder.

Beispiele sind wie folgt:

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>
    );
  }
}

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Canvas in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!