How to draw shapes with coldfusion code?

Hi,

I want to draw a shape with coldfusion code. Specifically, I want to draw a rectangle with a given width, and a height defined from a database value.

So, depending on the code, it will always have a width of 25 pixels, and a height of size.rectangleheight.

<cfquery name="size" datasource="mydatasource">
SELECT sizing as rectangleheight
FROM sizingtable
</cfquery>

Code (markup):

Then, is there a function to draw a rectangle as such?

<cfrectangle width="25" height="#size.rectangleheight#">
</cfrectangle>

Code (markup):

 

A few option, from simple to more complex.

Using CSS
<cfoutput>
<div style="background-color: red; width: 25; height: #size.rectangleheight#"></div>
</cfoutput>

Using a image hack: Take an existing "square" image and resize it using the <img> tag's size properties
<cfoutput>
<img src="YourSquareImage.gif" width="25" height="#size.rectangleheight#">
</cfoutput>

Other options are:
- Use CF8's <cfimage> tag to resize your existing "square" image
http://livedocs.adobe.com/coldfusion/8/Tags_i_02.html

- Use SVG to create images
http://www.adobe.com/svg/

 

Using a image hack: Take an existing "square" image and resize it using the <img> tag's size properties
<cfoutput>
<img src="YourSquareImage.gif" width="25" height="#size.rectangleheight#">
</cfoutput>

Code (markup):

I'm using this method, however, as the height changes, I want the height value to build up.

For instance, if the YourSqaureImage.gif is placed at X = 50 and Y = 50... and the #size.rectangleheight# = 20... then the corners of the rectangle are:

Bottom: X = 50, Y = 30
Top: X =50, Y = 50

Instead, I want the height change to be up, not down! So, I'd want it to be:

Bottom: X = 50, Y = 50
Top: X =50, Y = 70

Does that make sense? I've been trying to adjust the align in the properties, but with no luck.

 

Relative to what type of element, text, <td> ... ? You could play around with the old html "align" properties, but I suspect you'll have better luck and more control over position and alignment if you use CSS. For example

Edit: On second read that's probably the reverse of what you want. But I still think your best bet is to use CSS.

 

So, I have a layer I drew. I placed a red square image file inside it. It defaults its position to the top left of the layer. As the height "input" changes, it grows in height down from the top left corner of the layer. Instead, I'd like the image positioned in the bottom left of the layer, and built up as height changes.

Here is my code:

  <div id="Layer15">
<cfquery datasource="mydatabase" name="size">
      SELECT ROUND(RECTHEIGHT) AS RECT
      FROM RECTHEIGHT
      WHERE OBJECT_ID = 25
    </cfquery>
<cfoutput> 
<img src="images/square.png" width="28" height="#size.RECT#" style="vertical-align:bottom">
</cfoutput> 
</div>

Code (markup):

In the diagram below, "-" is the layer boundary, and the "*" is the rectangle, and "." are spaces.

Where RECT = 30
-----------------------
-*****.....................-
-*****.....................-
-*****.....................-
-.............................-
-.............................-
-.............................-
-.............................-
-.............................-
-.............................-
-.............................-
-.............................-
-----------------------

Where RECT = 60
-----------------------
-*****.....................-
-*****.....................-
-*****.....................-
-*****.....................-
-*****.....................-
-*****.....................-
-.............................-
-.............................-
-.............................-
-.............................-
-.............................-
-----------------------


What I want displayed is as follows:

Where RECT = 30
-----------------------
-.............................-
-.............................-
-.............................-
-.............................-
-.............................-
-.............................-
-.............................-
-.............................-
-*****.....................-
-*****.....................-
-*****.....................-
-----------------------


Where RECT = 60
-----------------------
-.............................-
-.............................-
-.............................-
-.............................-
-.............................-
-*****.....................-
-*****.....................-
-*****.....................-
-*****.....................-
-*****.....................-
-*****.....................-
-----------------------

Does that make more sense? So, somehow defaulting the image to position in the lower left portion of the layer should do it, but the code above does not.

Thanks!

 

Try something like this. The borders are for illustration only.

<div style="position: relative; width: 40%; height: 50%; border: thin solid #000000;">
	<img src="yourSquareImage.gif"
		width="25"
		height="60"
		style="bottom: 0; position: absolute;">
</div>

Code (markup):