User Tools

Site Tools


<< Back


Graphic Editor

Double-clicking to the right of Items in Object Inspector when a Graphic control is selected opens this editor.

#remarks_header[Parts of the editor]#

The editor consists of the design area, list of objects, property inspector, status bar, the toolbar, context menu, and three buttons.

The design area is where objects are drawn. By default, the grid is displayed. To hide it, click on Options, then on Show grid. As illustrated above, an object has handles. They show as red squares.

The list of objects lists the objects that are currently in the design area. To select an object, click on it here. When selected, the handles of the object are displayed.

The list is in order of Z-order, from back to front.

The property inspector displays the properties of the selected object. To show the handles of a line or bezier curve even when it is not selected, set Show points to True.

The status bar displays the position of the cursor and the number of objects.

The toolbar contains icons for:

  • selection, line, bezier curve, rectangle, ellipse, pie chart, dot, and pixel
  • brush width, fill color, brush color (these are drop-downs)

The Edit button opens a drop-down menu. It contains: Cut, Copy, Paste, Delete, Bring to front, and Send to back.

The context menu offers the same choices; however, as explained below, it sometimes also offers Insert a breakpoint and Remove a breakpoint.

The Options button opens a drop-down menu. It contains: Show grid and Create next shape with current formatting.

To add an object to the control:

  1. Click on a shape in the toolbar
  2. Click and drag in the design area to position and size the object.

Unless Create next shape with the current formatting is checked before adding the object, it is drawn with the default brush width, brush color and fill setting: 1 pixel, black, not filled.

To adjust the size of an object, select it either in the design area or in the list of objects, then either:

  1. Drag one of its handles, or
  2. Change numeric values in the object inspector, or
  3. Move the object horizontally with Ctrl+Left or Ctrl+Right, or
  4. Move the object vertically with Ctrl+Up or Ctrl+Down

To move an object:

  1. For an unfilled object, click anywhere on the object, except on a handle
  2. For a filled object, click anywhere on its edge, except on a handle
  3. Drag the object to its new position.

To select several objects:

  1. Select the first object by clicking on it in the design area or in the list of objects
  2. Shift-click on each of the other objects.

To change the brush or fill color of an existing object:

  1. Select the object
  2. Click on brush width, brush color or fill color in the toolbar,or
  3. Click on the arrow beside it and choose a width or color.

To make visible an object partially or wholly hidden by another, filled, object:

  1. select the hidden object in the list of objects
  2. On the context menu, choose Bring to front.


  1. select the filled object
  2. On the context menu, choose Send to back.

Koda also offers a multi-line or segmented line shape, i.e. a line with another line attached to its end. Koda still calls this a line in the list of objects.

To create a segmented line:

  1. Create a line
  2. If the line is not selected, select it by clicking anywhere on it
  3. Position the cursor on a handle (end-point) of the line. You will know that you have grabbed the handle when the cursor changes to a hand.
  4. Right-click and choose Add line segment.
  5. If the cursor is a pointer, move the cursor to the end-point of the line. The cursor will change to a hand.
  6. Click and drag the cursor to position the other end of the new line.

This feature is powerful enough to insert a line segment starting from the middle of a segmented line.

To remove a point from a segmented line:

  1. Position the cursor on the point to be removed. You will know that you have grabbed the handle when the cursor changes to a hand.
  2. Right-click and choose Remove point.
koda/en/documentation/proped_graphic_editor.txt · Last modified: 2014/07/10 10:48 (external edit)