색상 입력란

색상 필드는 문자열을 value로 저장하고 문자열을 text로 저장합니다. value는 #rrggbb 형식의 문자열이고 가능한 경우 text는 #rgb 형식의 문자열일 수 있습니다.

색상 필드

편집기가 열려 있는 색깔 필드

접힌 블록의 색상 입력란

제작

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "FIELDNAME",
      "colour": "#ff4040",
      "colourOptions":
        ['#ff4040', '#ff8080', '#ffc0c0',
         '#4040ff', '#8080ff', '#c0c0ff'],
      "colourTitles":
        ['dark pink', 'pink', 'light pink',
         'dark blue', 'blue', 'light blue'],
      "columns": 3
    }
  ]
}

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(new Blockly.FieldColour('#ff4040',
            {
                "colourOptions":
                  ['#ff4040', '#ff8080', '#ffc0c0',
                   '#4040ff', '#8080ff', '#c0c0ff'],
                "colourTitles":
                  ['dark pink', 'pink', 'light pink',
                   'dark blue', 'blue', 'light blue'],
                "columns": 3
            }), 'FIELDNAME');
  }
};

색상 생성자는 다음을 받습니다.

  • value(선택사항)
  • 선택적 validator
  • 다음을 포함한 옵션 맵(선택사항)입니다.
    • colourOptions
    • colourTitles
    • columns

value는 #rrggbb 형식의 문자열이어야 합니다. value을 지정하지 않거나 지정된 value이 유효하지 않으면 기본 색상 배열의 첫 번째 항목이 사용됩니다.

다음 옵션도 JSON으로 설정할 수 있습니다.

  • colourOptions
  • colourTitles
  • columns

또는 JavaScript 후크를 사용하여 설정할 수 있습니다.

직렬화

JSON

색상 필드의 JSON은 다음과 같습니다.

{
  "fields": {
    "FIELDNAME": "#ff0000"
  }
}

여기서 FIELDNAME는 색상 필드를 참조하는 문자열이며 값은 필드에 적용할 값입니다. 이 값은 생성자 값과 동일한 규칙을 따릅니다.

XML

색상 필드의 XML은 다음과 같습니다.

<field name="FIELDNAME">#ff0000</field>

field 노드의 name 속성에는 색상 필드를 참조하는 문자열이 포함되며 노드의 내부 텍스트는 필드에 적용할 값입니다. 내부 텍스트 값은 생성자 값과 동일한 규칙을 따릅니다.

역직렬화 및 재직렬화 후에는 모든 내부 텍스트 값이 #rrggbb 형식이 됩니다. 이는 작업공간을 비교할 때 중요할 때가 있습니다.

맞춤설정

편집기 옵션

setColours 함수를 사용하여 색상 필드의 색상 옵션을 설정할 수 있습니다. 이 메서드는 #rrggbb 형식으로 정의해야 하는 색상 문자열의 배열과 선택적 도움말 배열을 취합니다. 도움말 배열이 제공되지 않으면 기본 도움말 배열이 사용됩니다.

도움말 및 색상은 값이 아닌 배열 색인을 기준으로 일치됩니다. 색상 배열이 도움말 배열보다 길면 추가 색상의 도움말은 #rrggbb 값이 됩니다.

setColumns 함수는 색상 선택 도구의 열 수를 설정합니다.

JSON

{
  "type": "example_colour",
  "message0": "colour: %1",
  "args0": [
    {
      "type": "field_colour",
      "name": "COLOUR",
      "colour": "#ff4040"
    }
  ],
  "extensions": ["set_colours_extension"]
}

Blockly.Extensions.register('set_colours_extension',
  function() {
    var field = this.getField("COLOUR");
    field.setColours(
      ['#ff4040', '#ff8080', '#ffc0c0',
        '#4040ff', '#8080ff', '#c0c0ff'],
      ['dark pink', 'pink', 'light pink',
        'dark blue', 'blue', 'light blue']);
    field.setColumns(3);
  });

이 작업은 JSON 확장 프로그램을 사용하여 수행됩니다.

JavaScript

Blockly.Blocks['example_colour'] = {
  init: function() {
    var field = new Blockly.FieldColour('#ff4040');
    field.setColours(
        ['#ff4040', '#ff8080', '#ffc0c0',
        '#4040ff', '#8080ff', '#c0c0ff'],
        ['dark pink', 'pink', 'light pink',
        'dark blue', 'blue', 'light blue']);
    field.setColumns(3);
    this.appendDummyInput()
        .appendField('colour:')
        .appendField(field, 'COLOUR');
  }
};

맞춤설정된 색상 필드 편집기

원하는 경우 기본 색상, 도움말, 열을 전역적으로 재정의할 수 있습니다. 즉, 특정 필드가 아닌 모든 색상 필드에 영향을 미칩니다.

Blockly.FieldColour.COLOURS = [
    '#ff4040', '#ff8080', '#ffc0c0',
    '#4040ff', '#8080ff', '#c0c0ff'];
Blockly.FieldColour.TITLES = [
    'dark pink', 'pink', 'light pink',
    'dark blue', 'blue', 'light blue'];
Blockly.FieldColour.COLUMNS = 3;

색상 검사기 만들기

색상 필드의 값은 #rrggbb 형식 문자열이므로 모든 검사기는 #rrggbb 형식 문자열을 허용하고 #rrggbb 형식 문자열(null, undefined)을 반환해야 합니다.

다음은 필드의 색상과 일치하도록 블록의 색상을 변경하는 검사기의 예입니다.

function(newValue) {
  this.getSourceBlock().setColour(newValue);
  return newValue;
}

색상 필드를 기준으로 색상 변경 차단