Zoom option
Stay organized with collections
Save and categorize content based on your preferences.
Blockly's main workspace may be scalable, either dynamically by the user,
or statically by the developer.
The zoom settings are defined by an object that is part of Blockly's
configuration
options.
Here is an example:
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox'),
zoom:
{controls: true,
wheel: true,
startScale: 1.0,
maxScale: 3,
minScale: 0.3,
scaleSpeed: 1.2,
pinch: true},
trashcan: true});
controls
Set to true to show zoom-centre, zoom-in, and zoom-out buttons.
Defaults to false.
wheel
Set to true to allow the mouse wheel to zoom. Defaults to false.
startScale
Initial magnification factor. For applications with multiple levels,
startScale is often set to a higher value on the first level, then
incrementally decreased as subsequent levels become more complex.
Defaults to 1.0.
maxScale
Maximum multiplication factor for how far one can zoom in. Defaults to 3.
minScale
Minimum multiplication factor for how far one can zoom out. Defaults to 0.3.
scaleSpeed
For each zooming in-out step the scale is multiplied or divided respectively by
the scale speed, this means that: scale = scaleSpeed ^ steps. Note that in
this formula steps of zoom-out are subtracted and zoom-in steps are added.
Defaults to 1.2.
pinch
Set to true to enable pinch to zoom support on touch devices. Defaults to
true if either the wheel or controls option is set to true.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-06-13 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-06-13 UTC."],[[["\u003cp\u003eBlockly workspaces can be scaled dynamically by users or statically by developers.\u003c/p\u003e\n"],["\u003cp\u003eZoom settings are customizable using Blockly's configuration options, controlling aspects like zoom controls, mouse wheel zoom, and initial scale.\u003c/p\u003e\n"],["\u003cp\u003eZoom levels can be defined using \u003ccode\u003estartScale\u003c/code\u003e, \u003ccode\u003emaxScale\u003c/code\u003e, and \u003ccode\u003eminScale\u003c/code\u003e properties within the configuration object to manage the zoom extent.\u003c/p\u003e\n"],["\u003cp\u003e\u003ccode\u003escaleSpeed\u003c/code\u003e property determines the rate at which the workspace is zoomed in or out with each step.\u003c/p\u003e\n"],["\u003cp\u003ePinch-to-zoom functionality on touch devices can be enabled through the \u003ccode\u003epinch\u003c/code\u003e option in the zoom settings.\u003c/p\u003e\n"]]],[],null,["# Zoom option\n\nBlockly's main workspace may be scalable, either dynamically by the user,\nor statically by the developer.\n\nThe zoom settings are defined by an object that is part of Blockly's\n[configuration\noptions](/blockly/guides/configure/web/configuration_struct#the_options_dictionary).\nHere is an example: \n\n```gdscript\nvar workspace = Blockly.inject('blocklyDiv',\n {toolbox: document.getElementById('toolbox'),\n zoom:\n {controls: true,\n wheel: true,\n startScale: 1.0,\n maxScale: 3,\n minScale: 0.3,\n scaleSpeed: 1.2,\n pinch: true},\n trashcan: true});\n```\n\ncontrols\n--------\n\nSet to `true` to show zoom-centre, zoom-in, and zoom-out buttons.\nDefaults to `false`.\n\nwheel\n-----\n\nSet to `true` to allow the mouse wheel to zoom. Defaults to `false`.\n\nstartScale\n----------\n\nInitial magnification factor. For applications with multiple levels,\n`startScale` is often set to a higher value on the first level, then\nincrementally decreased as subsequent levels become more complex.\nDefaults to `1.0`.\n\nmaxScale\n--------\n\nMaximum multiplication factor for how far one can zoom in. Defaults to `3`.\n\nminScale\n--------\n\nMinimum multiplication factor for how far one can zoom out. Defaults to `0.3`.\n\nscaleSpeed\n----------\n\nFor each zooming in-out step the scale is multiplied or divided respectively by\nthe scale speed, this means that: `scale = scaleSpeed ^ steps`. Note that in\nthis formula steps of zoom-out are subtracted and zoom-in steps are added.\nDefaults to `1.2`.\n\npinch\n-----\n\nSet to `true` to enable pinch to zoom support on touch devices. Defaults to\n`true` if either the `wheel` or `controls` option is set to `true`."]]
