Apakah kegunaan kanvas dalam bertindak balas

In react, kanvas digunakan untuk melukis pelbagai carta, animasi, dsb.; anda boleh menggunakan kanvas dengan pemalam "react-konva", yang merupakan pustaka kanvas pihak ketiga yang digunakan untuk digunakan Bertindak balas untuk mengendalikan kanvas untuk melukis grafik Kanvas yang kompleks, dan menyediakan mekanisme acara untuk elemen dan sokongan untuk operasi drag-and-drop.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah penggunaan kanvas dalam bertindak balas?

Kanvas ialah komponen baharu HTML5. Ia seperti tirai di mana pelbagai carta, animasi, dll. boleh dilakar menggunakan JavaScript.

Kanvas hanya boleh didorong oleh skrip js.

elemen kanvas

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

Penyemak imbas yang menyokong kanvas hanya akan memaparkan teg kanvas dan mengabaikan kandungan alternatif. Penyemak imbas yang tidak menyokong kanvas akan memaparkan kandungan alternatif secara langsung.

Ini bermakna struktur DOM lain tidak boleh bersarang di dalam kanvas.

react-konva

Ketahui tentang aplikasi kanvas dalam bertindak balas. Kami akan menggunakan pemalam react-konva.

react-konva dan react-canvas ialah pustaka pihak ketiga kanvas berkaitan tindak balas dengan lebih banyak bintang di github. Memandangkan react-canvas tidak dikemas kini sejak Mac 2017 dan tidak menyokong react 16, ia tidak akan dipertimbangkan lagi. Di sini kami memperkenalkan penggunaan react-konva.

React Konva ialah perpustakaan JavaScript untuk melukis grafik kanvas kompleks menggunakan React. Ia membolehkan kami mengendalikan kanvas sama seperti mengendalikan DOM, dan menyediakan sokongan untuk mekanisme acara dan operasi seret dan lepas elemen dalam kanvas.

Konsep Asas

Anggap keseluruhan pandangan sebagai pentas. Setiap lapisan dalam peringkat dianggap sebagai lapisan. Terdapat banyak kumpulan dalam lapisan. Lukis bentuk seperti lukisan dan gambar dalam kumpulan.

Contohnya adalah seperti berikut;

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

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah kegunaan kanvas dalam bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!