इमेज फ़ील्ड

इमेज फ़ील्ड, स्ट्रिंग को वैल्यू के तौर पर और स्ट्रिंग को टेक्स्ट के तौर पर सेव करता है. इसकी वैल्यू, इमेज का एसआरसी होती है. वहीं, इसका टेक्स्ट एक वैकल्पिक स्ट्रिंग होती है, जो इमेज के बारे में बताती है या उसे दिखाती है.

इमेज फ़ील्ड

"image:" लेबल वाला ब्लॉक और पीले रंग के तारे की इमेज.

कोलैप्स किए गए ब्लॉक पर इमेज फ़ील्ड

कोलैप्स किए जाने के बाद वही ब्लॉक. इसमें "variable: *" लेबल होता है. यहां "*" इमेज के लिए वैकल्पिक टेक्स्ट है. साथ ही, यह छोटा किया गया है, इसलिए इसका दायां किनारा कटा-फटा है.

कॉन्टेंट बनाने के

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 पर सेट होता है. "बाईं ओर मुड़ें" और "दाईं ओर मुड़ें" आइकॉन के लिए काम की सुविधा.

एपिसोड क्रम से लगाने की सेटिंग

इमेज फ़ील्ड को क्रम से नहीं लगाया जा सकता.

क्लिक हैंडलर

इमेज फ़ील्ड, पुष्टि करने वाले व्यक्ति को स्वीकार नहीं करता है. इसके बजाय, यह साफ़ तौर पर एक फ़ंक्शन को स्वीकार करता है. इस फ़ंक्शन को तब कॉल किया जाता है, जब फ़ील्ड पर क्लिक किया जाता है. इसका मतलब है कि इमेज, ब्लॉक पर मौजूद बटन की तरह काम कर सकती हैं.

क्लिक हैंडलर को JavaScript कंस्ट्रक्टर में सेट किया जा सकता है. इसके अलावा, इसे setOnClickHandler फ़ंक्शन का इस्तेमाल करके भी सेट किया जा सकता है.

यहां क्लिक हैंडलर का एक उदाहरण दिया गया है. इसे कॉल करने पर, ब्लॉक छोटा हो जाता है.

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

इस ऐनिमेटेड GIF में दिखाया गया है कि इमेज पर क्लिक करने, ब्लॉक को छोटा करने, संदर्भ मेन्यू दिखाने के लिए राइट क्लिक करने, 'ब्लॉक बड़ा करें' विकल्प चुनने, और ब्लॉक को बड़ा करने का तरीका बताया गया है.