CSS에서 Noodl Group 노드 확장

개요
Noodl의 Visual 노드는 화면에 그래픽을 표시할 수 있습니다.기본 그래픽은 그룹(직사각형), 서클(원), Image(이미지), 캔버스(캔버스) 등 4가지뿐이다.
그래서 그룹으로 삼각형과 사다리꼴 등 복잡한 도형을 만들 수 있을지 고민 중이다.
조사 결과 Noodl 2의 CSS Style을 설정하면 사각형 이외의 그래픽을 만들 수 있습니다.
이번에는 CSS의 특수한 형식을 사용한 그룹을 소개합니다.
또한 Noodl의 기본 CSS Style 구문에 대해서는 여기 기사.를 참조하십시오.
다양한 형태의 Group 노드에서 Image 노드를 뺀 예

Group 노드에서 뿔을 만드는 원의 사각형
Box의 네 개의 각을 지정하려면border-radius 속성을 사용하십시오.
자세한 내용은 이쪽해설에서 확인하세요.
상자 각도가 Border-radius로 설정됨

Noodl을 통해 CSS 스타일 설정

구체적인 예를 들어 확인해 보자.

다음 세 가지 유형의 상자를 만듭니다.CSS 스타일 섹션에만 표시됩니다.
왼쪽 상단만 원형이고 나머지는 직각의 BOX이다

{
    borderRadius:"30% 0% 0% 0%"
}

왼쪽 위 오른쪽 아래는 원형이고 오른쪽 위 왼쪽 아래는 직각인 BOX

{
    borderRadius:"30% 0%"
}

각종 타원각이 있는 BOX

{
    borderRadius:"200px 50px 50px 100px / 100px 50px 100px 50px"
}

또 온라인에는 Border Radius를 시각적으로 생성할 수 있는 사이트가 있어 매우 편리하다.
“FANCY-BORDER-ARADIUS”
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 makerPath의 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%)"
}

그룹 노드에서 메시지 상자 만들기

범례가 있는 BOX

{
clipPath:"polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)"
}

Group 노드에서 복잡한 그래픽 만들기
마지막으로 4개의 박스를 조합해서 꽃 같은 도형을 만든다.완성되면 이런 느낌이야.
뿔이 하나밖에 없는 상자 4개를 조합했다.

꽃 같은 그림 중의 하나입니다.

{
    borderRadius:"50% 50% 0% 50%"
}

총결산
CSS Style을 적용하면 Group의 색상뿐만 아니라 모양도 자유롭게 변경할 수 있습니다.
또한 Group 노드의 아이에 Image 노드와 Video 노드를 구성하여 이미지와 애니메이션의 형식을 자유롭게 잘라낼 수 있습니다.
한편 노들 버전 2.1은 곧 발매될 예정이다.표현의 폭도 점점 커지고 있다.직접 만든 IoT 제품으로 활용해보는 건 어떨까요?