テキストを背景色に合わせて反転させる

React Native Skiaで以下のように、テキストを背景色に合わせて部分的に反転させる方法です。

黒と白の文字をそれぞれ用意し、黒の領域で白の文字をクリップ、白の領域で黒の文字をクリップします。

<Rect rect={upperRect} color="black" style="fill" />
<Rect rect={lowerRect} color="white" style="fill" />
<Group clip={upperRect}>
  <Text {...textProps} color="white" />
</Group>
<Group clip={lowerRect}>
  <Text {...textProps} color="black" />
</Group>

こうすることで、テキストが背景色に合わせて反転しているように見せることができます。

マスクをして同じことが実現できると思うのですが、よいやり方がパッと思いつかなかったので、今回は上と下をそれぞれクリップする方法を採用しました。

全体のコードはこちらです。

アニメーションさせてみる

ついでに、領域部分をアニメーションして変化させてみました。

コードはこちらです。