This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
built_in:images [2014/12/05 13:33] 162.252.85.172 [Methods] |
built_in:images [2017/02/02 15:48] 94.222.93.109 [Options] added async description |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== Images ====== | ====== Images ====== | ||
- | ===== Create ===== | ||
- | Create Image controls using the CreateImage method of the app object: | ||
+ | // | ||
+ | |||
+ | ===== Description ===== | ||
+ | Create Image controls using the **CreateImage** method of the **[[built_in: | ||
< | < | ||
- | Use the SetOnTouch method of the Image object to set the name of a function you want to be called when the Image is touched. | ||
- | When Image controls are touched, they send an event object | + | Use the **SetOnTouch** method of the Image object to set the name of a function you want to be called when the Image is touched. |
- | If you don't set a size, the image object | + | When Image controls are touched, they send an **event object** parameter to your callback function which contains details of the touch event, for example the **action** property of the event object |
- | Specifying both width and height will stretch the image to fill the Image object, unless you can use the " | + | If you don't set a size, the image object will match the original image size. If you set one dimension to a positive value and leave the other dimension as -1, then the image will maintain its original **aspect ratio**. |
+ | |||
+ | Specifying both width and height will **stretch** the image to fill the Image object, unless you can use the **" | ||
+ | |||
+ | =====Drawing On Images===== | ||
+ | |||
+ | You can use an image control like a **Canvas** by calling it's drawing methods, such DrawRectangle, | ||
+ | |||
+ | It's possible to draw over a loaded image or you can start with a blank image by passing the value ' | ||
+ | |||
+ | ---- | ||
===== Methods ===== | ===== Methods ===== | ||
- | ^Method ^Description^ | + | Some controls use the same methods.\\ |
- | |Image.Clear() | | | + | For examples of the **[[same methods]]** look here. |
- | |Image.Destroy() | | | + | ^ Method |
- | |Image.Draw( func, p1, p2, p3, p4, p5, p6, p7 ) | | | + | | Image.Clear() |
- | |Image.DrawArc( x1, | + | | Image.Destroy() |
- | |Image.DrawCircle( x,y,radius ) | | | + | | Image.Draw( func, p1, p2, p3, p4, p5, p6, p7 ) | |
- | |Image.DrawImage( image, | + | | Image.DrawArc( x1, y1, x2, y2, start, sweep ) |
- | |Image.DrawImageMtx( image, | + | | Image.DrawCircle( x,y,radius ) | |
- | |Image.DrawLine( x1,y1,x2,y2 ) | | | + | | Image.DrawImage( image, x, y, w, h, angle ) |
- | |Image.DrawPoint( x,y ) | | | + | | Image.DrawImageMtx( image, matrix ) |
- | |Image.DrawRectangle( x1,y1,x2,y2 ) | | | + | | Image.DrawLine( x1, y1, x2, y2 ) | |
- | |Image.DrawText( txt,x,y ) | | | + | | Image.DrawPoint( x, y ) |
- | |Image.GetAbsHeight() | | | + | | Image.DrawRectangle( x1, y1, x2, y2 ) |
- | |Image.GetAbsWidth() | | | + | | Image.DrawText( txt, x, y ) |
- | |Image.GetHeight() | | | + | | Image.GetAbsHeight() |
- | |Image.GetName() | | | + | | Image.GetAbsWidth() |
- | |Image.GetPixelData( format, | + | | Image.GetHeight() |
- | |Image.GetPosition() | | | + | | Image.GetName() |
- | |Image.GetType() | | | + | | Image.GetPixelData( format, left, top, width, height ) | format can be " |
- | |Image.GetVisibility() | | | + | | Image.GetPosition() |
- | |Image.GetWidth() | | | + | | Image.GetType() |
- | |Image.Move( | + | | Image.GetVisibility() |
- | |Image.Release() | | | + | | Image.GetWidth() |
- | |Image.Reset() | | | + | | Image.Move( |
- | |Image.Rotate( | + | | Image.Release() |
- | |Image.Save( fileName ) | | | + | | Image.Reset() |
- | |Image.Scale( | + | | Image.Rotate( |
- | |Image.SetAlpha( alpha ) | | | + | | Image.Save( fileName, |
- | |Image.SetAutoUpdate( onoff ) | | | + | | Image.Scale( |
- | |Image.SetBackColor( | + | | Image.SetAlpha( alpha ) |
- | |Image.SetBackGradient( | + | | Image.SetAutoUpdate( onoff ) | |
- | |Image.SetBackGradientRadial( | + | | Image.SetBackColor( |
- | |Image.SetBackground( | + | | Image.SetBackGradient( |
- | |Image.SetColor( | + | | Image.SetBackGradientRadial( |
- | |Image.SetFontFile( file ) | | | + | | Image.SetBackground( |
- | |Image.SetImage( image, | + | | Image.SetColor( |
- | |Image.SetLineWidth( width ) | | | + | | Image.SetFontFile( file ) |
- | |Image.SetMargins( left, | + | | Image.SetImage( image, |
- | |Image.SetMaxRate( | + | | Image.SetLineWidth( width ) |
- | |Image.SetName( p1 ) | | | + | | Image.SetMargins( left, |
- | |Image.SetOnLoad( callback ) | | | + | | Image.SetMaxRate( |
- | |Image.SetOnLongTouch( | + | | Image.SetName( p1 ) |
- | |Image.SetOnTouch( | + | | Image.SetOnLoad( callback ) |
- | |Image.SetOnTouchDown( | + | | Image.SetOnLongTouch( |
- | |Image.SetOnTouchMove( | + | | Image.SetOnTouch( |
- | |Image.SetOnTouchUp( | + | | Image.SetOnTouchDown( |
- | |Image.SetPadding( | + | | Image.SetOnTouchMove( |
- | |Image.SetPaintColor( | + | | Image.SetOnTouchUp( |
- | |Image.SetPaintStyle( style ) | | | + | | Image.SetPadding( |
- | |Image.SetPosition( | + | | Image.SetPaintColor( |
- | |Image.SetScale( x,y ) | | | + | | Image.SetPaintStyle( style ) | |
- | |Image.SetSize( | + | | Image.SetPosition( |
- | |Image.SetTextSize( size ) | | | + | | Image.SetScale( x,y ) |
- | |Image.SetTouchable( | + | | Image.SetSize( |
- | |Image.SetVisibility( | + | | Image.SetTextSize( size ) |
- | |Image.Skew( p1,p2 ) | | | + | | Image.SetTouchable( |
- | |Image.Transform( matrix ) | | | + | | Image.SetVisibility( |
- | |Image.Update() | | | + | | Image.Skew( p1,p2 ) |
- | |Image.Update2() | | | + | | Image.Transform( matrix ) |
+ | | Image.Update() | ||
+ | | Image.Update2() | ||
- | ===== Sample | + | ===== Options ===== |
+ | |||
+ | ^Option ^Description ^ | ||
+ | |async| Uses the original image size and scale the content using -1 and a scale parameter for width or height when creating the image| | ||
+ | |FontAwesome| Use this option to write icons as Text on your image\\ (see the sample at the bottom)| | ||
+ | |Resize| The Resize option internally scales down the original image to the display size, so it uses up less memory than the full size image (useful if you are displaying lots of thumbnail images)| | ||
+ | |ScaleCenter| you can use the option to keep the image at it's original size and centered within the Image object| | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ====Example - Original Size==== | ||
+ | |||
+ | <code javascript> | ||
+ | function OnStart() | ||
+ | { | ||
+ | lay = app.CreateLayout( " | ||
+ | |||
+ | img = app.CreateImage( "/ | ||
+ | img.SetOnTouch( img_OnTouch ); | ||
+ | lay.AddChild( img ); | ||
+ | |||
+ | app.AddLayout( lay ); | ||
+ | } | ||
+ | |||
+ | function img_OnTouch( ev ) | ||
+ | { | ||
+ | if( ev.action==" | ||
+ | app.ShowPopup( " | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ====Example - Stretched==== | ||
+ | |||
+ | <code javascript> | ||
+ | function OnStart() | ||
+ | { | ||
+ | lay = app.CreateLayout( " | ||
+ | |||
+ | img = app.CreateImage( "/ | ||
+ | img.SetOnTouch( img_OnTouch ); | ||
+ | lay.AddChild( img ); | ||
+ | |||
+ | app.AddLayout( lay ); | ||
+ | } | ||
+ | |||
+ | function img_OnTouch( ev ) | ||
+ | { | ||
+ | if( ev.action==" | ||
+ | app.ShowPopup( " | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ====Example - Maintain Aspect==== | ||
+ | |||
+ | <code javascript> | ||
+ | function OnStart() | ||
+ | { | ||
+ | lay = app.CreateLayout( " | ||
+ | |||
+ | img = app.CreateImage( "/ | ||
+ | img.SetOnTouch( img_OnTouch ); | ||
+ | lay.AddChild( img ); | ||
+ | |||
+ | app.AddLayout( lay ); | ||
+ | } | ||
+ | |||
+ | function img_OnTouch( ev ) | ||
+ | { | ||
+ | if( ev.action==" | ||
+ | app.ShowPopup( ev.x[0] + ", " + ev.y[0], " | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ====Example - Draw Shapes==== | ||
+ | |||
+ | <code javascript> | ||
+ | function OnStart() | ||
+ | { | ||
+ | lay = app.CreateLayout( " | ||
+ | |||
+ | img = app.CreateImage( null, 0.8, 0.8 ); | ||
+ | lay.AddChild( img ); | ||
+ | |||
+ | img.SetColor( "# | ||
+ | img.SetPaintColor( "# | ||
+ | img.DrawCircle( 0.5, 0.5, 0.1 ); | ||
+ | img.DrawRectangle( 0.7, 0.7, 0.05 ); | ||
+ | |||
+ | app.AddLayout( lay ); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ====Example - FontAwesome==== | ||
Some say there should always be **Hello World** code. | Some say there should always be **Hello World** code. | ||
- | < | + | < |
- | function OnStart(){ | + | function OnStart() |
- | lay = app.CreateLayout( " | + | { |
+ | | ||
+ | |||
+ | img = app.CreateImage( null, 0.8, 0.8, " | ||
+ | lay.AddChild( img ); | ||
- | img = app.CreateImage( null, 0.8, 0.8, "FontAwesome" | + | img.SetColor( "# |
- | lay.AddChild( img ); | + | img.SetPaintColor( |
+ | img.SetTextSize(42); | ||
+ | img.DrawText( " | ||
- | img.SetColor( "# | + | |
- | img.SetPaintColor( "# | + | |
- | img.SetTextSize(42); | + | |
- | // | + | |
- | img.DrawText( " | + | |
- | app.AddLayout( lay ); | + | |
} | } | ||
</ | </ |