Due to illness, I was unable to post the third part of the Cropping Graphics tutorial last Thursday. To help you catch up, we'll cover two tutorials this week. Instead of the usual REALbasic News, today we'll look at Part 3 of the tutorial. Then, next time we'll complete the project. These tutorials cover the basics of how to implement click-and-drag graphics selection and cropping, like you'll find in many popular applications (e.g.Photoshop, iPhoto, and the Finder). This week we'll add some more color and give the user another selection choice.
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 the last project. Add another PopupMenu control (named PopupMenu2) to Window1. Click the Edit button in the InitialValue property of PopupMenu2 in the Properties window. In the dialog that appears, add the following words (each on its own line): Plain, Finder, iPhoto. Then, edit the existing PopupMenu1 control. Click the Edit button in the InitialValue property of PopupMenu1 in the Properties window. In the dialog that appears, add the color "Gray" ("Grey" for you Canadians. :-) You can position the controls anywhere in the window that you want. Here's what a sample interface might look like.
That's it for the interface additions this time. Let's move on to the code.
Add the Code
Double-click the Window Editor of Window1 to open the Code Editor. Click on the existing DrawMask method and change its code to:
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)
case 3
//grey
pictureMask.graphics.foreColor = rgb(200,200,200)
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
Then, navigate to the MouseDrag event of Canvas1 Remove the code that you have there in favor of the new code. This bit of code incorporates features in the first and second parts of this tutorial. It also adds the new iPhoto selection style. Further, it takes the new PopupMenu2 control into account. Because this code snippet is a tad lengthy and exta-wide (for web browsers), I stuck it in a textbox for easier "copy and pasting".
//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
select case popupMenu2.listindex
case 0
//plain style
select case popupMenu1.listindex
case 0
//red
g.foreColor = rgb(255,0,0)
case 1
//green
g.foreColor = rgb(0,255,0)
case 2
//blue
g.foreColor = rgb(0,0,255)
case 3
//grey
g.foreColor = rgb(200,200,200)
end select
if startX
<lastX and startY<lastY then g.drawrect startX,startY,lastX-startX,lastY-startY elseif startX>
lastX and startY>lastY then
g.drawrect lastX,lastY,startX-lastX,startY-lastY
elseif startX>lastX then
g.drawrect lastX,startY,startX-lastX,lastY-startY
elseif startY>lastY then
g.drawrect startX,lastY,lastX-startX,startY-lastY
end if
case 1
//Finder style
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
case 2
//iPhoto style
if startX
<lastX and startY<lastY then g.drawrect startX,startY,lastX-startX,lastY-startY g.drawpicture pictureMask,0,0,me.width,me.height g.drawpicture scenery,startX+1,startY+1,lastX-startX-1,lastY-startY-1,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,0,0,me.width,me.height
g.drawpicture scenery,lastX+1,lastY+1,startX-lastX-1,startY-lastY-1,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,0,0,me.width,me.height
g.drawpicture scenery,lastX+1,startY+1,startX-lastX-1,lastY-startY-1,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,0,0,me.width,me.height
g.drawpicture scenery,startX+1,lastY+1,lastX-startX-1,startY-lastY-1,startX+1,lastY+1,lastX-startX-1,startY-lastY-1
end if
end select
end if
Select 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. Play around with the colors and the selection styles to see how it works.
Conclusion
You can download the completed project for this week here. We'll continue adding features to the project next time. See you then!