This shows you the differences between two versions of the page.
built_in:images [2018/04/19 14:52] 78.209.123.22 [Table] |
built_in:images [2018/04/19 23:23] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Images ====== | ||
- | // | ||
- | |||
- | ===== 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** parameter to your callback function which contains details of the touch event, for example the **action** property of the event object contains **" | ||
- | |||
- | 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 ===== | ||
- | Some controls use the same methods.\\ | ||
- | For examples of the **[[same methods]]** look here. | ||
- | ^ Method | ||
- | | Image.Clear() | ||
- | | Image.Destroy() | ||
- | | Image.Draw( func, p1, p2, p3, p4, p5, p6, p7 ) | | | ||
- | | Image.DrawArc( x1, y1, x2, y2, start, sweep ) | ||
- | | Image.DrawCircle( x,y,radius ) | | | ||
- | | Image.DrawImage( image, x, y, w, h, angle ) | ||
- | | Image.DrawImageMtx( image, matrix ) | ||
- | | Image.DrawLine( x1, y1, x2, y2 ) | | | ||
- | | Image.DrawPoint( x, y ) | Draw a point on the image canvas. | ||
- | | Image.DrawRectangle( x1, y1, x2, y2 ) | ||
- | | Image.DrawText( txt, x, y ) | Draw text on x,y position inside the image canvas. | ||
- | | Image.GetAbsHeight() | ||
- | | Image.GetAbsWidth() | ||
- | | Image.GetHeight() | ||
- | | Image.GetName() | ||
- | | Image.GetPixelData( format, left, top, width, height ) | format can be " | ||
- | | Image.GetPosition() | ||
- | | Image.GetType() | ||
- | | Image.GetVisibility() | ||
- | | Image.GetWidth() | ||
- | | Image.Move( x, y ) | Move of a canvas | ||
- | | Image.Release() | ||
- | | Image.Reset() | ||
- | | Image.Rotate( angle, pivotX, pivotY ) | Rotate of a canvas | ||
- | | [[Image.Save]]( fileName, | ||
- | | Image.Scale( x, y ) | Set zoom of a canvas | ||
- | | Image.SetAlpha( alpha ) | Transparency of a canvas | ||
- | | 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( colorCode ) | Set background color | | ||
- | | Image.SetBackGradient( color1, | ||
- | | Image.SetBackGradientRadial( x, | ||
- | | Image.SetBackground( imagefile, | ||
- | | Image.SetColor( color ) | ||
- | | Image.SetFontFile( file ) | Set the font type to be draw on the image. | ||
- | | Image.SetImage( image, | ||
- | | Image.SetLineWidth( width ) | ||
- | | Image.SetMargins( left, | ||
- | | Image.SetMaxRate( ms ) | Set the minimum amount of time (in ms) between OnTouchMove events | ||
- | | Image.SetName( p1 ) | Set name canvas | ||
- | | Image.SetOnLoad( callback ) | ||
- | | Image.SetOnLongTouch( callback ) | | | ||
- | | Image.SetOnTouch( callback ) | | | ||
- | | Image.SetOnTouchDown( callback ) | | | ||
- | | Image.SetOnTouchMove( callback ) | | | ||
- | | Image.SetOnTouchUp( callback ) | | | ||
- | | Image.SetPadding( left, top, right, bottom ) | | | ||
- | | Image.SetPaintColor( color ) | Set the color on draw action to the image. | ||
- | | Image.SetPaintStyle( style ) | Paint style(line, | ||
- | | 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() | ||
- | |||
- | ===== 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 | ||
- | |||
- | ---- | ||
- | |||
- | ====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. | ||
- | <code javaScript helloimage.js> | ||
- | function OnStart() | ||
- | { | ||
- | lay = app.CreateLayout( " | ||
- | |||
- | img = app.CreateImage( null, 0.8, 0.8, " | ||
- | lay.AddChild( img ); | ||
- | |||
- | img.SetColor( "# | ||
- | img.SetPaintColor( "# | ||
- | img.SetTextSize(42); | ||
- | img.DrawText( " | ||
- | |||
- | app.AddLayout( lay ); | ||
- | } | ||
- | </ |