[Laszlo-user] Image scaling proportionally

Benjamin Shine ben at laszlosystems.com
Wed Apr 12 16:10:15 EDT 2006


The blog entry from Victor Laszlo Moholy was written a few years ago,  
and the system has changed since then. In particular, we're now case- 
sensitive. There's a property unstretchedheight, not  
unstretchedHeight. I'm surprised that "${unstretchedHeight}" works at  
all.

Scaling the image proportionally can get a bit tricky. The  
naturalimgview class in LZPIX has code to do this onload; this code  
might help with your problem. From http://labs.openlaszlo.org/lzpix- 
source/

   <!-- naturalimg view is an image view with a one-pixel frame that  
sizes
          itself within its parent, preserving aspect ratio -->
     <class name="naturalimgview" bgcolor="0x5b5b5b" opacity="0">

         <attribute name="fadein" value="500"/>

         <animator name="anm_opacity" attribute="opacity" to="1"  
duration="$once{parent.fadein}"/>

         <view name="interior" x="1" y="1" width="${this.parent.width  
- 2}" height="${this.parent.height - 2}" stretches="both"/>

         <method event="onload" reference="interior">
             this.setDimensions();
             this.setVisible( true );
             this.anm_opacity.doStart();
         </method>

         <method name="setDimensions">
             //Debug.write(this.name, "setDimensions");
             var i = this.interior;
             if (i['resourceheight'] == null) { return; }
             var rh = i.resourceheight;
             var rw = i.resourcewidth;
             if (rw == 0) { return; }
             var rar = rh / rw;
             var h = this.parent.height;
             var w = this.parent.width;
             if (w == 0) { return; }
             var par = h / w;
             if (par < rar) {
                 this.setHeight(h);
                 this.setWidth( Math.round(h / rar) );
             } else if (par > rar) {
                 this.setHeight( Math.round(w * rar) );
                 this.setWidth(w);
             } else {
                 this.setHeight(h);
                 this.setWidth(w);
             }
         </method>
     </class>



On Apr 12, 2006, at 11:58 AM, Mike Pence wrote:

> Here is what I need to do: I need to load some large images, then
> scale them down, proportionally, to fit within a part of the screen.
> This seems like awfully common need, so I am surprised that the answer
> is so difficult to find.  Maybe I am just not looking in the right
> places.
>
> Here is what I have done: I went to this excellent site
> (http://secretartofscience.com/blog/?p=6) and tried the example that
> uses the aspect ratio property. No dice. I am on Laszlo 3.2. Here is
> as simple as I can make it:
>
> <canvas bgcolor="black" width="800" >
>  	<view name="demoview" clip="true" resource="2.jpg"
>  		height="${unstretchedHeight}"
>  		width="${unstretchedWidth}"
>  	>
>       </view>
>  </canvas>
>
> That works, of course. But as soon as I try to do any kind of math
> with those values, say:
>
> ${unstretchedHeight * 0.2}
>
> No image shows up. What am I missing?
>
> Best,
> Mike Pence
>
> _______________________________________________
> Laszlo-user mailing list
> Laszlo-user at openlaszlo.org
> http://www.openlaszlo.org/mailman/listinfo/laszlo-user



More information about the Laszlo-user mailing list