3D
3D Photo Gallery (Part 1)
3D Photo Gallery (Part 2)

Audio
Poor Man's MIDI
Make A Metronome
iPod Tricks (Part 1)
iPod Tricks (Part 2)
iPod Tricks (Part 3)
Laugh Track Machine
Audio Player with Reverb
Shepard Melody
RB Phone Home
Build a Drum Machine

Custom Controls and Windows
Double Click Listbox
Draggable Metal Window
Double Click Canvas
Custom Buttons
Custom Buttons Part II
iTunes-style Listboxes
Custom Controls


General RB
Scrolling Windows
Using Mesage Dialogs
Case-Sensitive Word Finder
Introduction to Stacks
Wiggle Window
JPEG in PDF
Listbox Checkboxes
Background Applications
Listbox Auto-Find
Virtual Volumes
Time Tracker
Software Distribution (Part 1)
Software Distribution (Part 2)
Software Distribution (Part 3)
Software Distribution (Part 4)
Exceptions
Tips and Tricks
Text Clippings Made Easy

Graphics
Drawing a Simple Gradient
The SpriteSurface: Space Game
Image Spinner
Cropping Graphics (Part 1)
Cropping Graphics (Part 2)
Cropping Graphics (Part 3)
Cropping Graphics (Part 4)
Shimmer Graphics
Lissajous Figures
Simple Screen Capture
Vector Graphics
Kaleidoscope Images
Stegonography
Spirals!
Image Table
RB Magnifying Lens
Screen Capture
Color Picker Tutorial

Hacks
Ghost Grab
Speedy Mouse Extension
iTunes Plugins
iTunes Skinner

Mac OS X
Global Hot Key Event (Carbon Events)
Login Welcomer (Carbon Events)
Add/Remove Buttons
Resizable Sheets
Mac OS X Preferences Window
Using Sheets in REALbasic
Build a Bundle (Part 1)
Build a Bundle (Part 2)
Dock Your Passwords
Mac OS X Debugging
REALbasic Mac OS X Icon Tutorial
Animate Your Dock
RB and the Command Line

Menus
Window Menu
Templates Menu
Listbox Menu

Novelty
Guessing Game
Calendar Trivia
Tile Mixer
Zip Code Finder
Happy Valentine's Day
Merlin Simulator (Part 1)
Merlin Simulator (Part 2)
Merlin Simulator (Part 3)
Buzzword Machine
AppleSoft BASIC

Printing
Print to PDF

Registration
Registration Code Validation
Network Registration Codes

Resources
Picture Extractor (Part 1)
Picture Extractor (Part 2)

Serial
Caller ID (Part 1)
Caller ID (Part 2)
Caller ID (Part 3)

Speech
Speech Recognition

Socket Communication
Easy Peer-to-Peer File Sharing
MacPAD Version Checking
Display Web Image In Canvas
HTML IMG Tags
Version Tracking
Even Smarter Instant Messaging
Web Tiler
JavaScript and REALbasic
Stock Ticker (Part I)
Stock Ticker (Part 2)
AIM Mate

XML Manipulation
Simple XML Introduction

Video
Big Brother Video Capture

Note: All articles without a byline were written by Erick Tejkowski. When cleaning the site I removed them because the code differed from page to page, and I have yet to put them back in.

REALbasic for Dummies
by Erick Tejkowski

$19.99 @ Amazon

Files are in Stuffit 6.5 or earlier, or ZIP format.
Download Stuffit Expander

Tell us about a bad link.

Cropping Graphics Part II 02-14-03

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.

• pictureMask as picture

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!

---

Please support ResExcellence by Visiting our Sponsors. One click makes a difference.

Download REALbasic and create your own software!