Reactでのキャンバスの使用法は何ですか

react では、canvas を使用してさまざまなチャートやアニメーションなどを描画します。React を使用するために使用される Canvas サードパーティ ライブラリである「react-konva」プラグインを使用して Canvas を使用できます。 Canvas を操作して複雑な Canvas グラフィックスを描画し、要素のイベント メカニズムとドラッグ アンド ドロップ操作のサポートを提供します。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

reactにおけるcanvasの使い方とは

CanvasはHTML5の新しいコンポーネントで、JavaScriptを使ってさまざまなグラフやアニメーションなどを描くことができるカーテンのようなものです。

Canvas の特徴として、js スクリプトのみで動作させることができます。

canvas 要素

<canvas id='mycanvas' width=400 height=400>
    Your browser does not support the canvas element.
</canvas>

canvas をサポートするブラウザは、canvas タグのみを表示し、代替コンテンツを無視します。キャンバスをサポートしていないブラウザでは、代替コンテンツが直接表示されます。

他の DOM 構造をキャンバス内にネストできないことを説明します。

react-konva

React での Canvas のアプリケーションについて学びましょう。 React-konva プラグインを使用します。

react-konva と reverse-canvas は、github で多くのスターが付けられている、react 関連の Canvas サードパーティ ライブラリです。 React-Canvas は 2017 年 3 月以降更新されておらず、React 16 をサポートしていないため、今後は考慮されません。ここでは主にreact-konvaの使い方を紹介します。

React Konva は、React を使用して複雑なキャンバス グラフィックを描画するための JavaScript ライブラリです。これにより、DOM を操作するのと同じようにキャンバスを操作できるようになり、イベント メカニズムやキャンバス内の要素のドラッグ アンド ドロップ操作がサポートされます。

基本的な考え方

視界全体をステージとして考えます。ステージ内の各層をレイヤーとみなします。レイヤーレイヤーには多くのグループがあります。グループ内で絵や絵などの図形を描きます。

例は次のとおりです。

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

推奨される学習: 「react ビデオ チュートリアル 」

以上がReactでのキャンバスの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。