react-konvaをCSS風にカスタマイズする

reactでcanvasを扱う

いくつかやり方はあると思いますが、今回はreact-konvaを使ってみます。
react-konva

何でcanvas?

パワプロ風画面ジェネレータというものを作っています。データベースにデータを保存してpuppeteerでスクリーンショット撮ってOGPにしているのですが、リニューアルでブラウザ上で画像を保存できるようにしようと思ってcanvas触り始めました。

react-konvaをCSS風にカスタマイズしてみる

canvasは基本的に絶対座標なので、propsにx,yを定義するほか、

border付きの四角形コンポーネント

• borderColor
• borderWidth
• height
• width
• fillColor(塗り潰し色)
• rotation(回転角度を定義する)
• offset(回転の中心を定義する)

import { Vector2d } from "konva/types/types";
import { Line } from "react-konva";

type props={
    borderColor: string,
    x: number,
    y: number,
    borderWidth: number,
    width:number,
    height:number,
    fillColor?:string,
    rotation: number,
    offset?:Vector2d
}

const BorderBox:React.FC<props>=({borderColor, x, y, borderWidth, height, width, fillColor, rotation, offset})=>{
    return(
        <Line
          x={x}
          y={y}
          points={[0, 0, 0, height, width, height, width, 0]}
          tension={0}
          closed
          stroke={borderColor}
          strokeWidth={borderWidth}
          fill={fillColor ? fillColor :null}
          rotation={rotation}
          offset={offset}
        />
    )
}

export default BorderBox;

グラデーション付きの四角形コンポーネント

import { ReactText } from "react";
import { Rect } from "react-konva";

type props = {
  width: number;
  height: number;
  x: number;
  y: number;
  gradientColor: ReactText[];
  boxShadow?:number;
};

const GradientBox: React.FC<props> = ({
  width,
  height,
  x,
  y,
  gradientColor,
  boxShadow
}) => {
  return (
    <Rect
      width={width}
      height={height}
      x={x}
      y={y}
      fillLinearGradientStartPoint={{ x: 0, y: 0 }}
      fillLinearGradientEndPoint={{ x: 0, y: height }}
      fillLinearGradientColorStops={gradientColor}
      shadowBlur={boxShadow}
    />
  );
};
export default GradientBox;

終わりに

普段使い慣れていないcanvas周りもCSS風にカスタマイズすると使いやすくなります。