Trường hình ảnh

Trường hình ảnh lưu trữ một chuỗi làm giá trị và một chuỗi dưới dạng văn bản của trường đó. 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ả/biểu thị 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 lấy:

Thông số Nội dung mô tả
src Một chuỗi trỏ đến tệp hình ảnh đường quét.
width Phải truyền tới một số khác 0.
height Phải truyền tới 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 hình ảnh. Nếu giá trị là null hoặc undefined, hệ thống sẽ sử dụng một chuỗi trống.
opt_onClick (Không bắt buộc) Một hàm để gọi khi người dùng nhấp vào trường.
opt_flipRtl (Không bắt buộc) Boolean. Nếu true, hình ảnh sẽ bị 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 khi sử dụng biểu tượng "ngả sang trái" và "ngược".

Chuyển đổi tuần tự

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

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

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 rõ ràng một hàm được gọi mỗi khi có người nhấp vào trường này. Điều này có nghĩa là hình ảnh có thể hoạt động như các nút nằm 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 dùng hàm setOnClickHandler.

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

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