How to fix the max and min zooming

[mohan]

Hi Antun,

<canvas>
<view x="50" y="10" name="foo" resource="56069[2].jpg" stretches="both" />

<button y="200" label="+" width="70" height="20"
onclick="foo.setWidth( foo.width +10 );
foo.setHeight( foo.height + 10); foo.setX(foo.x-5); foo.sety(foo.y-5);"/>

<button x="100" y="200" label="-" width="70" height="20"
onclick="foo.setWidth( foo.width -10 ) ;
foo.setHeight( foo.height - 10);foo.setX(foo.x+5); foo.sety(foo.y+5); "/>


</canvas>

By using above code we can zoomin and zoomout the image.But we have to fix the max and min zoomin and zoomout for value .so that it should not further zoomin or zoomout.
How can i do that?

Thanks alot
Mallesh

[hqm]

Something like this is used in the debugger window
to keep it from getting to large or small

<method name="setWidth" args="w" >
super.setWidth( Math.max( 340 , Math.min( w , canvas.width) ) );
</method>

[antun]

You don't have to put all your code in an event handler. You can write JavaScript code in a <method> instead, where you can include more specific logic:


<canvas>
<view x="50" y="10" name="foo" resource="mypic.gif" stretches="both" />

<button y="200" label="+" width="70" height="20">
<method event="onclick">
<![CDATA[
var maxwidth = 150;
var maxheight = 150;
var increment = 10;

var newWidth = Math.min( foo.width+increment, maxwidth );
var newHeight = Math.min( foo.height+increment, maxheight );

foo.setWidth( newWidth );
foo.setHeight( newHeight );

if ( (newWidth < maxwidth) && newHeight < maxheight ) {
foo.setX(foo.x-increment/2);
foo.sety(foo.y-increment/2);
}
]]>
</method>
</button>

<button x="100" y="200" label="-" width="70" height="20"
onclick="foo.setWidth( foo.width -10 ) ;
foo.setHeight( foo.height - 10);foo.setX(foo.x+5); foo.sety(foo.y+5); "/>

</canvas>


-Antun