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