이미지 필드는 문자열을 값으로 저장하고 문자열을 텍스트로 저장합니다. 값은 이미지의 src이고 텍스트는 이미지를 설명/나타내는 대체 문자열입니다.
이미지 필드
접힌 블록의 이미지 필드
제작
JSON
{
"type": "example_image",
"message0": "image: %1",
"args0": [
{
"type": "field_image",
"src": "https://www.gstatic.com/codesite/ph/images/star_on.gif",
"width": 15,
"height": 15,
"alt": "*"
}
]
}
JavaScript
Blockly.Blocks['example_image'] = {
init: function() {
this.appendDummyInput()
.appendField("image:")
.appendField(new Blockly.FieldImage(
"https://www.gstatic.com/codesite/ph/images/star_on.gif",
15,
15,
"*"));
}
};
이미지 생성자는 다음을 받습니다.
매개변수 | 설명 |
---|---|
src |
래스터 이미지 파일을 가리키는 문자열입니다. |
width |
0이 아닌 숫자로 변환해야 합니다. |
height |
0이 아닌 숫자로 변환해야 합니다. |
opt_alt |
(선택사항) 이미지를 정확하게 설명/나타내는 문자열입니다. null 또는 undefined 이면 빈 문자열이 사용됩니다. |
opt_onClick |
(선택사항) 필드를 클릭했을 때 호출할 함수입니다. |
opt_flipRtl |
(선택사항) 부울. true 인 경우 오른쪽에서 왼쪽 모드일 때 이미지가 세로축을 가로질러 뒤집힙니다. 기본값은 false 입니다. '왼쪽으로 회전' 및 '오른쪽으로 회전' 아이콘에 유용합니다. |
직렬화
이미지 필드를 직렬화할 수 없습니다.
클릭 핸들러
이미지 필드는 검사기를 허용하지 않습니다. 대신 필드를 클릭할 때마다 호출되는 함수를 명시적으로 허용합니다. 즉, 이미지가 블록에 있는 버튼처럼 작동할 수 있습니다.
클릭 시 핸들러는 JavaScript 생성자에서 또는 setOnClickHandler 함수를 사용하여 설정할 수 있습니다.
다음은 호출 시 블록을 접는 on click 핸들러의 예입니다.
function() {
this.getSourceBlock().setCollapsed(true);
}