Contents
Picture Clip Sample Help

Sample Description: Picture Clip

Points of Interest

How the Picture Clip Sample was Constructed

Running the Picture Clip Sample

Control

Image

Bitmap

For Help on Help, Press F1


Picture Clip

The Picture Clip sample demonstrates a technique of how the various properties of an Image control may be used to display a portion of a bitmap in one image, from a larger bitmap that may be loaded in Envelop.

The techniques used in referencing and display portions of a larger bitmap, may be automated through a Timer control to produce an animated image display.  This is a similar concept to displaying several frames of a film strip where the film strip represents the large bitmap and each individual frame is displayed in a single image.  A timers Timeout event can be used to move the display to the next frame.  An example of this technique can be found in the "Picture Clip Animation" which is part of the Basic Training samples.

The properties of the Image control that provide the ability to reference a portion of a bitmap, give you the ability to create various types of pan/zoom functionality.  Another way you may use this functionality is to have several "views" of a single bitmap displayed in a document.  Since these various images reference the same bitmap, only different areas of the bitmap, you can minimize the memory overhead in your application by having only a single bitmap loaded into memory.


How the Picture Clip Sample was Constructed

In the Picture Clip sample, a large bitmap is displayed at the top of the test form.  This large image (imgFullDisplay) contains a bitmap which has several rows and columns of icons.  At the bottom of the test form, a small image control (imgCropDisplay) appears to contain a single bitmap.

In essence, both image controls are referencing and displaying the same bitmap (bmpIcons).  The large image displays the entire bitmap at a 1:1 scale while the smaller bitmap displays a portion of the bitmap, also at a 1:1 scale.

The size of the bitmap is 286 height by 288 wide.  In the small image control, the area being displayed is 23 x 25 pixels determined by CropYSize and CropXSize properties.  The actual icon displayed are determined by the values of the CropYOffset and CropXOffset properties.

To demonstrate the role of changing the setting of the CropXOffset and CropYOffset properties, a ScrollBar control (sbrNavigator) has been added to the test form.  This scrollbar has a Min property of 1 and a Max property of 156, which corresponds to the number of icons in the bitmap.  As the scrollbar is clicked, its Value property is passed to a DisplayIcon method which determines the exact row and column of where the icon is located and adjusts the CropXOffset and CropYOffset properties.

 These row and column values are then passed to the MoveDisplayBox method which is used to move the location of a MarkupLayer control (picOutline) over a corresponding row/column location on the large bitmap to indicate which icon is being referenced and displayed in the small image control.

Finally, a MouseDown event handler on the large image control has been programmed to pass its z,y values to a Convert2RowColumn method.  This method takes the x,y values of the mouse cursor and converts them into corresponding row/column values and passes uses those values to set the scrollbar's Value property.  This basically allows you to click on an icon in the larger image control and display that image in the smaller image control.


Running the Picture Clip Sample

To run the Picture Clip sample, simply click over any of the icons shown in the image control containing the large bitmap.  This bitmap has 12 columns and 13 rows of individual icons.  As a single icon is clicked, it will appear in the smaller image control at the bottom of the form.

Click the ends of the scrollbar to move the next or previous icon display or use the mouse to drag the scollbar and jump to other icons.