Cropping Graphics Part 3 by Erick Tejkowsi 03-05-03 Printer Version

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!