Programmer's Notebook

In the past posts, I already write articles about  2D graphic drawing API , and also an article about the black magic of the  Bitmap operations . In this post, I try to write something about graphic transformation. As far as I know there are only four transformation APIs, including translate, scale, rotate and matrix. Also, all the platforms have same transformation APIs, if it is a GUI framework. Those four APIs just like a formula, if you understand them in Android, then you have the ability to do programming in IOS and Html5. The translate, scale and rotate are much more usually used and understandable, the difficult is the matrix, it is the general and mathematic representation of all the transformations in a more powerful way. What’s more, in the past  post , I just used the graphic drawing API directly in coding, actually, it is not enough for making a performance customized UI graphic. The more common case is alway drawing by both the drawing API and graphic...

In the last  post , I introduced the 2D Graphic Drawing in Html5 and android canvas, it is the basic skills if you want running into GUI programming fields, they have the similar drawing API, once you got familiar and fluent in one platform, you will be a master of another GUI platforms in a short time. And why we must learn this 2D graphic drawing API? In Html5 canvas, game developing is the most common scenario to use canvas drawing API, and in Android and IOS platform, if you want to make a custom view or widget, then here we are the 2D drawing show, the difference is that Android is operating those drawing API on a canvas, while the IOS is drawing in a Graphic Context. Again, in the last  example , I learned an example how to drawing custom clock widget in Html5 Canvas, then I ported this widget into Android platform, just the same widget but running in different native platforms. I just enjoy this, and I am looking forward the IOS version of clock widget is my next...

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. moving a point; drawing a line; drawing an arc or circle; drawing a bezier curve; make a path; stroke along the path; 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 transfo...