Reactで出現させたCanvasにclass要素を追加したい

Question

ReactでCanvasを使っているのですが、Canvasで表示しているテキストにこちらのQiita記事にあるような円形レーダー（https://qiita.com/sjnya/items/c294e5dcbb3ba6f74c94）のようなアニメーションを追加したいと考えているのですが、普通にCanvasの要素にclassNameを追加しただけではアニメーションが付与されません。

React（View部分）

import React, { Component } from 'react';
import { Layer, Text } from 'react-konva';

class TextIcon extends React.Component {
export default class Chart extends Component {
  render() {
    const { item } = this.props;
    return (
      <Layer>
        {items.map((item, i) => (
          <Text
            key={i}
            fill={item.color}
            className="point"
          />
        ))}
      </Layer>
    );
  }
}

CSS部分

.point {
  width: 40px;
  height: 40px;
  background: rgba(25, 118, 210, 0.4);
  border-radius: 50%;
  animation: blink 1s ease-in-out infinite none;
}
@keyframes blink {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(187, 222, 251, 0.3);
  }
}

Canvasにクラスを追加させる方法はないのでしょうか。
おたすけください。

Answer 1

こんにちは。

ご質問に挙げられているコードにどこまで適用できるかは分かりませんが、react-konvaによって生成される<canvas>にclass属性を追加するサンプルを作成しましたので、参考にして頂ければと思います。

ベースにしたコードは、react-konvaのREADMEにある Example です。これによってrenderされる <canvas>に class属性を追加するようにしたものを作成して、以下のレポジトリ

https://github.com/jun68ykt/q145605

に上げました。
<canvas>　にclass属性を設定しているのは、以下の App.js です。

import React, { Component } from 'react';
import { Stage, Layer, Text } from 'react-konva';
import ColoredRect from "./ColoredRect";

class App extends Component {

  stageWrapper = React.createRef();

  componentDidMount() {
    const stageWrapperElement = this.stageWrapper.current;
    const canvasElement = stageWrapperElement.getElementsByTagName('canvas')[0];
    canvasElement.className = 'my-canvas';
  }

  render() {
    return (
      <section ref={this.stageWrapper}>
        <Stage width={window.innerWidth} height={window.innerHeight}>
          <Layer>
            <Text text="Try click on rect" />
            <ColoredRect />
          </Layer>
        </Stage>
      </section>
    );
  }
}

export default App;

<canvas>にclassを追加するための要点は、以下の３点です。

1. <Stage>を何らかの要素で囲む。(上記のソースでは <section> で囲んでいます）
2. 上記の<Stage>を囲む要素を参照するためのrefを、Appのインスタンスフィールドとして、React.createRef() によって作成(上記のソースでは stageWrapper)
3. App の componentDidMount で、上記のrefを使って <canvas>を取得し、これにクラス名を設定

このサンプル q145605 を動かしてうまくいけば、以下のように <canvas> にclass属性が付加されているのを確認できるかと思います。

以上、参考になれば幸いです。

Comments

[k10a]

ご丁寧なご回答をいただきまして、誠にありがとうございます。
canvasにclass属性を与えることが参考コードにて確認できました。canvas内のテキストにclass入れるのはまだかかりそうですが、参考にすすめていきたいと思います。