CSSでNoodlのGroupノードを拡張する

## 概要
NoodlのVisualノードは画面上に図形を表示することができますが。基本図形としてはGroup(長方形)、Circle(円)、Image(画像)、Canvas(キャンバス)の4種類しかありません。
そのため三角形や台形など複雑な図形をGroupで作成できないかと考えていました。
調べてみるとNoodl2のCSS Styleを設定することで、長方形以外の図形を作成することが可能なことがわかりました。
今回はCSSを使った特殊な形のGroupを紹介します。
なおNoodl上の基本的なCSS Style文法については[こちらの記事](https://qiita.com/macole/items/53326684967864722f82)を参照ください。

**様々な形のGroupノードでImageノードを切り抜いている例**
![img0098_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/72ac2c73-6d49-9ce1-6522-1a556480412e.png)

## Groupノードから角の丸い四角形を作る
Boxの4つのコーナーを指定する場合、border-radiusプロパティを使います。
詳しくはこちらの[解説](https://developer.mozilla.org/ja/docs/Web/CSS/border-radius)で確認ください。

### ボックスの角をBorder-radiusで設定する
![img0111_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/9560efe4-6c2a-de00-f72e-051d610799ee.png)

### NoodlでCSS Style設定する
![img0110_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/989a1f31-b54f-ebc5-3091-9d960c00fc92.png)

具体的な例で確認してみます。

![img0109_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/4167e0d1-80f8-a51c-6476-a6a35f56c8ac.png)

下記では3種類のボックスを作成します。CSS Style部分のみ示します。

```css:左上だけが丸く他は直角なBOX
{
    borderRadius:"30% 0% 0% 0%"
}
```

```css:左上右下が丸く、右上左下が直角なBOX
{
    borderRadius:"30% 0%"
}
```

```css:様々な楕円の角をもつBOX
{
    borderRadius:"200px 50px 50px 100px / 100px 50px 100px 50px"
}
```

また、オンライン上にはBorder-Radiusを視覚的に生成できるサイトがあり便利です。
[｢FANCY-BORDER-RADIUS」](https://9elements.github.io/fancy-border-radius/)

## Groupノードから丸い形を作る
下記ではGroupノードから3種類の円を作ります。
![img0101_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/9509b523-6547-9b13-f861-82bee256dad1.png)

```css:円
{
  borderRadius: "50%"
}
```
```css:半円
{
  borderRadius:"100% 100% 0 0"
}
```
```css:扇形
{
  borderRadius:"100% 0 0 0"
}
```

## Groupノードから三角形・台形を作る
![img0102_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/922f18a6-9139-9b28-a103-3ed7487937c9.png)

```css:三角形
{
clipPath:"polygon(45% 0, 0 70%, 100% 100%)"
}
```

```css:ひし形
{
clipPath:"polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)"
}
```
```css:台形
{
clipPath:"polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)"
}
```

[CSS Crip-path maker](https://bennettfeely.com/clippy/)という、Pathを使ったCSS定義を視覚的に作成できるオンラインツールが便利です。

## Groupノードから矢印を作る
![img0103_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/e2353e81-6e14-26c6-a18f-a02cefec847b.png)


```css:左矢印
{
    clipPath:"polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%)"
}
```
```css:右矢印
{
    clipPath:"polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)"
}
```
```css:右向き太い矢印
{
    clipPath:"polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%)"
}
```

## Groupノードからメッセージボックスを作る
![img0104_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/6c40b1d3-617b-d913-17e6-b7e514f28bb7.png)


```css:吹き出し付きのBOX
{
clipPath:"polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)"
}
```

## Groupノードから複雑な図形を作る
最後に、Boxを4つ組合わせて花のような図形を作成します。出来上がりはこんな感じ。
1つだけ角のあるボックスを4つ組合わせています。

![img0112_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192442/a5d7d5de-7392-1aa4-c48e-5665ca6a4f2b.png)

```css:花のような図形の1つ
{
    borderRadius:"50% 50% 0% 50%"
}
```

## まとめ
CSS Styleを適用することでGroupの色だけでなく、形も自由に変えられることがわかりました。
また、Groupノードの子にImageノードやVideoノードを配置することで画像や動画の形も自由に切り抜くことができました。
また、Noodlはバージョン2.1リリースが近くなっていますので。どんどん表現の幅も広がっていきます。自作のIoTプロダクトに活用してみてはいかがでしょうか？