パスエフェクト

DiscretePathEffect・DashPathEffect・CornerPathEffect・Path1D/Path2D/Line2DPathEffectなど、パスの形そのものを加工するパスエフェクトを解説します。

これまでのフィルターはピクセルの色や見え方を変えるものでしたが、パスエフェクト(path effect)はストロークを描く前段階で、パスの形そのものを加工するエフェクトです。ストローク線を破線にしたり、角を丸めたり、別のパスをスタンプのように繰り返し配置したりできます。

DiscretePathEffect: ランダムに乱す

DiscretePathEffectは、パスを一定長のセグメントに分割し、それぞれの端点をランダムな方向にずらします。手描き風・ノイズがかった線を表現するのに使います。

Name	Type	Description
length	`number`	分割するセグメントの長さ
deviation	`number`	端点をずらす最大量
seed	`number`	乱数のシード値
children?	`PathEffect`	先に適用する別のパスエフェクト

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

const logo = "M256 128.015C256 111.057 234.762...";

const Discrete = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB">
        <DiscretePathEffect length={10} deviation={2} />
      </Path>
    </Canvas>
  );
};

DashPathEffect: 破線にする

DashPathEffectはストロークに破線パターンを付けます。intervalsは「線を引く長さ」と「間隔を空ける長さ」を交互に並べた配列です。

Name	Type	Description
intervals	`number[]`	偶数個の要素からなる配列。偶数インデックスが「表示」区間、奇数インデックスが「非表示」区間の長さ
phase?	`number`	インターバル配列内の開始位置のオフセット(デフォルトは0)
children?	`PathEffect`	先に適用する別のパスエフェクト

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

const Dashed = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB" style="stroke" strokeWidth={4}>
        <DashPathEffect intervals={[4, 4]} />
      </Path>
    </Canvas>
  );
};

CornerPathEffect: 角を丸める

CornerPathEffectはパスの鋭い角を、指定した半径で丸めます。矩形やジグザグの折れ線を、手書き風の柔らかい輪郭にしたいときに使えます。

Name	Type	Description
r	`number`	角丸の半径
children?	`PathEffect`	先に適用する別のパスエフェクト

以下のデモでは、星形のパスにdiscrete(乱れ)・dash(破線)・corner(角丸)を切り替えて適用できます。amountスライダーは効果ごとに異なるパラメーター(乱れ幅・間隔の長さ・角丸半径)に対応しています。

Skiaを読み込み中…

Path1DPathEffect: パスをスタンプのように繰り返す

Path1DPathEffectは、指定したパスを一定間隔でスタンプのように繰り返し配置して線を描きます。矢印や図形の連続する装飾線を作るのに便利です。

Name	Type	Description
path	`PathDef`	スタンプするパス
advance	`number`	スタンプ同士の間隔
phase	`number`	パスに沿った開始位置のオフセット(`advance`を法とした値)
style	`Path1DEffectStyle`	現在位置と接線に応じたスタンプの変換方法
children?	`PathEffect`	先に適用する別のパスエフェクト

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

const Path1D = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB" style="stroke" strokeWidth={15}>
        <Path1DPathEffect
          path="M -10 0 L 0 -10, 10 0, 0 10 Z"
          advance={20}
          phase={0}
          style="rotate"
        />
      </Path>
    </Canvas>
  );
};

Path2DPathEffect / Line2DPathEffect: 平面全体にスタンプする

Path2DPathEffectとLine2DPathEffectは、パスの輪郭ではなく塗りつぶし領域全体に対して、指定した行列(matrix)で定義される格子状のパターンをスタンプします。テクスチャパターンや網目模様のような表現に使います。

Name	Type	Description
path	`PathDef`	スタンプするパス(`Line2DPathEffect`では`width`が線の太さ)
matrix	`SkMatrix`	格子の配置を定義する変換行列
children?	`PathEffect`	先に適用する別のパスエフェクト

import { Canvas, Path2DPathEffect, Path, processTransform2d } from "@shopify/react-native-skia";

const Path2D = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB" style="stroke" strokeWidth={15}>
        <Path2DPathEffect
          path="M -10 0 L 0 -10, 10 0, 0 10 Z"
          matrix={processTransform2d([{ scale: 40 }])}
        />
      </Path>
    </Canvas>
  );
};

matrixにはGroupのtransformpropと同じprocessTransform2dで作った行列を渡せます。scaleを小さくするほど格子が密になり、スタンプの数が増える点に注意してください。

以下のデモでは、星形のパスにpath1d(輪郭に沿ったスタンプ)・path2d(塗りつぶし領域への格子状スタンプ)・line2d(同じく格子状の線)を切り替えて適用できます。amountはpath1dではadvance、path2d/line2dでは格子のscaleに対応しています。

Skiaを読み込み中…

注意点

パスエフェクトは複数をchildrenpropでチェーンできますが、DiscretePathEffectのように乱数を使うものとDashPathEffectのような規則的なものを組み合わせると、意図しない見た目になりやすいので、まず単体で挙動を確認してから組み合わせるのがおすすめです。

公式ドキュメントのPath Effectsも参照してください。