Differences

This shows you the differences between two versions of the page.

Link to this comparison view

dglux5_wiki:workspace_and_workflow:panels_and_menus:tools_panel [2019/07/17 19:17] (current)
Line 1: Line 1:
 +{{indexmenu_n>​11}} ​
 +====== Tools and Quick Access Panels ======
 +The Tools panel and Quick Access panel are narrow columns of buttons that appear immediately to the left and right of the [[dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​document_window|Document window]]. On the left, the Tools panel contains tools for selection, transformation,​ drawing, and default styles. On the right, the Quick Access panel contains operations for arranging, grouping, aligning, converting to symbol, and undo and redo.
  
 +You can view information about any tool or command by mousing over it.
 +
 +|{{:​dglux5_wiki:​dglux5_tools_panel.png?​direct|The DGLux5 Tools panel}}|{{:​dglux5_wiki:​dglux5_quick_access_panel.png?​direct|The DGLux5 Quick Access panel}}|
 +|//The Tools panel//​|//​The Quick Access panel//|
 +
 +----
 +
 +===== Tools in the Tools Panel =====
 +
 +These are the tools in the Tools panel. Keyboard shortcuts are in parentheses where they exist.
 +  * {{dglux5_wiki:​189_icn-tool-select.png?​nolink|}} **Selection** tool (S)
 +  * {{:​dglux5_wiki:​191_icn-tool-select-path.png?​nolink|}} **Path Selection** tool (Ctrl + Shift + P)
 +  * {{:​dglux5_wiki:​188_icn-tool-transform.png?​nolink|}} **Free Transform** tool (T)
 +  * {{:​dglux5_wiki:​182_icn-tool-rectangle.png?​nolink|}} **Rectangle** tool (R)
 +  * {{:​dglux5_wiki:​184_icn-tool-ellipse.png?​nolink|}} **Ellipse** tool (E)
 +  * {{:​dglux5_wiki:​177_icn-tool-path.png?​nolink|}} **Path** tool (Ctrl + P)
 +  * {{:​dglux5_wiki:​186_icn-tool-line.png?​nolink|}} **Line** tool (L)
 +  * {{:​dglux5_wiki:​179_icn-tool-polyline.png?​nolink|}} **Polyline** tool (W)
 +  * {{:​dglux5_wiki:​182_icn-tool-rectangle.png?​nolink|}} **SVG Rectangle** tool — Access this tool from within the {{:​dglux5_wiki:​180_icn-tool-shape.png?​nolink|}} Shape tool menu.
 +  * {{:​dglux5_wiki:​184_icn-tool-ellipse.png?​nolink|}} **SVG Ellipse** tool — Access this tool from within the {{:​dglux5_wiki:​180_icn-tool-shape.png?​nolink|}} Shape tool menu.
 +  * {{:​dglux5_wiki:​173_icn-tool-triangle.png?​nolink|}} **SVG Triangle** tool — Access this tool from within the {{:​dglux5_wiki:​180_icn-tool-shape.png?​nolink|}} Shape tool menu.
 +  * {{:​dglux5_wiki:​dglux5_default_fill_stroke.png?​nolink|}} **Default Line Stroke and Fill** tool — The appearance of this tool varies depending on the current default [[dglux5_wiki:​widgets_and_property_inspector:​property_inspector:​allcomponents:​fill_stroke|fill and stroke]] properties.
 +  * {{:​dglux5_wiki:​dglux5_default_text_font.png?​nolink|}} **Default Text and Font** tool — The appearance of this tool varies depending on the current default [[dglux5_wiki:​widgets_and_property_inspector:​property_inspector:​textbox:​home|text and font]] properties.
 +
 +----
 +
 +===== Commands in the Quick Access Panel =====
 +
 +These are the commands in the Quick Access panel. Keyboard shortcuts are in parentheses where they exist.
 +
 +  * {{:​dglux5_wiki:​125_icn-tool-bring-forward.png?​nolink|}} **Bring Forward**
 +  * {{:​dglux5_wiki:​98_icn-tool-bring-to-front.png?​nolink|}} **Bring to Front**
 +  * {{:​dglux5_wiki:​126_icn-tool-send-backward.png?​nolink|}} **Send Backward**
 +  * {{:​dglux5_wiki:​169_icn-tool-send-to-back.png?​nolink|}} **Send to Back**
 +  * {{:​dglux5_wiki:​57_icn-tool-group.png?​nolink|}} **Group** (Ctrl + G, Cmd + G)
 +  * {{:​dglux5_wiki:​95_icn-tool-ungroup.png?​nolink|}} **Ungroup** (Ctrl + U, Cmd + U)
 +  * {{:​dglux5_wiki:​73_icn-arrow-out.png?​nolink|}} **Full Size** (Ctrl + 9, Cmd + 9)
 +  * {{:​dglux5_wiki:​66_icn-pi-autosize.png?​nolink|}} **Auto Size**
 +  * {{:​dglux5_wiki:​108_icn-tool-align-left.png?​nolink|}} **Align**
 +  * {{:​dglux5_wiki:​27_icn-tool-convert-to-symbol.png?​nolink|}} **Convert to Symbol**
 +  * {{:​dglux5_wiki:​128_icn-tool-undo.png?​nolink|}} **Undo** (Ctrl + Z, Cmd + Z)
 +  * {{:​dglux5_wiki:​127_icn-tool-redo.png?​nolink|}} **Redo** (Ctrl + Y, Cmd + Y)
 +
 +----
 +
 +===== Single and Multiple Drawing Modes =====
 +All drawing tools in the Tools panel have two modes: single drawing mode and multiple drawing mode. 
 +
 +=== Single Drawing Mode ===
 +Use single drawing mode when you need to draw one element in the [[dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​document_window|Document window]]. After you draw one element, the {{:​dglux5_wiki:​project_assist:​project_assist_icon_select.png?​nolink|}} **Selection** tool automatically becomes active.
 +  - <​WRAP>​Click once on the tool that you want to use.
 + 
 +The tool is selected, and its icon has a number 1 overlay indicating single drawing mode:
 +
 +{{:​dglux5_wiki:​dglux5_rectangle_blue_1.png?​nolink|Rectangle tool in single drawing mode}}
 +{{:​dglux5_wiki:​dglux5_ellipse_blue_1.png?​nolink|Ellipse tool in single drawing mode}}
 +{{:​dglux5_wiki:​dglux5_path_blue_1.png?​nolink|Path tool in single drawing mode}}
 +{{:​dglux5_wiki:​dglux5_line_blue_1.png?​nolink|Line tool in single drawing mode}}
 +{{:​dglux5_wiki:​dglux5_polyline_blue_1.png?​nolink|Polyline tool in single drawing mode}}
 +{{:​dglux5_wiki:​dglux5_triangle_blue_1.png?​nolink|Triangle tool in single drawing mode}}</​WRAP>​
 +  - <​WRAP>​Draw your element in the Document window.
 + 
 +After you draw the element, the {{:​dglux5_wiki:​project_assist:​project_assist_icon_select.png?​nolink|}} **Selection** tool is automatically selected. You can adjust your element if needed.</​WRAP>​
 +
 +=== Multiple Drawing Mode ===
 +
 +Use multiple drawing mode for drawing multiple elements consecutively. The current tool stays active until you change it.
 +  - <​WRAP>​Click twice on the tool that you want to use.
 +
 +The tool is selected and does not have a number 1 overlay:
 +
 +{{:​dglux5_wiki:​dglux5_rectangle_blue.png?​nolink|Rectangle tool in multiple drawing mode}}
 +{{:​dglux5_wiki:​dglux5_ellipse_blue.png?​nolink|Ellipse tool in multiple drawing mode}}
 +{{:​dglux5_wiki:​dglux5_path_blue.png?​nolink|Path tool in multiple drawing mode}}
 +{{:​dglux5_wiki:​dglux5_line_blue.png?​nolink|Line tool in multiple drawing mode}}
 +{{:​dglux5_wiki:​dglux5_polyline_blue.png?​nolink|Polyline tool in multiple drawing mode}}
 +{{:​dglux5_wiki:​dglux5_triangle_blue.png?​nolink|Triangle tool in multiple drawing mode}}</​WRAP>​
 +  - Draw multiple elements using this tool.
 +  - When you are finished drawing, select a different tool.
 +
 +
 +----
 +
 +==== Tool Functions and Examples ====
 +These are examples and descriptions of using the tools in the Tools panel.
 +
 +^ Example ^ Description ^
 +|{{:​dglux5_wiki:​workspace_and_workflow:​tools:​dglux_tool_selection.png?​direct}} ​   | The **Selection** tool (S) selects an entire object in the [[dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​document_window|Document window]] and can move and resize the object. ​ | 
 +|{{:​dglux5_wiki:​workspace_and_workflow:​tools:​dglux_tool_pathselection.png?​direct}}| The **Path Selection** tool (Ctrl + Shift + P) selects shapes or segments and shows anchor points, direction lines, and direction points.|
 +|{{:​dglux5_wiki:​workspace_and_workflow:​tools:​dglux_tool_transform.png?​direct}} ​   |The **Free Transform** tool (T) scales and rotates objects. It also moves the anchor point around which an object can be rotated. For more information,​ see [[#​free_transform_tool_exmaples|Free Transform Tool Examples.]]|
 +|{{:​dglux5_wiki:​workspace_and_workflow:​tools:​dglux_tool_rectangle.png?​direct}} ​   | The **Rectangle** tool (R) draws squares and rectangles with and without rounded corners.|
 +|{{:​dglux5_wiki:​workspace_and_workflow:​tools:​dglux_tool_ellipse.png?​direct}} ​     | The **Ellipse** tool (E) draws circles and ovals.|
 +|{{:​dglux5_wiki:​workspace_and_workflow:​tools:​dglux_tool_path.png?​direct}} ​        | The **Path** tool (Ctrl + P) draws straight and curved lines that create shapes with or without fill.|
 +|{{:​dglux5_wiki:​workspace_and_workflow:​tools:​dglux_tool_line.png?​direct}} ​        | The **Line** tool (L) draws individual straight lines and concave or convex curve segments.|
 +|{{:​dglux5_wiki:​workspace_and_workflow:​tools:​dglux_tool_polyline.png?​direct}} ​    | The **Polyline** tool (W) draws multiple connected straight lines or curves. |
 +|{{:​dglux5_wiki:​workspace_and_workflow:​tools:​dglux_tools_shapes.png?​direct}} ​     | The **SVG Rectangle**,​ **SVG Ellipse**, and **SVG Triangle** tools draw rectangle, ellipse, and triangle SVG shapes. They can be found in the {{:​dglux5_wiki:​180_icn-tool-shape.png?​nolink|}} Shape tool menu. SVG shapes are richer than native html shapes, but they need more system resources.|
 +|{{:​dglux5_wiki:​workspace_and_workflow:​tools:​dglux_tool_defaultcolors.png?​direct|}}| The **Default Line Stroke and Fill** tool sets the new default line, stroke, and fill. These properties are used for the line, stroke, and fill of objects that are created in the [[dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​document_window|Document window]] using tools in the Tools panel.|
 +|{{:​dglux5_wiki:​dglux5_default_text_font_expanded.png?​direct|}}| The **Default Text and Font** tool sets the new default text and font properties. These properties are used for text components that are created in the [[dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​document_window|Document window]].|
 +
 +----
 +
 +===== Free Transform Tool Examples =====
 +This video shows the three uses of the {{:​dglux5_wiki:​188_icn-tool-transform.png|}} **Free Transform** tool.
 +
 +{{:​dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​dglux5_transform_tool.mp4|}}
 +
 +The video shows these actions:
 +  * To scale an object, drag the points that appear on the object'​s edges.
 +  * To rotate an object, drag the outermost corner points.
 +  * To move the anchor point around which an object can be rotated, click the anchor point and drag it. By default, the anchor point is in the center of the object.
 +
 +Rotating an object using the Free Transform tool changes the object'​s [[dglux5_wiki:​widgets_and_property_inspector:​property_inspector:​allcomponents:​transform|Transform Properties]]. Moving an object'​s anchor point changes the **transformOriginX** and **transformOriginY** properties in the object'​s [[dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​advanced_panel|Advanced properties]].
 +
 +----
 +
 +<WRAP left>​[[dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​symbols_panel|Previous:​Symbols Panel]]</​WRAP>​
 +<WRAP right>​[[dglux5_wiki:​workspace_and_workflow:​panels_and_menus:​widget_palette|Next:​ Widget Palette]]</​WRAP>​