基本図形を描く

円(Circle)・楕円(Oval)と、内側影を高速に描ける角丸四角形(Box)の使い方を、実際に動かせるデモとあわせて解説します。

ここからは具体的な図形コンポーネントを見ていきます。まずは円と楕円、そして影付きの角丸四角形を描ける<Box>です。

Circle: 円を描く

import { Canvas, Circle } from "@shopify/react-native-skia";

const CircleDemo = () => {
  const r = 128;
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={r} cy={r} r={r} color="lightblue" />
    </Canvas>
  );
};

cx cy rの代わりに、c(中心のPoint)とrの組み合わせで書くこともできます。ここまでの章で使ってきた<Circle cx={128} cy={128} r={64} />のような書き方は、このcx cy r版です。

Oval: 楕円を描く

<Oval>は円と違い、バウンディングボックス(外接する矩形)で形を指定します。

import { Canvas, Oval } from "@shopify/react-native-skia";

const OvalDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Oval x={64} y={0} width={128} height={256} color="lightblue" />
    </Canvas>
  );
};

widthとheightを同じ値にすれば正円になるので、<Circle>は<Oval>の特殊形と考えることもできます。座標指定の感覚が異なるだけで、実用上は用途に応じて選べば十分です。

以下のデモでshapeを切り替えてCircleとOvalを、sizeとhueで大きさと色相を確認できます。

Box: 角丸四角形と内側影

<Box>は矩形または角丸矩形を描くコンポーネントです。単体では<Rect>や<RoundedRect>と大きく変わりませんが、<BoxShadow>を子として渡すことで、内側影(inner shadow)を高速に描ける点が特徴です。

<BoxShadow>のprops:

import { Box, BoxShadow, Canvas, Fill, rect, rrect } from "@shopify/react-native-skia";

const BoxDemo = () => {
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Fill color="#add8e6" />
      <Box box={rrect(rect(64, 64, 128, 128), 24, 24)} color="#add8e6">
        <BoxShadow dx={10} dy={10} blur={10} color="#93b8c4" inner />
        <BoxShadow dx={-10} dy={-10} blur={10} color="#c7f8ff" inner />
        <BoxShadow dx={10} dy={10} blur={10} color="#93b8c4" />
        <BoxShadow dx={-10} dy={-10} blur={10} color="#c7f8ff" />
      </Box>
    </Canvas>
  );
};

innerを付けた2つの<BoxShadow>が凹んだような陰影を、付けていない2つが外側へのドロップシャドウを作ります。この4つを組み合わせると、いわゆる「ニューモーフィズム」風の柔らかい立体感が1つの<Box>だけで表現できます。

以下のデモで角の丸み(radius)と影のぼかし(blur)、色相(hue)を動かして確認できます。

矩形そのものの描き方(<Rect>・<RoundedRect>)や、線・点といったより単純な図形は次の章多角形とパスで扱います。