סקר מחקר: נשמח לשמוע על החוויה שלך עם Blockly
לפתיחת הסקר
כלי רינדור
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
צורת הבלוק נקבעת על ידי המנגנון להצגה, על סמך ההגדרה של הבלוק (כלומר השדות והחיבורים שלו).
מנועי עיבוד גרפי מובנים
ב-Blockly יש שלושה מנועי עיבוד מובנים, שכל אחד מהם מעניק לתוכנית מראה שונה במקצת.
| מפיק |
תיאור |
תמונה |
| Thrasos
|
ה-renderer המומלץ. זוהי גרסה מודרנית יותר של ה-renderer של geras, עם רווחים אחידים יותר וגבולות מוצקים. |
|
| Geras
|
מעבד התצוגה שמוגדר כברירת מחדל. זהו המנגנון המקורי שדרכו Blockly נוצר. |
|
| Zelos |
כלי לרינדור שמבוסס על עיצוב בלוקים של Scratch-3.0. |
 |
כדי להשתמש באחד מהמעבדים האלה, מעבירים את השם לאפשרויות התצורה:
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
מנועי רינדור בהתאמה אישית
אם אתם רוצים לתת לתוכנית מראה שונה מכל אחד מהמעבדים המובנים, תוכלו גם ליצור מעבד מותאם אישית. כדי להתחיל, צוות Blockly ממליץ:
- מומלץ לקרוא את מסמכי התיעוד של מושגים של מנועי עיבוד גרפיקה כדי ללמוד איך כל הרכיבים של מנוע עיבוד גרפיקה משתלבים זה בזה.
- מומלץ להשלים את ה-Codelab בנושא עיבוד תמונה מותאם אישית כדי לקבל תרגול מעשי בנושא עיבוד תמונה מותאם אישית.
- מוסיפים לפרויקט את המיישר (renderer) לניפוי באגים.
- התאמה אישית של המכשיר להמרת גרפיקה.
אלא אם צוין אחרת, התוכן של דף זה הוא ברישיון Creative Commons Attribution 4.0 ודוגמאות הקוד הן ברישיון Apache 2.0. לפרטים, ניתן לעיין במדיניות האתר Google Developers. Java הוא סימן מסחרי רשום של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-25 (שעון UTC).
[null,null,["עדכון אחרון: 2025-07-25 (שעון UTC)."],[[["\u003cp\u003eBlock shape is determined by a renderer based on the block's definition, including fields and connections.\u003c/p\u003e\n"],["\u003cp\u003eBlockly offers three built-in renderers: Thrasos (recommended), Geras (default), and Zelos (Scratch-3.0 based).\u003c/p\u003e\n"],["\u003cp\u003eCustom renderers can be created for unique program aesthetics by following documentation and tutorials.\u003c/p\u003e\n"]]],[],null,["# Renderers\n\nThe shape of a block is determined by a renderer, based on the\n[block's definition](/blockly/guides/create-custom-blocks/define/block-definitions) (that is, its fields and connections).\n\nBuilt-in renderers\n------------------\n\nBlockly provides three built-in renderers, each of which give a slightly\ndifferent feel to the program.\n\n| Renderer | Description | Image |\n|----------|---------------------------------------------------------------------------------------------------------------------|-------|\n| Thrasos | The recommended renderer. It is a more modern take on the geras renderer, with more even spacing and solid borders. | |\n| Geras | The default renderer. It is the original renderer that Blockly was built with. | |\n| Zelos | A renderer based on Scratch-3.0 block design. | |\n\nTo use one of these renderers, pass the name into the configuration options: \n\n Blockly.inject('blocklyDiv', {\n renderer: 'thrasos'\n });\n\nCustom renderers\n----------------\n\nIf you want to give your program a different look and feel than any of the\nbuilt-in renderers, you can also create a custom renderer. To get started the\nBlockly team recommends you:\n\n1. Read through the [renderer concept docs](/blockly/guides/create-custom-blocks/renderers/concepts/overview) to learn how all of the components of a renderer fit together.\n2. Complete the [custom renderer codelab](https://blocklycodelabs.dev/codelabs/custom-renderer/index.html) to get hands-on practice with custom rendering.\n3. Add the [debug renderer](https://www.npmjs.com/package/@blockly/dev-tools#debug-renderer) to your project.\n4. Customize your renderer."]]
