Preview of MobiAccess Canvas API





What is Canvas Api

Canvas API is a new feature of MobiAccess which will be released at the middle of autumn (2011). It allows you to create custom graphics in your application, what you can animate.

It can create simple or complex custom controls, or lightweight games in a platform independent way, using MobiAccess.
At this time the implementation of the Canvas API on the Android platform is almost done, and this blog gives a preview of it.

Core features of the Canvas API

The core features of the Canvas API is as follows:

  • Node Tree based structure
  • Transparent and semi-transparent colors
  • Shapes like: Ellipse, Pie, Text, Rectangle, RoundRectangle
  • Custom polygons
  • Picture node
  • Text node
  • Color and Gradient fill of every shape and polygon
  • Stroking shapes
  • Clipping
  • Rotating and Scaling nodes
  • Data Binding and Linking
  • Binding and linking Expressions
  • Timeline animations
  • Dynamic animations
  • Pointer Events

 

Sample Application

This article does not contain a full working project source, because Canvas API hasn’t released in any format. This sort introduction is just a preview of API to demonstrate it’s easy usability.
Let’s create something which demonstrates some of the core features of the new API.

 

Adding Canvas to the Form

The following few lines of code are creating and adding a Canvas to the form, and sets it’s position.

// creating the canvas control var canvas: Canvas = Canvas.CI(); // setting the position of the canvas on the form> canvas.SetPosition(LRTBPos.CI(0.0, 0.0, 0.0, 0.0)); // adding the canvas to the form this.AddControl(canvas);

Creating Rectangel with Gradient Fill

The following code snippet creates a root group which will contain all of our nodes.

// Creating the root group at x,y position 0, 0 var root: Group = Group.CI(0, 0); // adding the root to the canvas canvas.SetNode(root);

Now, we are ready to create our gradient filled rectangle like this:

// Creating a rectangle with the parameters x, y, width, height var rect: Rect = Rect.CI(200, 200, 100, 100);
 // Creating the colors list for Red -> Green -> Blue gradient var colors: List = List.CI(); // red color colors.Add(ArgbColor.CI(1.0, 0.0, 0.0, 1.0)); // green color colors.Add(ArgbColor.CI(0.0, 1.0, 0.0, 1.0)); // blue color colors.Add(ArgbColor.CI(0.0, 0.0, 1.0, 1.0));
 // Creating the gradient // The secound parameter is the angle of the gradient. 0.0 means top2bottom, 0.5 means bottom2top, etc... var gradient: GradientFill = GradientFill.CI(colors, 0.0);
 // getting the rectangle's fill property, and setting it's value to the gradient rect.GetFill().Set(gradient);
 // adding the rectangle to the scene graph root.AddChild(rect);

 

Our rectangle is looks like this:

 

 

Animating the Rectangle

Lets rotate this rectangle! For this, we’ll create a timeline animation. It is simple and easy to use.

The code looks like this:

// creating the list which will stores the keyFrames var keyFrames: List = List.CI(); // the first keyframe // position = 0ms // the property's value at this position = 0.0 // the action which needs to run at this position = null keyFrames.Add(KeyFrame.CI(0, rect.GetRotate(), 0.0, null)); // we are rotating 1080 degrees in 10 sec keyFrames.Add(KeyFrame.CI(10000, rect.GetRotate(), 3.0, null));
 // creating the timeline // keyframes = keyFrames // target fps = 60 fps var timeLine: TimeLine = TimeLine.CI(keyFrames, 60);
 // starting the animation timeLine.Play();


 

Thats All

I hope you enjoyd this short introduction, and getting curios for it. Personally I counting the days till this stuff will be released.

Good luck, have fun and happy coding.

Written by DI

Add comment


Security code
Refresh