Login
Templates, Tools and Utilities
for Clarion Developers
Templates, Tools and Utilities
|
||
|
|
|
Icetips Article
Back to article list
Search Articles
Add Comment
Printer friendly
Direct link
Par2: Scaling images 2000-04-08 -- Tom Ruby Clarion allows us to place image controls on the screen and on a report and
adjust the size of the image. You can use the properties of this control to
assign the image to a file at run time, and to scale the image so that it
fits in the space you want.
The Image Control
For an image control, you can determine what image shows by changing the
TEXT of the control with PROP:Text. You may use any number of file types,
and the different file types have different characteristics. For example, it
might take the Clarion program a long time to uncompress a JPG file and
display it, while a BMP flashes up almost instantly. It depends which is
faster, uncompressing the image or reading the uncompressed image. I notice
that Clarion doesn't understand the new PNG format.
There are 2 properties which effect the size of the picture on the window or
on the page, PROP:Width and PROP:Height. These properties can be read as
well as written, and properly scaling a picture relies on reading these
properties. After you assign a file to an image control using PROP:Text, you
can read the dimensions of the picture using PROP:Height and PROP:Width. You
can also assign these properties to control the size of the picture.
Usually you find yourself in the situation of fitting an arbitrary image
into a specific space. Again, if you just arbitrarily assign the size, you'
ll likely get a distorted picture. You need to keep in mind the aspect ratio
of the image, which can be thought of as the image's height over the image's
width or the image's width over it's height. So we can determine the picture
's aspect ratio as ?Image1{PROP:Height} / ?Image1{PROP:Width}.
Adjusting the Size
Now let's fit this image into a space W by H. You decide what values W and H
should be any way you like. I often use the width and height of a panel or
region. First, let's make sure the picture is the proper width. The idea is
simple, first set the height to what would be the correct aspect ratio for
the desired width, then set the width:
?Image1{PROP:Height} = W * ?Image1{PROP:Height} / ?Image1{PROP:Width}
?Image1{PROP:Width} = W
You see, we calculated the image height by multiplying the desired width by
the aspect ratio. Then set the width to what we want. What would have
happened if we'd first set the width? Our aspect ratio would have been all
bollixed up!
If the image was smaller than W, this assignment would have enlarged it.
There's always the possibility that the image is now taller than we want it
to be, so we'd better check. Since the picture is still in the proper aspect
ratio, we can do the same calculation for the height:
IF ?Image1{PROP:Height} > H
?Image1{PROP:Width} = H * ?Image1{PROP:Width} /
?Image1{PROP:Height}
?Image1{PROP:Height} = H
END
So now, our picture is undistorted.
Adjust the position
Since we haven't changed the PROP:Xpos or PROP:Ypos, the top left corner of
the picture will be at the original location of the image control. Suppose
we want it to stay centered in an area W by H, with the top left corner (of
the area) at X, Y. Centering is easy, just adjust the starting point by ½
the unused space. So the left edge of the image can be calculated with:
?Image1{PROP:Xpos} = X + ( W - ?Image1{PROP:Width}) / 2
Then, the top edge is:
?Image1{PROP:Ypos} = Y + ( H - ?Image1{PROP:Height})/2
Summary
You can easily fit images into your windows and reports by keeping the
aspect ratio in mind. Remember, to make an image a specific width, (W),
first calculate the height as:
FinishedHeight = W * ImageHeight / ImageWidth
then you can set the image width to W.
If you want to set a specific image height (H), remember to first calculate
the resulting width as:
FinishedWidth = H * ImageWidth / ImageHeight
then you can set the image height to W.
Today is April 24, 2024, 2:47 pm This article has been viewed 35112 times.
|
|