Components is on loading . . . Components is on loading . . . Components is on loading . . . Components is on loading . . .
Easy to use
Quickly learn common drawing skills
Use drawing components
Use Connection/Line
Use more drawing components
Change drawing style
Change line style
Quickly beautification drawing
Use custom drawing components
Some tips for improving drawing efficiency
Some common batch operations
Use Tutorial
Quickly learn common drawing skills

1. Common drawing elements

It mainly includes the following drawing elements:

  1. 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.

  1. 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.

Component example

  1. 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.

Component example

  • Line

    • Line path type

The connection path is determined by the start position and end position. Currently, the following types of paths are supported

  • 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:

  • 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

  1. 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.

Component example

  1. Control point

When the component is selected, each control point will be displayed around the component to modulate the size of the component.

Component example

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.

  1. Smart Mode

    At the same time, you can drag components and draw lines, which are triggered by hovering over the edge of components.

  2. 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.

  3. Draw Line Mode

    It is easier to draw lines, but it is not possible to drag component positions.

  4. Drag Mode

    You can use the grip tool to drag the position of the canvas viewport, but you can't connect it.

Component example

3. Common operations

  1. 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

    Component example

  2. 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.

    Component example

  3. 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.

      Component example

    • Select component/group move:

      You can select multiple target components or groups, hold down the left mouse button and drag to the target location.

      Component example

  4. 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.

    Component example

  5. 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.

    Component example

  6. 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.

    Component example

  7. 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.

    Component example

  8. 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.

    Component example

  9. 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

    Component example

  10. Scale the canvas as a whole

    • Quick zoom with shortcut keys Ctrl+mouse wheel
    • Zoom through the toolbar
    • Zoom through the view menu

    Component example

  11. Download as image

    You can export the drawing as a image in the specified format, and you can operate the toolbar or menu.

  12. 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!

Example of quick hand drawing