003 - Blockly를 사용한 오리지널 Visual Programing Editor 만들기

사용자 정의 블록 만들기

표준 준비 블록 이외의 블록을 만들려면 사용자 정의 블록을 작성할 수 있습니다.예를 들어, 사각형을 그리는 데 사용되는 블록입니다.

정의의 수단

사용자 블록을 정의하는 방법은 세 가지가 있습니다.

Block Factory 정의 활용

Blockly의 API를 직접 작성하고 정의합니다.

Muators로 동적 제작

Block Factory

Block Factory는 Blockly와 함께 제공되는 도구입니다.Blockly 아래 경로에서

/blockly/demos/blockfactory/index.html

이 index."}"도구를 열면 시작됩니다.

API 직접 쓰기

JavaScript를 사용하여 블록을 정의합니다.심각한 일만 아니면 블락팩토리로 충분하기 때문에 특수한 상황에서의 설치 수단이다.

Mutators

이것은 마치 고급 실장 수단인 것 같다.표준 블록에서 기어가 있는 블록(if 블록 등)을 정의할 때 이 블록을 사용하는 것 같습니다.는 사용자 기어 메뉴의 선택 블록에 따라 모양이 변경되는 것입니다.

블락팩토리로 해보겠습니다.

먼저 공구를 사용해 보아라.페이지에 표시되는 문자의 색상을 수정할 수 있는 블록을 작성합니다.정식 문서에는 애니메이션 해설만 고통스러워요.자막을 쫓는 동시에 먼저 지정된 색깔의 Color 블록을 만들어 보세요.

이런 느낌이에요.그런 다음 Language Code 및 Gener Stub에 표시된 내용을 파일에 저장합니다.

/blockly/blocks/color_block.js
/blockly/generators/javascript/color_block.js

다음에 문자 색상을 수정하는 블록을 만듭니다.

이런 느낌인가?아까와 같이 코드를 파일에 저장합니다.

/blockly/blocks/setting_block.js
/blockly/generators/javascript/setting_block.js

어쨌든 먼저 표현을 해볼게요.

blockly/build.실행py.구축이 성공적으로 끝난 후, 자신의 응용 프로그램 index입니다.나는 > (/index. >) 의toolbox에 현재 제작된 블록을 등록해 보려고 한다.

<category name="カスタムブロック">
  <block type="color"></block>
  <block type="foreground_setting"></block>
</category>

index.'.html'을 켜고 공구상자 안에'자정 블록'을 만들었는데 방금 만든 블록이 나왔을 거예요.물론 사업장에도 설치할 수 있다.생성기를 만들지 않았기 때문에 코드를 만들 수 없지만 사용자 정의 블록을 만들었습니다.

총결산

블록 제작은 기본적으로 블락팩토리가 좋다.다음에는 각 블록의 생성기를 실시하고 싶습니다.