שדות תמונה

שדה תמונה מאחסן מחרוזת כערך ומחרוזת כטקסט. הערך שלו הוא src של התמונה, והטקסט שלו הוא מחרוזת alt שמתארת או מייצגת את התמונה.

שדה תמונה

שדה תמונה בבלוק מכווץ

יצירה

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

הקונסטרוקטור של התמונה מקבל:

פרמטר	תיאור
src	מחרוזת שמפנה לקובץ תמונה רסטר.
width	חייב להיות מספר שונה מאפס.
height	חייב להיות מספר שונה מאפס.
opt_alt	(אופציונלי) מחרוזת שמתארת או מייצגת את התמונה בצורה מדויקת. התמונה הזו תשמש במקום התמונה כשהבלוק מכווץ. אם הערך הוא null או undefined, נעשה שימוש במחרוזת ריקה.
opt_onClick	(אופציונלי) פונקציה להפעלה כשלוחצים על השדה.
opt_flipRtl	(אופציונלי) ערך בוליאני. אם הערך הוא true, התמונה תתהפך לאורך הציר האנכי כשמצב הכתיבה הוא מימין לשמאל. ברירת המחדל היא false. שימושי עבור סמלים של 'פנייה שמאלה' ו'פנייה ימינה'.

סידור הפרקים

אי אפשר לבצע סריאליזציה של שדות תמונה.

Click handler

הערה: מידע על כלי אימות באופן כללי זמין במאמר כלי אימות.

שדה התמונה לא מקבל מאמת. במקום זאת, הוא מקבל באופן מפורש פונקציה שמופעלת בכל פעם שלוחצים על השדה. המשמעות היא שתמונות יכולות לשמש כלחצנים שמופיעים בבלוקים.

אפשר להגדיר את הפונקציה לטיפול באירוע לחיצה בבונה JavaScript או באמצעות הפונקציה setOnClickHandler.

זוהי דוגמה ל-on click handler שמכווץ את הבלוק כשמפעילים אותו.

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