Custom 2D Drawing in Android and Html5 Canvas


Recently, I attended an online MOOC course about html5 canvas drawing. I was surprised how simple of its drawing API, which has the power to create awesome UI effect.
I summarize the 2D drawing API as two fields: regular shape drawing API and transformation API. As for 2D shape drawing in html5 Canvas there are following limited properties and functions: beginPath, endPath, fillStyle, strokeStyle, stroke, fill, fillRect, moveTo, lineTo, arc, font, fillText, strokeText, createLinearGradient, createRadialGradient, addColorStop, drawImage, bezierCurveTo, quadraticCurveTo.
To sum up, the above 2D drawing API can do following jobs.

  1. moving a point;
  2. drawing a line;
  3. drawing an arc or circle;
  4. drawing a bezier curve;
  5. make a path;
  6. stroke along the path;
  7. fill the closed path with image, colors, gradient effect or patterns;

Then, we count the transformation APIs: save, restore, translate, rotate, scale, transform. No need any more illustrations, is it? The transform one maybe the hardest one, but still can be acceptable, which equals to the transformation matrix in another platform, it can do all the jobs of transformation, translate, rotate and scale.
There is so much similarity between different platforms when came to the basic 2D drawing API and transformation functions. Then after I learned the sample code of this, I porting them to Android OS. Here are the screen shots, the above one is the native Android implementation, the bottom one is the Cordova implementation.




And this is not the ending, I also wrote an electron desktop app, which just wrap the source code to electron’s container.





Here are the source codes, for the Android native and Cordova container implementations check my AndroidClock project. For the electron clock implementation check my electron-clock project. I like the electron, who not, huh.
At the last, thanks liuyubobobo and his excellent courses again.

Comments

Post a Comment

Popular posts from this blog

Bluedroid stack in android

Image
Bluedroid stack in android Table of Contents Bluetooth stack in android Bluedroid .VS. Bluez Porting guide of Bluedroid stack 1 Bluetooth stack in android From Android 4.2, google use Bluedroid stack as its default Bluetooth host stack, before android 4.2, its default Bluetooth host stack was Bluez, which is also the Linux distribution's default stack. So why google changed its Bluetooth stack? The reason is maybe that Bluez stack was designed for the desktop environment, so in order to port Bluez into android, android must solve some dependency issues, like porting Dbus, Linux desktop's default IPC, into android. So there are at least five processes to power Bluetooth before android 4.2, they are systems, Bluetooth APP, Bluez, hciattach, and Dbus. The damn thing is that there are bugs between them, so Bluetooth stack is the weakest part in the android system before android 4.2, yeah, it is the usual reason that android system corrupted. So, what's t
Read more

How to setup a NAT server?

Image
How to setup an NAT server? Table of Contents What is NAT? How to setup NAT host? a shell script from vbird's book 1 What is NAT? NAT stands for Network Address Transition, which is the basic function of gateway host. I try to hack Bluetooth tethering module in android this week, it include the Bluetooth Pan profile and the NAT setup process, which means in order to implement the Bluetooth tethering, first, two devices must be connected by Bluetooth Pan profile, and then the server part device acted as gateway host to supply the network forward service. In other words, after Bluetooth Pan profile connected, the server must to setup its NAT rules to forward the IP packages. So how to setup NAT rules? 2 How to setup NAT host? My memory is still fresh that at the start of my Linux journey, I setup my Linux desktop as an NAT host to provide Internet services for my lab's classmates. During the days as a programmer, I once did a job to hacking android&
Read more

Network programming in elisp

  Network API in elisp Table of Contents 1 Introduction 2 A example 3 Http server implemented by elisp 1 Introduction Emacs is not just an editor, Yes, that's true. Emacs lisp can do network connection programming by its network API. But there is something difference with other kinds of programming language. First, elisp do not support multi-thread, pretty cool, huh!! Yeh, Multi-threads programming is a horrible venture for you, right! Second, There is no socket similarly conception in elisp, and elisp provide network programming ability as processes. Elisp can open a network connection by function – open-network-stream .  It can make network connection server listen a special port by function - make-network-process . Both of those function return a process object. Then you can communicate with the process by process's API. 2 A example I write a snippet code to figure out How to use it. ( require ' cl ) ( defvar my-network-client-b
Read more