Trường màu

Một trường màu lưu trữ một chuỗi làm value và một chuỗi lưu trữ làm text. value của biến là một chuỗi có định dạng #rrggbb, trong khi text của biến này có thể là một chuỗi có định dạng #rgb nếu có thể.

Trường màu

Trường màu khi trình chỉnh sửa đang mở

Trường màu trên khối thu gọn

dựa trên xu hướng

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');
  }
};

Hàm khởi tạo màu nhận những yếu tố sau:

  • value không bắt buộc
  • validator (không bắt buộc)
  • sơ đồ các lựa chọn không bắt buộc, bao gồm:
    • colourOptions
    • colourTitles
    • columns

value phải là một chuỗi có định dạng #rrggbb. Nếu không có value nào được cung cấp hoặc value đã cho không hợp lệ, mục nhập đầu tiên trong mảng màu mặc định sẽ được sử dụng.

Bạn cũng có thể đặt các tuỳ chọn sau trong JSON:

  • colourOptions
  • colourTitles
  • columns

Bạn cũng có thể thiết lập bằng cách sử dụng hook JavaScript.

Chuyển đổi tuần tự

JSON

JSON cho một trường màu sẽ có dạng như sau:

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

Trong đó FIELDNAME là một chuỗi tham chiếu đến một trường màu và giá trị là giá trị áp dụng cho trường đó. Giá trị này tuân theo các quy tắc tương tự như giá trị hàm khởi tạo.

XML

XML cho một trường màu sẽ có dạng như sau:

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

Thuộc tính name của nút field chứa một chuỗi tham chiếu đến một trường màu và văn bản bên trong của nút là giá trị áp dụng cho trường này. Giá trị văn bản bên trong tuân theo các quy tắc tương tự như giá trị hàm khởi tạo.

Xin lưu ý rằng sau khi giải tuần tự và tuần tự hoá lại, tất cả giá trị văn bản bên trong sẽ có định dạng #rrggbb. Đôi khi, điều này rất quan trọng khi khác nhau không gian làm việc.

Tuỳ chỉnh

Tuỳ chọn trong trình chỉnh sửa

Bạn có thể dùng hàm setColours để đặt tuỳ chọn màu của một trường màu. Phương thức này sử dụng một mảng chuỗi màu sắc (phải được xác định ở định dạng #rrggbb và một mảng chú giải công cụ không bắt buộc). Nếu bạn không cung cấp mảng chú giải công cụ, thì mảng chú giải công cụ mặc định sẽ được sử dụng.

Chú giải công cụ và màu sắc được so khớp dựa trên chỉ mục mảng, chứ không dựa trên giá trị. Nếu mảng màu dài hơn mảng chú giải công cụ, thì chú giải công cụ cho các màu bổ sung sẽ là giá trị #rrggbb.

Hàm setColumns đặt số cột trong bộ chọn màu.

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);
  });

Bạn có thể thực hiện việc này bằng cách sử dụng một tiện ích 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');
  }
};

Trình chỉnh sửa trường màu tuỳ chỉnh

Bạn có thể ghi đè màu, chú giải công cụ và cột mặc định trên toàn cầu (không bắt buộc). Điều này có nghĩa là chúng sẽ ảnh hưởng đến tất cả các trường màu, thay vì một trường cụ thể.

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;

Tạo trình xác thực màu

Giá trị của trường màu là một chuỗi định dạng #rrggbb. Do đó, mọi trình xác thực đều phải chấp nhận chuỗi định dạng #rrggbb và trả về một chuỗi định dạng #rrggbb, null hoặc undefined.

Dưới đây là ví dụ về trình xác thực thay đổi màu của khối để khớp với màu của trường.

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

Chặn việc thay đổi màu dựa trên trường màu