|
2-14-03
Cropping Graphics with REALbasic (Part 2) by
Erick Tejkowski
This week we continue with out multi-part tutorial about cropping graphics with REALbasic. These tutorials
will cover the basics of how to implement click-and-drag graphics selection and cropping, like you'll find
in most popular graphics applications. This week we'll add a splash of color and delve into transparent graphics.
The tutorial emulates a Cocoa project available from Apple.
As we progress through the project each week,
we'll add various features to mimic the original Apple example. So, go check out the original code and come back here
ready for some REALbasic coding. NOTE: This demo is made with OS X in mind.
Augment the Interface
Launch REALbasic and open a copy of last week's project.
Add a PopupMenu control to Window1. Click the Edit button in the InitialValue property of PopupMenu1
in the Properties window. In the dialog that appears, add the following words (each on its own line): Red, Green, Blue.
You can position the control anywhere in the window that you want. Here's what mine looks like.
That's it for the interface enhancements, so let's move on to the code.
Add the Code
Double-click the Window Editor of Window1 to open the Code Editor. Choose Edit-New Property and create one new property.
This new Picture property will be where we we draw a colored mask. We will incorporate that mask into the drag, which
will allow us to colorize the selection.
Next, choose Edit-New Method and create a new method named: DrawMask. As you might have guessed, this method will draw the mask
picture. First, the code selects a color based on the Popupmenu1 selection. Then, it fills in the Picture with a solid rectangle.
Finally, using the Mask property of the Picture object, the code fills in the Picture with a transparent rectangle. ( using RGB(192,192,192) )
pictureMask = newpicture(canvas1.width,canvas1.height,32)
select case popupMenu1.listindex
case 0
//red
pictureMask.graphics.foreColor = rgb(255,0,0)
case 1
//red
pictureMask.graphics.foreColor = rgb(0,255,0)
case 2
//blue
pictureMask.graphics.foreColor = rgb(0,0,255)
end select
pictureMask.graphics.fillrect 0,0,canvas1.width,canvas1.height
pictureMask.mask.graphics.foreColor = rgb(192,192,192)
pictureMask.mask.graphics.fillrect 0,0,canvas1.width,canvas1.height
Add this code to the Open event of Window1 initialize the new Picture:
//prepare Mask image
DrawMask
Then, add the same code to the Change event of PopupMenu1 to change the mask when the user selects a new color:
//PopupMenu1.Change
DrawMask
Next, change the existing code in the MouseDrag event of Canvas1 to track the drag operation using the new mask:
//Canvas1.MouseDrag
dim g as graphics
g=pictureSrc.graphics
if lastx<>x OR lasty<>y then
lastX = X
lastY = Y
g.foreColor=rgb(200,200,200)
g.drawpicture scenery,0,0
g.drawrect startX,startY,lastX-startX,lastY-startY
g=me.graphics
g.foreColor=rgb(200,200,200)
g.drawpicture scenery,0,0
if startX<lastX and startY<lastY then
g.drawrect startX,startY,lastX-startX,lastY-startY
g.drawpicture pictureMask,startX+1,startY+1,lastX-startX-1,lastY-startY-1
elseif startX>lastX and startY>lastY then
g.drawrect lastX,lastY,startX-lastX,startY-lastY
g.drawpicture pictureMask,lastX+1,lastY+1,startX-lastX-1,startY-lastY-1
elseif startX>lastX then
g.drawrect lastX,startY,startX-lastX,lastY-startY
g.drawpicture pictureMask,lastX+1,startY+1,startX-lastX-1,lastY-startY-1
elseif startY>lastY then
g.drawrect startX,lastY,lastX-startX,startY-lastY
g.drawpicture pictureMask,startX+1,lastY+1,lastX-startX-1,startY-lastY-1
end if
end if
That's it! Choose Debug-Run to test your work. Click and drag in the image on the left side of the window to view a cropped version
on the right side.
Conclusion
You can
download the completed project here.
We'll continue adding features to the project next week. See you then!
2-5-03
REALbasic News
by
Erick Tejkowski
Lorin Leaves
REAL Software's Vice President of Marketing, Lorin Rivers, has announced that he will be leaving the
REALbasic team, effective this week. Since Lorin is one of the people responsible for getting the REALbasic section
at ResExcellence up and running, we wish him the best of luck on his new endeavors!
Control Safari with REALbasic
MACbase has posted a combination REALbasic and AppleScript tutorial
that shows you how to make a floating window manager for Safari.
Project Vacuum
The La Jolla Underground has announced the immediate availability of
Project Vacuum 1.0.
Project Vacuum is designed to work with the REALbasic IDE to merge all external code items
into a single project file. It will merge all external classes, modules and windows into the
main project and save the resulting file as xml. This file may then be used with other
utilities (for instance the Pulp profiling tool)
or transfered to other individuals. At this time, only external code items are merged
into the project - other external items, like AppleScripts, images and resource files,
will not be added to the project.
cPictureButton 1.1
Scott Crick has updated his
cPictureButton class to
Version 1.1. cPictureButton is a canvas-based control that allows developers to create
button controls with complex appearances and shapes. While these buttons are
not Appearance Manager compliant, they do allow the developer to break with
the rectangle-based buttons currently available. All the developer has to do
is supply a picture that is how the button is supposed to look in its
various states tand a mask of the button's shape and the class does the
rest. It's easy to create buttons that are round, polygons or even more
wildly shaped!
Assorted Goodies
Seth Willits has been hard at work. He has two offerings for REALbasic developers:
- The REAL Database Guide which has received praise from dozens of readers has been updated and revised for the new database related classes in 4.5.
- Single selection listbox - It lets you select a single cell in a listbox instead of the entire row. Implemented as a class, so you can use instances of it, or you can also set it to the super of your custom listbox subclasses.
|
Boot Panels
