概要
NoodlのVisualノードは画面上に図形を表示することができますが。基本図形としてはGroup(長方形)、Circle(円)、Image(画像)、Canvas(キャンバス)の4種類しかありません。
そのため三角形や台形など複雑な図形をGroupで作成できないかと考えていました。
調べてみるとNoodl2のCSS Styleを設定することで、長方形以外の図形を作成することが可能なことがわかりました。
今回はCSSを使った特殊な形のGroupを紹介します。
なおNoodl上の基本的なCSS Style文法についてはこちらの記事を参照ください。
様々な形のGroupノードでImageノードを切り抜いている例
Groupノードから角の丸い四角形を作る
Boxの4つのコーナーを指定する場合、border-radiusプロパティを使います。
詳しくはこちらの解説で確認ください。
ボックスの角をBorder-radiusで設定する
NoodlでCSS Style設定する
具体的な例で確認してみます。
下記では3種類のボックスを作成します。CSS Style部分のみ示します。
{
borderRadius:"30% 0% 0% 0%"
}
{
borderRadius:"30% 0%"
}
{
borderRadius:"200px 50px 50px 100px / 100px 50px 100px 50px"
}
また、オンライン上にはBorder-Radiusを視覚的に生成できるサイトがあり便利です。
｢FANCY-BORDER-RADIUS」
Groupノードから丸い形を作る
下記ではGroupノードから3種類の円を作ります。
{
borderRadius: "50%"
}
{
borderRadius:"100% 100% 0 0"
}
{
borderRadius:"100% 0 0 0"
}
Groupノードから三角形・台形を作る
{
clipPath:"polygon(45% 0, 0 70%, 100% 100%)"
}
{
clipPath:"polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)"
}
{
clipPath:"polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)"
}
CSS Crip-path makerという、Pathを使ったCSS定義を視覚的に作成できるオンラインツールが便利です。
Groupノードから矢印を作る
{
clipPath:"polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%)"
}
{
clipPath:"polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)"
}
{
clipPath:"polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%)"
}
Groupノードからメッセージボックスを作る
{
clipPath:"polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)"
}
Groupノードから複雑な図形を作る
最後に、Boxを4つ組合わせて花のような図形を作成します。出来上がりはこんな感じ。
1つだけ角のあるボックスを4つ組合わせています。
{
borderRadius:"50% 50% 0% 50%"
}
まとめ
CSS Styleを適用することでGroupの色だけでなく、形も自由に変えられることがわかりました。
また、Groupノードの子にImageノードやVideoノードを配置することで画像や動画の形も自由に切り抜くことができました。
また、Noodlはバージョン2.1リリースが近くなっていますので。どんどん表現の幅も広がっていきます。自作のIoTプロダクトに活用してみてはいかがでしょうか？