Trường hình ảnh

Trường hình ảnh lưu trữ một chuỗi dưới dạng giá trị và một chuỗi dưới dạng văn bản. Giá trị của thuộc tính này là src của hình ảnh, còn văn bản là một chuỗi alt mô tả/đại diện cho hình ảnh.

Trường hình ảnh

Trường hình ảnh trên khối thu gọn

dựa trên xu hướng

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,
        "*"));
  }
};

Hàm khởi tạo hình ảnh nhận vào:

Thông số	Mô tả
src	Một chuỗi trỏ đến tệp hình ảnh đường quét.
width	Phải truyền sang một số khác 0.
height	Phải truyền sang một số khác 0.
opt_alt	(Không bắt buộc) Một chuỗi mô tả/đại diện chính xác cho hình ảnh. Văn bản này được dùng thay cho hình ảnh khi khối bị thu gọn. Nếu giá trị là null hoặc undefined, thì một chuỗi trống sẽ được sử dụng.
opt_onClick	(Không bắt buộc) Hàm để gọi khi người dùng nhấp vào trường.
opt_flipRtl	(Không bắt buộc) Một boolean. Nếu là true, hình ảnh sẽ được lật theo trục dọc khi ở chế độ từ phải sang trái. Giá trị mặc định là false. Hữu ích cho biểu tượng "rẽ trái" và "rẽ phải".

Chuyển đổi tuần tự

Không thể chuyển đổi tuần tự các trường hình ảnh.

Trình xử lý lượt nhấp

Lưu ý: Để biết thông tin chung về trình xác thực, hãy xem bài viết Trình xác thực.

Trường hình ảnh không chấp nhận trình xác thực; thay vào đó, trường này chấp nhận một hàm được gọi rõ ràng bất cứ khi nào người dùng nhấp vào trường đó. Điều này có nghĩa là hình ảnh có thể hoạt động như các nút tồn tại trên các khối.

Bạn có thể đặt trình xử lý lượt nhấp trong Hàm khởi tạo JavaScript hoặc sử dụng hàm setOnClickHandler.

Dưới đây là ví dụ về trình xử lý lượt nhấp thu gọn khối khi được gọi.

function() {
    this.getSourceBlock().setCollapsed(true);
}