This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
built_in:images [2014/10/30 19:46] stevegarman add hello world sample |
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 ===== | ||
- | ^Method ^Description^ | + | Some controls use the same methods.\\ |
- | |img.Clear| | | + | For examples of the **[[same methods]]** look here. |
- | |img.Draw| | | + | ^ Method |
- | |img.DrawArc| | | + | | Image.Clear() | | |
- | |img.DrawCircle| | | + | | Image.Destroy() |
- | |img.DrawImage| | | + | | Image.Draw( func, p1, p2, p3, p4, p5, p6, p7 ) |
- | |img.DrawImageMtx| | | + | | Image.DrawArc( x1, y1, x2, y2, start, sweep ) | |
- | |img.DrawLine| | | + | | Image.DrawCircle( x,y,radius ) |
- | |img.DrawPoint| | | + | | Image.DrawImage( image, x, y, w, h, angle ) | |
- | |img.DrawRectangle| | | + | | Image.DrawImageMtx( image, matrix ) | |
- | |img.DrawText| | | + | | Image.DrawLine( x1, y1, x2, y2 ) |
- | |img.GetAbsHeight| | | + | | Image.DrawPoint( x, y ) | Draw a point on the image canvas. |
- | |img.GetAbsWidth| | | + | | Image.DrawRectangle( x1, y1, x2, y2 ) | |
- | |img.GetHeight| | | + | | Image.DrawText( txt, x, y ) | Draw text on x,y position inside the image canvas. |
- | |img.GetName| | | + | | Image.GetAbsHeight() |
- | |img.GetVisibility| | | + | | Image.GetAbsWidth() | Get absolute pixel width size of the image. |
- | |img.GetWidth| | | + | | Image.GetHeight() | |
- | |img.Move| | | + | | Image.GetName() | |
- | |img.Release| | | + | | Image.GetPixelData( format, left, top, width, height ) | format can be " |
- | |img.Reset| | | + | | Image.GetPosition() |
- | |img.Rotate| | | + | | Image.GetType() |
- | |img.Save| | | + | | Image.GetVisibility() | |
- | |img.Scale| | | + | | Image.GetWidth() |
- | |img.SetAlpha| | | + | | Image.Move( x, y ) |
- | |img.SetAutoUpdate| | | + | | Image.Release() | Release object memory. |
- | |img.SetBackColor| | | + | | Image.Reset() | |
- | |img.SetBackGradient| | | + | | Image.Rotate( angle, pivotX, pivotY ) | Rotate of a canvas |
- | |img.SetBackGradientRadial| | | + | | [[Image.Save]]( fileName, |
- | |img.SetBackground| | | + | | Image.Scale( x, y ) | Set zoom of a canvas |
- | |img.SetColor| | | + | | Image.SetAlpha( alpha ) | Transparency of a canvas |
- | |img.SetImage| | | + | | Image.SetAutoUpdate( onoff ) |
- | |img.SetLineWidth| | | + | | Image.SetBackColor( colorCode ) | Set background color |
- | |img.SetMargins| | | + | | Image.SetBackGradient( color1, |
- | |img.SetMaxRate| | | + | | Image.SetBackGradientRadial( x, |
- | |img.SetName| | | + | | Image.SetBackground( imagefile, |
- | |img.SetOnLoad| | | + | | Image.SetColor( color ) | |
- | |img.SetOnLongTouch| | | + | | Image.SetFontFile( file ) | Set the font type to be draw on the image. |
- | |img.SetOnTouch| | | + | | Image.SetImage( image, |
- | |img.SetOnTouchDown| | | + | | Image.SetLineWidth( width ) | |
- | |img.SetOnTouchMove| | | + | | Image.SetMargins( left, |
- | |img.SetOnTouchUp| | | + | | Image.SetMaxRate( ms ) |
- | |img.SetPadding| | | + | | Image.SetName( p1 ) | Set name canvas |
- | |img.SetPaintColor| | | + | | Image.SetOnLoad( callback ) | |
- | |img.SetPaintStyle| | | + | | Image.SetOnLongTouch( callback ) |
- | |img.SetPosition| | | + | | Image.SetOnTouch( callback ) |
- | |img.SetSize| | | + | | Image.SetOnTouchDown( callback ) |
- | |img.SetTextSize| | | + | | Image.SetOnTouchMove( callback ) |
- | |img.SetTouchable| | | + | | Image.SetOnTouchUp( callback ) |
- | |img.SetVisibility| | | + | | Image.SetPadding( left, top, right, bottom ) |
- | |img.Skew| | | + | | Image.SetPaintColor( color ) |
- | |img.Transform| | | + | | Image.SetPaintStyle( style ) |
- | |img.Update| | | + | | Image.SetPosition( left, top, width, height ) | |
+ | | Image.SetScale( x,y ) | Fract values (as usual): 1=original, -1=flip (mirror) | ||
+ | | Image.SetSize( width, height ) | ||
+ | | Image.SetTextSize( size ) | | ||
+ | | Image.SetTouchable( callback ) | ||
+ | | Image.SetVisibility( HideShow ) | | ||
+ | | Image.Skew( p1,p2 ) | | ||
+ | | Image.Transform( matrix ) | | ||
+ | | Image.Update() | | | ||
+ | | 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 ); | + | |
} | } | ||
</ | </ |