1. Common drawing elements
It mainly includes the following drawing elements:
- Drawing type
PDDON provides customized functions for different types of drawings. Each type of drawing has its own specific component type, connection type, functional characteristics, etc.
For different types of drawings, you can choose more usable component libraries according to your preferences, and you can also upload pictures using picture components to achieve richer graphic components.
If you can't find a suitable drawing type, you can create a new freestyle drawing and draw more freestyle drawings.
xxxxxxxxxx* Basic type* UML* Other types
components
PDDON provides a very rich component library, including various graphic components, container components, functional components, etc. The appearance, business meaning, and functional characteristics of different components are different. Components can be connected through wires. Different components have their own connection rules to control whether components allow outgoing/incoming wires. You can view component information through the property panel.
Connection Line
It is used to establish the connection between components and display them in line mode. Different styles of line styles and arrow styles can be set, and description information can be added.
Line
- Line path type
The connection path is determined by the start position and end position. Currently, the following types of paths are supported
xxxxxxxxxx* straight line* curve line* quadratic Bezier curve* Straight polyline* Segment lines by length
- Line whole style
Various line styles preset by PDDON can be selected
- Line base style
You can set the color, width, and other styles of lines
- Description
You can add description information for the connection. The description information can be relative to the connection location:
xxxxxxxxxx* Start Position* Middle Position： default Position* End Position
- Arrow
Different styles of arrows can be set for the connection. Controls whether arrows are displayed at the start and end positions and whether arrows need to be filled. You can set arrow size, arrow shape, color, etc
Anchor point
- Anchors are attached to components. When components introduce/export wires, you need to select anchors at specific locations for connection.
- The connection operation is allowed only when the component is not selected.
- When the mouse accesses the component, it can display the preset anchor points in the component.
- Move the mouse at the inner edge of the component area and click to trigger the custom position anchor.
- Anchors can lead out or lead in connections.
- Control point
When the component is selected, each control point will be displayed around the component to modulate the size of the component.
2. Draw mode
In most drawing scenarios, we use the default intelligent mode of PDDON to draw, which can meet most of the requirements. However, in some special refined drawing scenarios, we need to use other drawing modes. It mainly includes the following drawing modes.
Smart Mode
At the same time, you can drag components and draw lines, which are triggered by hovering over the edge of components.
Move Mode
It is easier to carry out various operations on components, such as moving position, adjusting size, etc., but it can not be connected for operation.
Draw Line Mode
It is easier to draw lines, but it is not possible to drag component positions.
Drag Mode
You can use the grip tool to drag the position of the canvas viewport, but you can't connect it.
3. Common operations
Check/uncheck components
Select/deselect components by:
Click with mouse (CTL+click with mouse is multi-selection, otherwise it is single-choice)
Rectangular selection box (hold down the left mouse button in the blank area to drag)
The unselected node contained in the region represents the selected node, otherwise it is in the unselected state, and the rectangular box selection operation is in the multi-selection mode
Shortcut key (Ctrl+A)
Right-click menu (select component/wire or uncheck)
Click an empty area of the canvas to cancel all selections
Edit component/connection text
Double-click the component or wire to enter the editing text status. Right-click and select the editing menu to enter the editing status of the component.
Move component position
Single component movement：
Move the cursor to the component area, and the cursor is in the moving style. Press and hold the left mouse button to move to the target direction (the container component cursor needs to move to the title bar or near the border edge, and operate with the cursor style as the indication). The movement of container type components will drive the movement of sub-components. During the movement, there will be auxiliary line reference alignment and automatic adsorption.
Select component/group move：
You can select multiple target components or groups, hold down the left mouse button and drag to the target location.
Change component size
When a single component is selected, the component control points can be displayed, and the left mouse button can be pressed and dragged to adjust the size of the component.
Connection operation
- In smart mode, hover the mouse over the edge of the component to lead out the connection, pull it to the target component to release the lead in connection, and the connection is created successfully.
- In the line drawing mode, hover the mouse over the component to lead out the line, pull it to the target component to release the lead in line, and the line is created successfully.
- The mouse is led out or brought in from the anchor point on the edge of the component. You can specify the anchor point connection. Otherwise, the system automatically calculates the connection anchor point according to the component position relationship, and can automatically modify the connection anchor point as the component position changes.
Undo, restore, copy, clone, cut, paste, delete, etc
Components/wires can be operated by shortcut keys, right-click menus and other methods, and can be operated between different drawings on the same page.
Rotate the component
- Select the component first, and then press and hold the left mouse button to drag to the target direction. The guide line will be displayed at the center point of the component.
- You can also use the right-click menu to rotate or cancel rotation.
Adjust the stacking order between components
When there is overlap between components, you can use the right-click menu or the toolbar stacking order adjustment function to change the vertical stacking order between components.
Resize the canvas
- When adding a drawing, you can set the drawing size
- The canvas size can be automatically adjusted when adding, moving and resizing components
- You can modify the current drawing canvas size through the settings page
- You can modify the drawing canvas size through the view menu
- With the function of automatically cutting the blank area of the canvas, you can cut out the extra blank area of the drawing edge
Scale the canvas as a whole
- Quick zoom with shortcut keys Ctrl+mouse wheel
- Zoom through the toolbar
- Zoom through the view menu
Download as image
You can export the drawing as a image in the specified format, and you can operate the toolbar or menu.
Import and export drawing data
You can use the import and export drawing data function to back up and restore your drawing data.
4. Complete drawing example
After the study of this article, I believe you have a preliminary understanding of PDDON. Now let's see how we use PDDON to draw!
