This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
built_in:images [2015/01/08 15:31] thomaskwd [Methods] |
built_in:images [2018/04/19 23:23] (current) |
||
---|---|---|---|
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 ===== | ||
Some controls use the same methods.\\ | Some controls use the same methods.\\ | ||
For examples of the **[[same methods]]** look here. | For examples of the **[[same methods]]** look here. | ||
- | ^Method ^Description^ | + | ^ Method |
- | |Image.Clear() | | | + | | Image.Clear() |
- | |Image.Destroy() | | | + | | Image.Destroy() |
- | |Image.Draw( func, p1, p2, p3, p4, p5, p6, p7 ) | | | + | | Image.Draw( func, p1, p2, p3, p4, p5, p6, p7 ) | |
- | |Image.DrawArc( x1, | + | | Image.DrawArc( x1, y1, x2, y2, start, sweep ) |
- | |Image.DrawCircle( x,y,radius ) | | | + | | Image.DrawCircle( x,y,radius ) | |
- | |Image.DrawImage( image, | + | | Image.DrawImage( image, x, y, w, h, angle ) |
- | |Image.DrawImageMtx( image, | + | | Image.DrawImageMtx( image, matrix ) |
- | |Image.DrawLine( x1,y1,x2,y2 ) | | | + | | Image.DrawLine( x1, y1, x2, y2 ) | |
- | |Image.DrawPoint( x,y ) | | | + | | Image.DrawPoint( x, y ) |
- | |Image.DrawRectangle( x1,y1,x2,y2 ) | | | + | | Image.DrawRectangle( x1, y1, x2, y2 ) |
- | |Image.DrawText( txt,x,y ) | | | + | | Image.DrawText( txt, x, y ) |
- | |Image.GetAbsHeight() | | | + | | Image.GetAbsHeight() |
- | |Image.GetAbsWidth() | | | + | | Image.GetAbsWidth() |
- | |Image.GetHeight() | | | + | | Image.GetHeight() |
- | |Image.GetName() | | | + | | Image.GetName() |
- | |Image.GetPixelData( format, | + | | Image.GetPixelData( format, left, top, width, height ) | format can be " |
- | |Image.GetPosition() | | | + | | Image.GetPosition() |
- | |Image.GetType() | | | + | | Image.GetType() |
- | |Image.GetVisibility() | | | + | | Image.GetVisibility() |
- | |Image.GetWidth() | | | + | | Image.GetWidth() |
- | |Image.Move( | + | | Image.Move( |
- | |Image.Release() | | | + | | Image.Release() |
- | |Image.Reset() | | | + | | Image.Reset() |
- | |Image.Rotate( | + | | Image.Rotate( |
- | |Image.Save( fileName ) | | | + | | [[Image.Save]]( fileName, |
- | |Image.Scale( | + | | Image.Scale( |
- | |Image.SetAlpha( alpha ) | | | + | | Image.SetAlpha( alpha ) |
- | |Image.SetAutoUpdate( onoff ) | | | + | | Image.SetAutoUpdate( onoff ) | Turn On/Off the update on action on image manipulation. By turning off update, call to Image.Update( ) will update the image all commands done on the image. |
- | |Image.SetBackColor( | + | | Image.SetBackColor( |
- | |Image.SetBackGradient( | + | | Image.SetBackGradient( |
- | |Image.SetBackGradientRadial( | + | | Image.SetBackGradientRadial( |
- | |Image.SetBackground( | + | | Image.SetBackground( |
- | |Image.SetColor( | + | | Image.SetColor( |
- | |Image.SetFontFile( file ) | | | + | | Image.SetFontFile( file ) |
- | |Image.SetImage( image, | + | | Image.SetImage( image, |
- | |Image.SetLineWidth( width ) | | | + | | Image.SetLineWidth( width ) |
- | |Image.SetMargins( left, | + | | Image.SetMargins( left, |
- | |Image.SetMaxRate( | + | | Image.SetMaxRate( |
- | |Image.SetName( p1 ) | | | + | | Image.SetName( p1 ) |
- | |Image.SetOnLoad( callback ) | | | + | | Image.SetOnLoad( callback ) |
- | |Image.SetOnLongTouch( | + | | Image.SetOnLongTouch( |
- | |Image.SetOnTouch( | + | | Image.SetOnTouch( |
- | |Image.SetOnTouchDown( | + | | Image.SetOnTouchDown( |
- | |Image.SetOnTouchMove( | + | | Image.SetOnTouchMove( |
- | |Image.SetOnTouchUp( | + | | Image.SetOnTouchUp( |
- | |Image.SetPadding( | + | | Image.SetPadding( |
- | |Image.SetPaintColor( | + | | Image.SetPaintColor( |
- | |Image.SetPaintStyle( style ) | | | + | | Image.SetPaintStyle( style ) | Paint style(line, |
- | |Image.SetPosition( | + | | Image.SetPosition( |
- | |Image.SetScale( x,y ) |Fract values (as usual): 1=original, -1=flip (mirror) | | + | | Image.SetScale( x,y ) |
- | |Image.SetSize( | + | | Image.SetSize( |
- | |Image.SetTextSize( size ) | | | + | | Image.SetTextSize( size ) |
- | |Image.SetTouchable( | + | | Image.SetTouchable( |
- | |Image.SetVisibility( | + | | Image.SetVisibility( |
- | |Image.Skew( p1,p2 ) | | | + | | Image.Skew( p1,p2 ) |
- | |Image.Transform( matrix ) | | | + | | Image.Transform( matrix ) |
- | |Image.Update() | | | + | | Image.Update() |
- | |Image.Update2() | | | + | | Image.Update2() |
- | ===== Sample | + | ===== Options ===== |
+ | |||
+ | ^ Button | ||
+ | | async | Loads the image from file in the background and allows your code to continue without waiting for it to load | | ||
+ | | FontAwesome | ||
+ | | Resize | ||
+ | | ScaleCenter | ||
+ | | Button | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ====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 ); | + | |
} | } | ||
</ | </ |