Difference between revisions of "Ide/Resource Editor/Graphics Editor"

From wiki.visual-prolog.com
(New page: <noinclude>Category:Ide</noinclude> === Graphics Editor Window === When the Graphics Editor is started to edit an image, the Graphics Editor window will appear on the screen: [[Imag...)
 
Line 1: Line 1:
<noinclude>[[Category:Ide]]</noinclude>
<noinclude>[[Category:Ide]]</noinclude>
=== Graphics Editor Window ===
=== Graphics Editor Window ===


Line 37: Line 36:
'''Icon'''
'''Icon'''


Under the [#Graphic_Field Graphic Field], you can see the Icon drop-down list:
Under the {{ide|Resource Editor#Graphic Field|Graphic Field}}, you can see the Icon drop-down list:


[[Image:Ide_GE_IconComboBox.png|center]]
[[Image:Ide_GE_IconComboBox.png|center]]
Line 45: Line 44:
===== Move Toolbar =====
===== Move Toolbar =====
(Moving, Rotating and Flipping an Image)
(Moving, Rotating and Flipping an Image)
To the right of the Graphic Field, under the {{ide|Resource Editor#Image Screen|Image Screen}}, you can see the Image Move toolbar:
To the right of the Graphic Field, under the {{ide|Resource Editor#Image Screen|Image Screen}}, you can see the Image Move toolbar:


[[Image:Ide_I06.png|center|frame|'''mage Move toolbar''']]
[[Image:Ide_I06.png|center|frame|'''Image Move toolbar''']]


By clicking the appropriate button you can move, rotate or flip the current image.
By clicking the appropriate button you can move, rotate or flip the current image.
Line 107: Line 105:
===== Color Modes Toolbar =====
===== Color Modes Toolbar =====


Under the [#Image_Screen Image Screen] you can see the Color Modes tool box:
Under the {{ide|Resource Editor#Image Screen|Image Screen}} you can see the Color Modes tool box:


[[Image:Ide_I10.png|center|frame|'''The Color Modes toolbar''']]
[[Image:Ide_I10.png|center]]
<center>'''The Color Modes toolbar'''</center>


The Color Modes tool box is used to set:
The Color Modes tool box is used to set:
Line 119: Line 118:
===== Draw and Edit Toolbar =====
===== Draw and Edit Toolbar =====
(Using Draw and Edit Tools)
(Using Draw and Edit Tools)
To the left of the Graphic Field of the Graphics Editor window you can see the Draw and Edit Toolbar. It contains the main tools for drawing and editing:
To the left of the Graphic Field of the Graphics Editor window you can see the Draw and Edit Toolbar. It contains the main tools for drawing and editing:


[[Image:Ide_GE_DrawEditToolbox.png|center|frame|'''The Draw and Edit toolbar''']]
[[Image:Ide_GE_DrawEditToolbox.png|center]]
<center>'''The Draw and Edit toolbar'''</center>


The Graphics Editor provides a number of tools to make creating your image easy. The tools can be activated either from the '''Resource | Tools''' menu or from the Draw and Edit toolbar.
The Graphics Editor provides a number of tools to make creating your image easy. The tools can be activated either from the '''Resource | Tools''' menu or from the Draw and Edit toolbar.
Line 146: Line 145:
| [[Image:Ide_I18.png]]
| [[Image:Ide_I18.png]]
| '''Eraser'''
| '''Eraser'''
| To erase a fragment of the image (the same as painting it with the Screen Color), you can use the Eraser Tool in the toolbar.<br /><br />The size of the Eraser can be changed by selecting among the '''Small''' and '''Big''' in the '''Eraser Style''' list button (in the right bottom corner of the Graphics Editor window)
| To erase a fragment of the image (the same as painting it with the Screen Color), you can use the Eraser Tool in the toolbar.<br />The size of the Eraser can be changed by selecting among the '''Small''' and '''Big''' in the '''Eraser Style''' list button (in the right bottom corner of the Graphics Editor window)
|-
|-
| [[Image:Ide_I20.png]]
| [[Image:Ide_I20.png]]
Line 158: Line 157:
| [[Image:Ide_I26.png]]
| [[Image:Ide_I26.png]]
| '''Mirror'''
| '''Mirror'''
| To create symmetrical images use the Mirror tool. The Mirror tool sets the points that are the reflections of the cursor trail point relative to the different axes of symmetry. To choose the appropriate axes of symmetry for the Mirror tool select the '''Resource | [#Mirror_Style_Dialog Set Mirror Style]''' menu command in the Task window menu.
| To create symmetrical images use the Mirror tool. The Mirror tool sets the points that are the reflections of the cursor trail point relative to the different axes of symmetry. To choose the appropriate axes of symmetry for the Mirror tool select the '''Resource <nowiki>|</nowiki> {{ide|Resource Editor#Mirror Style Dialog|Set Mirror Style}}''' menu command in the Task window menu.
|-
|-
| [[Image:Ide_I22.png]]
| [[Image:Ide_I22.png]]
Line 174: Line 173:
| [[Image:Ide_I25.png]]
| [[Image:Ide_I25.png]]
|'''Enter Text'''
|'''Enter Text'''
| Click this button to insert some text in your image. Move the cursor to the position on the Graphic Field where you want to start the text and click the mouse button. You will see a text cursor, which shows you the height of the letters and digits, and the starting point for the current line of text.<br /><br />When you type some text, it will be drawn in the currently selected color, with the currently selected font.<br /><br />To select the desired font settings press '''Ctrl+F'''.<br /><br />While the text is still selected, it is possible to move the starting point clicking in the new position.
| Click this button to insert some text in your image. Move the cursor to the position on the Graphic Field where you want to start the text and click the mouse button. You will see a text cursor, which shows you the height of the letters and digits, and the starting point for the current line of text.<br />When you type some text, it will be drawn in the currently selected color, with the currently selected font.<br />To select the desired font settings press '''Ctrl+F'''.<br />While the text is still selected, it is possible to move the starting point clicking in the new position.
|-
|-
| [[Image:Ide_I28.png]]
| [[Image:Ide_I28.png]]
| '''Mark Area'''
| '''Mark Area'''
|To mark a rectangular fragment of the image on the Graphic Field to be cut, copied or moved, click the '''Mark Area''' tool. Then move the cursor to the Graphic Field cell, which you want to be one corner of a marked rectangular area, and press and hold the mouse button. Release the mouse when the rectangle is of the appropriate size and you will see a sub-region of the image marked accordingly.<br /><br />You can move the marked region to another part of the Graphic Field by means of "drag and drop". Move the cursor into the marked region and press and hold the mouse button. Then, keeping the mouse button depressed, drag the marked fragment to the place of your choice and release the mouse button. Now the marked region is fixed in its new place.<br /><br />If you want to copy the marked region to another place, do as described under move, but hold down the '''Ctrl''' key, while pressing the mouse button in the marked region.<br /><br />When a region is marked:
|To mark a rectangular fragment of the image on the Graphic Field to be cut, copied or moved, click the '''Mark Area''' tool. Then move the cursor to the Graphic Field cell, which you want to be one corner of a marked rectangular area, and press and hold the mouse button. Release the mouse when the rectangle is of the appropriate size and you will see a sub-region of the image marked accordingly.<br />You can move the marked region to another part of the Graphic Field by means of "drag and drop". Move the cursor into the marked region and press and hold the mouse button. Then, keeping the mouse button depressed, drag the marked fragment to the place of your choice and release the mouse button. Now the marked region is fixed in its new place.<br />If you want to copy the marked region to another place, do as described under move, but hold down the '''Ctrl''' key, while pressing the mouse button in the marked region.<br />When a region is marked:
* '''Edit|Cut''' or '''Edit|Copy''' (from the main menu, or the main IDE toolbar '''Cut''' and '''Copy''' buttons, or the standard accelerator keys '''Ctrl+X''' and '''Ctrl+C''')can be used to place it to the clipboard;
* '''Edit|Cut''' or '''Edit|Copy''' (from the main menu, or the main IDE toolbar '''Cut''' and '''Copy''' buttons, or the standard accelerator keys '''Ctrl+X''' and '''Ctrl+C''')can be used to place it to the clipboard;
* '''Edit|Paste''' (or the '''Paste''' toolbar button or accelerator '''Ctrl V''')can be used to scale a image from the clipboard into the region.
* '''Edit|Paste''' (or the '''Paste''' toolbar button or accelerator '''Ctrl+V''')can be used to scale a image from the clipboard into the region.
* The '''[#Paste_Scale_in_Rectangle Paste&amp;Scale]''' tool can be used.
* The '''Paste&Scale''' tool can be used.
<br />'''Note'''<br /> When you use '''Edit|Paste''' , the image fragment will appear in the left top corner of Graphic Field. The region may be moved to another place by the mouse.
'''Note'''<br /> When you use '''Edit|Paste''' , the image fragment will appear in the left top corner of Graphic Field. The region may be moved to another place by the mouse.
|-
|-
| [[Image:Ide_I29.png]]
| [[Image:Ide_I29.png]]
| '''Paste & Scale in Rectangle'''
| '''Paste & Scale in Rectangle'''
| When an image has been copied to the clipboard, this image can be pasted back into another marked area by pressing this button. This button will stay disabled until there are both an image on the clipboard, and a region has been selected.
|-
|-
| [[Image:Ide_I30.png]]
| [[Image:Ide_I30.png]]
Line 193: Line 193:
| [[Image:Ide_I31.png]]
| [[Image:Ide_I31.png]]
| '''Change a Selected Color'''
| '''Change a Selected Color'''
| With this button you can change all pixels that have a given color into another color. The two colors should first be set for the '''Color''' and '''Alt-Color''' selections.<br /><br />'''Note'''<br /> Any pixels, which were colored in background color or in "inverse" color by [#Inverse_Colors Inverse] tool, will keep their original colors.
| With this button you can change all pixels that have a given color into another color. The two colors should first be set for the '''Color''' and '''Alt-Color''' selections.<br />'''Note'''<br /> Any pixels, which were colored in background color or in "inverse" color by '''Inverse''' tool, will keep their original colors.
|-
|-
|[[Image:Ide_I32.png]]
|[[Image:Ide_I32.png]]
Line 204: Line 204:
|}
|}


===== Mirror Style Dialog =====
==== Mirror Style Dialog ====


The '''Mirror Style''' dialog is activated by the '''Resource | Set Mirror Style''' menu command in the Task window menu:
The '''Mirror Style''' dialog is activated by the '''Resource | Set Mirror Style''' menu command in the Task window menu:


<center>[[Image:ge_MirrorStyle.png]]</center>
[[Image:Ide_GE_MirrorStyle.png|center]]
 
<center>'''The Mirror Style dialog'''</center>
<center>'''The Mirror Style dialog'''</center>


The <span class="bold">Mirror Style</span> dialog is used to choose the appropriate axes of symmetry for the <span class="bold">Mirror</span> tool.
The '''Mirror Style''' dialog is used to choose the appropriate axes of symmetry for the '''Mirror''' tool.
 
The <span class="bold">Mirror</span> tool [[Image:I26.png]] sets the points that are the reflections of the <span>'''cursor '''</span><span>'''''trail'''''</span><span>''' point'''</span> relative to the different axes of symmetry.
 
When you place the mouse cursor onto some point inside an edited image and click the left mouse button, then we say that you set the <span>'''cursor '''</span><span>'''''trail'''''</span><span>''' point'''</span>.
 
Using the <span class="bold">Mirror</span> tool, you can (by one click) set up to 8 reflections of the specified cursor <span>''trail''</span><span>''' '''</span>point. A reflection point will be painted to each checked ON type of reflections. They are:
 
Main -&gt; Trial
 
When checked ON, then paints the clicked <span>'''cursor '''</span><span>'''''trail'''''</span><span>''' point'''</span>.
 
Main -&gt; Reverse
 
When checked ON, then paints the point opposite to the clicked cursor trail point.
 
Reflect -&gt; Horizontal
 
When checked ON, then paints the point, which is the horizontal reflection of the clicked cursor trail point.
 
Reflect -&gt; Vertical
 
When checked ON, then paints the point, which is the vertical reflection of the clicked cursor trail point.
 
Orthogonal -&gt; Left
 
When checked ON, then paints the point, which is 90 degrees left rotation of the clicked cursor trail point.
 
Orthogonal -&gt; Right
 
When checked ON, then paints the point, which is 90 degrees right rotation of the clicked cursor trail point.


Reflect Diagonal -&gt; Left
The '''Mirror''' tool [[Image:Ide_I26.png]] sets the points that are the reflections of the '''cursor ''trail'' point''' relative to the different axes of symmetry.


When checked ON, then paints the point, which is the reflection of the clicked cursor trail point relative to the diagonal line drawn from the <span>'''left'''</span> upper corner to the right lower corner of the image.
When you place the mouse cursor onto some point inside an edited image and click the left mouse button, then we say that you set the '''cursor ''trail'' point'''.


Reflect Diagonal -&gt; Right
Using the '''Mirror''' tool, you can (by one click) set up to 8 reflections of the specified cursor ''trail'' point. A reflection point will be painted to each checked ON type of reflections. They are:


When checked ON, then paints the point, which is the reflection of the clicked cursor trail point relative to the diagonal line drawn from the <span>'''right'''</span> upper corner to the left lower corner of the image.
'''Main -> Trial'''
:When checked ON, then paints the clicked '''cursor ''trail'' point'''.
'''Main -> Reverse'''
:When checked ON, then paints the point opposite to the clicked cursor trail point.
'''Reflect -> Horizontal'''
:When checked ON, then paints the point, which is the horizontal reflection of the clicked cursor trail point.
'''Reflect -> Vertical'''
:When checked ON, then paints the point, which is the vertical reflection of the clicked cursor trail point.
'''Orthogonal -> Left'''
:When checked ON, then paints the point, which is 90 degrees left rotation of the clicked cursor trail point.
'''Orthogonal -> Right'''
:When checked ON, then paints the point, which is 90 degrees right rotation of the clicked cursor trail point.
'''Reflect Diagonal -> Left'''
:When checked ON, then paints the point, which is the reflection of the clicked cursor trail point relative to the diagonal line drawn from the '''left''' upper corner to the right lower corner of the image.
'''Reflect Diagonal -> Right'''
:When checked ON, then paints the point, which is the reflection of the clicked cursor trail point relative to the diagonal line drawn from the '''right''' upper corner to the left lower corner of the image.

Revision as of 11:08, 21 March 2013

Graphics Editor Window

When the Graphics Editor is started to edit an image, the Graphics Editor window will appear on the screen:

Graphics Editor Window

The Graphics Editor window is divided into several areas. Each area is responsible for a definite function or combines a number of tools, which are associated by purpose.

Areas of the Graphics Editor Window

Graphics Editor Title Bar

The title bar of the Graphics Editor window serves to display information about the type of the image (icon, cursor or bitmap), the image size in pixels, the number of colors which are available for use, and the name of the file which is opened for the current image.

For example, the title bar ProjectIcon.ico Size 32*32 Colors:16 says that:

  • the type of current image is an icon;
  • the size of the current image is 32*32 pixels;
  • 16 colors may be used in the image;
  • the name of the file, which is opened for current image, is ProjectIcon.ico.
Graphic Field

The Graphic Field is situated in the middle of the Graphics Editor window.

Typical contents of the Graphic Field

The Graphic Field lets you see and edit the current image in expanded mode. The Graphic Field consists of small cells, where each cell corresponds to one pixel on the actual size image. The number of cells in each horizontal row and the number of cells in each vertical column give the image size, which is displayed in the title bar of the Graphics Editor window. It is possible to turn on and off a grid in the Graphic field.

Image Screen

To the right of the Graphic Field in the Graphics Editor window you can see the Image Screen, painted in background color. In the middle of Image Screen you can see the current image in actual size on the selected background color. By changing the background color you can see how your current image will look in various surroundings.

Ide GE ImageScreen.png

Icon

Under the Graphic Field, you can see the Icon drop-down list:

Ide GE IconComboBox.png

You can choose, which of the icon images in the current file to load into the editor.

Move Toolbar

(Moving, Rotating and Flipping an Image) To the right of the Graphic Field, under the Image Screen, you can see the Image Move toolbar:

Image Move toolbar

By clicking the appropriate button you can move, rotate or flip the current image.

Button Button Name Description
Ide I064.png Shift
Left
Moves the image one column to the left. The left edge column crosses the left borderline of the Graphic Field and returns to the Graphic Field as the right edge column
Ide I063.png Shift
Right
Moves the image one pixel column to the right. The right edge column crosses the right borderline of the Graphic Field and returns to the Graphic Field as the left edge column
Ide I061.png Shift
Up
Moves the image one pixel row up. The top row crosses the upper borderline of the Graphic Field and returns to the Graphic Field as the bottom row
Ide I062.png Shift
Down
Moves the image one pixel row down. The bottom row crosses the bottom borderline of the Graphic Field and returns to the Graphic Field as the top row
Ide I066.png Rotate
Left
Rotates the image 90 degrees counter-clockwise around its center
Ide I065.png Rotate
Right
Rotates the image 90 degrees clockwise around its center
Ide I068.png Flip
Horizontal
Flips the image around the vertical axis
Ide I067.png Flip
Vertical
Flips the image around the horizontal axis

Notice that the Resource | Move menu contains the same commands as the Image Move toolbar.

Color Palette

At the top of the Graphics Editor window you can see the Color Palette.

The Color Palette

The Color Palette lets you choose colors for the drawing operations:

  • [GE_Using_Tools_and_Colors.htm#Setting_the_Draw_and_Edit_Colors Setting the Draw and Edit Colors]
  • [GE_Using_Tools_and_Colors.htm#Setting_the_Background_Color Setting the Background Color]
  • [GE_Using_Tools_and_Colors.htm#Setting_the_Inverse__to_Background__Color Setting the Inverse (to Background) Color]
Color Modes Toolbar

Under the Image Screen you can see the Color Modes tool box:

Ide I10.png
The Color Modes toolbar

The Color Modes tool box is used to set:

  • [GE_Using_Tools_and_Colors.htm#Setting_the_Draw_and_Edit_Colors Draw and Edit colors]
  • [GE_Using_Tools_and_Colors.htm#Setting_the_Background_Color Background color]
  • [GE_Using_Tools_and_Colors.htm#Setting_the_Inverse__to_Background__Color Inverse (to Background) color]
Draw and Edit Toolbar

(Using Draw and Edit Tools) To the left of the Graphic Field of the Graphics Editor window you can see the Draw and Edit Toolbar. It contains the main tools for drawing and editing:

Ide GE DrawEditToolbox.png
The Draw and Edit toolbar

The Graphics Editor provides a number of tools to make creating your image easy. The tools can be activated either from the Resource | Tools menu or from the Draw and Edit toolbar.

Draw and Edit Tools

By clicking any of the buttons in the Draw and Edit toolbar you can select the required draw or edit tool. Here are short descriptions of them:

Button Button Name Description
Ide I15.png Pen The Pen tool can be used to color an individual pixel on the Graphic Field or to make a free-hand drawing.
Ide I16.png Brush The Brush tool works the same as Pen tool, except that the Brush tool leaves a larger mark than the Pen. The style of the Brush can be changed by selecting among the Small, Big, and Star in the Brush Style list button (in the right bottom corner of the Graphics Editor window).
Ide I18.png Eraser To erase a fragment of the image (the same as painting it with the Screen Color), you can use the Eraser Tool in the toolbar.
The size of the Eraser can be changed by selecting among the Small and Big in the Eraser Style list button (in the right bottom corner of the Graphics Editor window)
Ide I20.png Color Eraser The Erase Color tool will erase cells of the selected color without changing other colors.
Ide I21.png Fill Contour The fastest way to color an area, which has an enclosed boundary, is to use the Fill Contour tool. Move the cursor into the area to be colored and click the mouse button. The interior of the bounded region will be colored.
Ide I26.png Mirror To create symmetrical images use the Mirror tool. The Mirror tool sets the points that are the reflections of the cursor trail point relative to the different axes of symmetry. To choose the appropriate axes of symmetry for the Mirror tool select the Resource | Set Mirror Style menu command in the Task window menu.
Ide I22.png Line Selecting this button enables you to draw a line between any two points in the image.
Ide I23.png Draw Rectangle Click this button if you need a rectangle. Size the Rectangle by drawing it out with the left button held down, then release.
Ide I24.png Draw Ellipse Choose this tool if you need to draw a circle or an ellipse. Size the circle or ellipse by drawing it out with the left button held down, then release.
Ide I25.png Enter Text Click this button to insert some text in your image. Move the cursor to the position on the Graphic Field where you want to start the text and click the mouse button. You will see a text cursor, which shows you the height of the letters and digits, and the starting point for the current line of text.
When you type some text, it will be drawn in the currently selected color, with the currently selected font.
To select the desired font settings press Ctrl+F.
While the text is still selected, it is possible to move the starting point clicking in the new position.
Ide I28.png Mark Area To mark a rectangular fragment of the image on the Graphic Field to be cut, copied or moved, click the Mark Area tool. Then move the cursor to the Graphic Field cell, which you want to be one corner of a marked rectangular area, and press and hold the mouse button. Release the mouse when the rectangle is of the appropriate size and you will see a sub-region of the image marked accordingly.
You can move the marked region to another part of the Graphic Field by means of "drag and drop". Move the cursor into the marked region and press and hold the mouse button. Then, keeping the mouse button depressed, drag the marked fragment to the place of your choice and release the mouse button. Now the marked region is fixed in its new place.
If you want to copy the marked region to another place, do as described under move, but hold down the Ctrl key, while pressing the mouse button in the marked region.
When a region is marked:
  • Edit|Cut or Edit|Copy (from the main menu, or the main IDE toolbar Cut and Copy buttons, or the standard accelerator keys Ctrl+X and Ctrl+C)can be used to place it to the clipboard;
  • Edit|Paste (or the Paste toolbar button or accelerator Ctrl+V)can be used to scale a image from the clipboard into the region.
  • The Paste&Scale tool can be used.

Note
When you use Edit|Paste , the image fragment will appear in the left top corner of Graphic Field. The region may be moved to another place by the mouse.

Ide I29.png Paste & Scale in Rectangle When an image has been copied to the clipboard, this image can be pasted back into another marked area by pressing this button. This button will stay disabled until there are both an image on the clipboard, and a region has been selected.
Ide I30.png Clear Graphic Field To clear the Graphic Field, click the Clear button. The white color is used for bitmaps and transparent color is used for icons and cursors.
Ide I31.png Change a Selected Color With this button you can change all pixels that have a given color into another color. The two colors should first be set for the Color and Alt-Color selections.
Note
Any pixels, which were colored in background color or in "inverse" color by Inverse tool, will keep their original colors.
Ide I32.png Inverse Colors This button can be used to invert all colors on the image. In this case, any pixels, which were colored in background color or in inverse to background color, will retain their existing colors.
Ide I33.png Grid This button can be used to turn on and off a grid in the Graphic Field

Mirror Style Dialog

The Mirror Style dialog is activated by the Resource | Set Mirror Style menu command in the Task window menu:

Ide GE MirrorStyle.png
The Mirror Style dialog

The Mirror Style dialog is used to choose the appropriate axes of symmetry for the Mirror tool.

The Mirror tool Ide I26.png sets the points that are the reflections of the cursor trail point relative to the different axes of symmetry.

When you place the mouse cursor onto some point inside an edited image and click the left mouse button, then we say that you set the cursor trail point.

Using the Mirror tool, you can (by one click) set up to 8 reflections of the specified cursor trail point. A reflection point will be painted to each checked ON type of reflections. They are:

Main -> Trial

When checked ON, then paints the clicked cursor trail point.

Main -> Reverse

When checked ON, then paints the point opposite to the clicked cursor trail point.

Reflect -> Horizontal

When checked ON, then paints the point, which is the horizontal reflection of the clicked cursor trail point.

Reflect -> Vertical

When checked ON, then paints the point, which is the vertical reflection of the clicked cursor trail point.

Orthogonal -> Left

When checked ON, then paints the point, which is 90 degrees left rotation of the clicked cursor trail point.

Orthogonal -> Right

When checked ON, then paints the point, which is 90 degrees right rotation of the clicked cursor trail point.

Reflect Diagonal -> Left

When checked ON, then paints the point, which is the reflection of the clicked cursor trail point relative to the diagonal line drawn from the left upper corner to the right lower corner of the image.

Reflect Diagonal -> Right

When checked ON, then paints the point, which is the reflection of the clicked cursor trail point relative to the diagonal line drawn from the right upper corner to the left lower corner of the image.