wguimage.gml

开放源码的编译器open watcom 1.6.0版的源代码

.chap The &company Image Editor
.*
.if &e'&dohelp eq 0 .do begin
.section Introduction to the Image Editor
.do end
.*
.np
If you want to design visual resources such as bitmaps, icons, or
cursors and add sizzle to your application's interface, the image
editor can help.
.np
.ix 'Image Editor'
The Image Editor is a visually oriented drawing tool with the power to
draw all the visual resources you want &mdash. exactly the way you
picture them. This way, you can design effective bitmaps, meaningful
icons, and communicative cursors.
.np
Of course, the Image Editor can help bring to life your new artistic
achievements. But it can also copy visual images from anything else
you can see on your computer screen. For example, if you would like to
incorporate a favorite bitmap or icon from your desktop or even from
another application, you can use the Image Editor's Screen Select
option to copy that image to your design grid where you can tailor the
image to your exact specifications. Then, when you are happy with your
visual image, you can save it to an executable.
.np
Most of the sections in this chapter apply to all your visuals, but
for more information on the specific type of visual you are creating,
see the sections specific to creating and editing your specific
resource type.
.np
This chapter contains the following:
.begbull $compact
.bull
Opening the Image Editor
.bull
Closing the Image Editor
.bull
The Main Screen
.bull
The Image Editor Menu Bar
.bull
The Image Editor Toolbar
.bull
The Image Editor Toolbox
.bull
The Image Editor &ccolour Palette
.bull
The Image Editor Status Line
.bull
Creating and Editing Bitmaps
.bull
Creating and Editing Cursors
.bull
Creating and Editing Icons
.endbull
.*
.section Opening the Image Editor
.*
.np
.ix 'Image Editor' 'start'
.ix 'start' 'Image Editor'
.onestep To open the Image Editor:
.step Double click on the Image Editor icon
in your windows program manager,
.orstep Select the Image Editor icon and choose Open from the File menu.
.result
The &company Image Editor window appears.
.endstep
.*
.section Closing the Image Editor
.*
.np
.ix 'Image Editor' 'leave'
.ix 'quit' 'Image Editor'
.onestep To close the Image Editor and return to your desktop:
.step Double click on the system menu
in the top, left corner of the screen,
.orstep Choose Exit
from the File menu.
.endstep
.np
When you close the Image Editor, it remembers the size and position of
its main window, as well as the position of the toolbar and &colour
palette. It also remembers whether the toolbar and &colour palette were
hidden or not. This way, when you open the Image Editor again, it is
set up the same way you left it.
.*
.section The Main Screen
.*
.np
.ix 'Image Editor' 'main screen'
Every time you open the Image Editor, the &company Image Editor window
appears. The toolbar, toolbox, and &colour palette you use to edit your
images appear on top of this window.
:CMT. .figure *depth='3.87' *scale=140 *file='IMG1' The &company Image Editor window
.figure *depth='3.20' *scale=51 *file='IMG1' The &company Image Editor window
.np
You cannot draw or copy images onto the screen itself.
Instead, you must first create a design grid, a work area on which you
can design your visuals. You can create an empty design grid and draw
your own visual or you can create a design grid with an
image from your desktop or another application already on it. Once you
have an image on your design grid you can edit it so it looks exactly
the way you want.
.*
.beglevel
.*
.section Creating a Design Grid
.*
.ix 'Image Editor' 'create design grid'
.ix 'design grid'
.begstep To create a design grid:
.step Choose New
from the File menu.
.result
The Image Type dialog box appears.
.step Select the type of image you want to create
by clicking on either Bitmap, Icon, or Cursor.
.step Click on OK.
.result
A dialog box appears where you specify the image size you want to work
with. The Image Editor automatically defaults to the
standard sizes (in pixels) for bitmaps, icons, and cursors.
To create different sized images, simply enter the desired pixel
width and height.
.step Click on OK.
.endstep
.np
For more information on creating and editing a bitmaps, cursors or
icons, see the sections entitled :HDREF refid='credbmp'.,
:HDREF refid='credico'.,
and
:HDREF refid='credcur'..
.*
.endlevel
.*
.section The Image Editor Menu Bar
.*
.np
.ix 'Image Editor' 'menu bar'
The menu bar along the top of the Image Editor window allows you to
access most of the items in the toolbar, the toolbox, and the &colour
palette. It also provides you with other items that you cannot access
anywhere else except on the menu bar.
:CMT. .figure *depth='1.94' *scale=150 *file='IMG2' The &company Image Editor menu bar
.figure *depth='2.53' *scale=40 *file='IMG2' The &company Image Editor menu bar
.np
To see what an item does, position your cursor over the item and hold
the mouse button. A description of the item appears in the status
line. For more information about the status line, see the section
entitled :HDREF refid='statlne'.. This manual assumes that you know
how to use the menus and are familiar with common menu items such as
Save As and Undo.
.np
Some of the menu items have accelerator keys, also called
accelerators, so you can invoke an item without having to pull down
the menu. This means, for example, that you can start a new image in
three ways. You can either:
.begbull
.bull
Select the new image button from the toolbar, or
.bull
Choose New from the File menu, or
.bull
Press F2 (the accelerator for starting a new image).
.endbull
.*
.section The Image Editor Toolbar
.*
.np
.ix 'Image Editor' 'toolbar'
The toolbar allows you quick and easy access to the most used items in
the menus.
:CMT. .figure *depth='1.94' *scale=150 *file='IMG3' The &company Image Editor tool bar
.figure *depth='0.24' *scale=64 *file='IMG3' The &company Image Editor tool bar
.np
To find out what a button does, position your cursor over the
button and hold the mouse button. A description of the button's
function appears in the bottom right corner of your screen. If you
only wish to read what the button will do and not activate it, drag
your cursor onto another part of the window and then release the
mouse button.
.np
Here is a list of the buttons from left to right in the toolbar and
what they do.
.begpoint $break
.point New
Creates a new bitmap, icon, or cursor
.point Open
Opens an existing file
.point Save
Saves the current image
.point Toggle Grid
Allows you to view the exact pixels on your design grid
.point Maximize
Enlarges the appearance of your image and design grid
.point Clear
Deletes everything on your design grid
.point Snap Bitmap
Allows you to select a bitmap image from your desktop or another
application and place that image on your design grid
.point Shift Right
Moves the current image to the right
.point Shift Left
Moves the current image to the left
.point Shift Up
Moves the current image up
.point Shift Down
Moves the current image down
.point Flip Vertically
Mirrors the current image along the X-axis
.point Flip Horizontally
Mirrors the current image along the Y-axis
.point Rotate 90 Clockwise
Rotates the current image 90 degrees clockwise
.point Rotate 90 Counter Clockwise
Rotates the current image 90 degrees counter clockwise
.endpoint
.*
.section The Image Editor Toolbox
.*
.np
.ix 'Image Editor' 'toolbox'
The toolbox allows you to conveniently select and change the tool you
are using to edit your image, without having to hunt through the menus
for the tool you want.
:CMT. .figure *depth='2.06' *scale=150 *file='IMG4' The &company Image Editor toolbox
.figure *depth='1.63' *scale=64 *file='IMG4' The &company Image Editor toolbox
.np
Here is a list of the tools and what they do.
.begpoint $break
.point Pencil
Draws on the grid, pixel by pixel
.point Lines
Draws straight lines on the grid
.point Ellipse Outline
Draws outlines of circles and ellipses
.point Ellipse Fill
Draws filled circles and ellipses
.point Rectangle Outline
Draws outlines of rectangles
.point Rectangle Fill
Draws filled rectangles
.point Brush
Draws on the grid in various brush sizes
.point Select Region
Allows you to select a rectangular region on the grid
.point Select Hot Spot
Allows you to select the cursor hot spot (for cursors only)
.endpoint
.*
.section The Image Editor &ccolour Palette
.*
.np
.ix 'Image Editor' '&colour palette'
.ix '&colour' 'defining in Image Editor'
If you want to draw or fill a new visual in different &colour.s, or
change the &colour.s of an existing bitmap, icon, or cursor, the &colour.
palette allows you to select the &colour.s you want.
:CMT. .figure *depth='1.05' *scale=150 *file='IMG5' The &company Image Editor &colour palette
.figure *depth='1.02' *scale=90 *file='IMG5' The &company Image Editor &colour palette
.begstep To select a &colour:
.step Click either the left or right mouse button on the &colour
in the &colour palette that you wish to assign to that button.
.step Select a drawing tool.
.step Draw or fill
holding down the mouse button assigned to the &colour you
want.
.endstep
.np
For example, if you want to draw a red line:
.autonote
.note
Create a design grid for the resource you want
.note
Select a shade of red from the &colour palette.
.note
Select the line tool from the toolbox.
.note
Drag your cursor across the design grid.
.endnote