ছবি ক্ষেত্র

একটি ইমেজ ফিল্ড তার ভ্যালু হিসেবে একটি স্ট্রিং এবং টেক্সট হিসেবে একটি স্ট্রিং সংরক্ষণ করে। এর ভ্যালু হলো ইমেজটির 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": "*"
    }
  ]
}

জাভাস্ক্রিপ্ট

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 '। 'বাঁয়ে ঘুরুন' এবং 'ডানে ঘুরুন' আইকনগুলির জন্য এটি উপযোগী।

ক্রমিকীকরণ

ইমেজ ফিল্ডগুলো সিরিয়ালাইজেবল নয়।

ক্লিক হ্যান্ডলার

দ্রষ্টব্য: সাধারণভাবে ভ্যালিডেটর সম্পর্কে তথ্যের জন্য ভ্যালিডেটরস দেখুন।

ইমেজ ফিল্ড কোনো ভ্যালিডেটর গ্রহণ করে না; এর পরিবর্তে এটি স্পষ্টভাবে একটি ফাংশন গ্রহণ করে, যা ফিল্ডটিতে ক্লিক করা হলেই কল করা হয়। এর মানে হলো, ইমেজগুলো ব্লকের মধ্যে থাকা বাটনের মতো কাজ করতে পারে।

জাভাস্ক্রিপ্ট কনস্ট্রাক্টরে অথবা setOnClickHandler ফাংশন ব্যবহার করে অন ক্লিক হ্যান্ডলার সেট করা যেতে পারে।

এখানে একটি অন ক্লিক হ্যান্ডলারের উদাহরণ দেওয়া হলো, যা কল করা হলে ব্লকটিকে সংকুচিত করে।

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