8.3.16 Detailed Explanation of Canvas API (Part 1)
Category Android Basic Tutorial
Introduction to This Section:
>
We have spent 13 sections in detail explaining most of the commonly used APIs in the Android Paint class. Starting from this section, we will explain some commonly used APIs of Canvas (drawing board). We are in
drawXxx method family: Draw on the current drawing area with certain coordinate values, and the layers will be superimposed, that is, the layers drawn later will cover the layers drawn before.
clipXXX method family: Clip (clip) a new drawing area in the current drawing area, and this drawing area is the current drawing area of the canvas object. For example: clipRect(new Rect()), then this rectangular area is the current drawing area of the canvas.
getXxx method family: Get some values related to Canvas, such as width, height, screen density, etc.
save (), restore (), saveLayer (), restoreToCount () and other methods for saving and restoring layers
translate (translation), scale (scaling), rotate (rotation), skew (skew)
Of course, there are other miscellaneous methods. Well, starting from this section, I will choose some APIs that I feel are interesting for learning~
And this section first brings you a detailed explanation of translate (translation), scale (scaling), rotate (rotation), skew (skew) and save (), restore ().
Official API documentation: Canvas
In addition, we need to clarify the direction of the X-axis and Y-axis in Canvas:
1.translate (Translation)
>
Method: translate (float dx, float dy)
Analysis: Translation, move the coordinate origin of the canvas to the left and right direction by x, and move up and down direction by y, the default position of the canvas is (0,0)
Parameters: dx is the horizontal movement distance, dy is the vertical movement distance
Usage Example:
for(int i=0; i < 5; i++) {
canvas.drawCircle(50, 50, 50, mPaint);
canvas.translate(100, 100);
}
2.rotate (Rotation)
>
Method: rotate (float degrees) rotate (float degrees, float px, float py)
Analysis: Rotate around the coordinate origin by degrees, the value is positive clockwise
Parameters: degrees is the rotation angle, px and py are the coordinates of the specified rotation center point (px,py)
Usage Example:
Rect rect = new Rect(50,0,150,50);
canvas.translate(200, 200);
for(int i = 0; i < 36;i++){
canvas.rotate(10);
canvas.drawRect(rect, mPaint);
}
Running Effect:
Code Analysis:
Here we first call translate(200, 200) to move the coordinate origin of the canvas to (200,200), and then draw, so our drawing results can be fully displayed on the canvas. If we set (10,200,200) for rotate, it would be such a result:
There are doubts, right? This involves the concept of multiple layers of Canvas, which will be discussed later~
3.scale (Scaling)
>
Method: scale (float sx, float sy) scale (float sx, float sy, float px, float py)
Analysis: Scale the canvas
Parameters: sx is the horizontal scaling ratio, sy is the vertical scaling ratio, px and py I also don't know, fractional numbers are for reduction, integers are for enlargement
Usage Example:
canvas.drawBitmap(bmp,0,0,mPaint);
canvas.scale(0.8f, 0.8f);
canvas.drawBitmap(bmp, 0, 0, mPaint);
canvas.scale(0.8f, 0.8f);
canvas.drawBitmap(bmp,0,0,mPaint);
Running Effect :
4.skew (Skewing)
>
Method: skew (float sx, float sy)
Analysis: Skewing, also known as shearing, distorting
Parameters: sx is the corresponding angle in the x-axis direction Implementation Code:
RectF bounds = new RectF(0, 0, 400, 400);
canvas.saveLayer(bounds, mPaint, Canvas.CLIP_TO_LAYER_SAVE_FLAG);
canvas.drawColor(getResources().getColor(R.color.moss_tide));
canvas.drawBitmap(bmp, 200, 200, mPaint);
canvas.restoreToCount(1);
canvas.drawBitmap(bmp, 300, 200, mPaint);
Running Results:
Regarding the use of saveLayer(), let's delve into more details later. For now, just get a rough idea.
Moving on to restoreToCount(int), this is even simpler. Just pass in the layer number you want to restore to, and it will jump directly to that layer, simultaneously removing all layers above it from the stack, making that layer the top of the stack! It's much more convenient than writing multiple restore() calls.
7. Code Sample Download for This Section:
Well, the code is written for testing, and it's not very interesting to come here, but perhaps readers still want it, so I'll post the link!
Code Download: CanvasDemo.zip Maybe this is the picture you want! Haha~
Summary of This Section:
>
This section took a few days to write because the author was not very clear about the concept of Canvas layers at first.
After finishing work this afternoon, I sorted out my thoughts, and after working overtime tonight, I finally wrote this article. I believe it should help everyone understand Canvas more clearly, and you won't be confused when customizing controls. Hehe, that's it for this section. If there are any mistakes, please feel free to point them out. Thank you very much.
References: Mastering Android Canvas! – Basic Drawing
-1.0.1 Latest Android Basic Tutorial Catalog for 2015
-1.1 Background and System Architecture Analysis
-1.2 Development Environment Setup
-1.2.1 Developing Android APPs with Eclipse + ADT + SDK
-1.2.2 Developing Android APPs with Android Studio
-1.3 Solving SDK Update Issues
-1.4 Genymotion Emulator Installation
-1.5.1 Git Tutorial for Local Repository Basic Operations
-1.5.2 Git for Creating Remote Repositories on GitHub
-1.6 How to Play with 9-patch Images
-1.7 Interface Prototype Design
-1.8 Project Analysis (Various Files, Resource Access)
-1.9 Android App Signing and Packaging
-1.11 Decompiling APK to Retrieve Code & Resources
-2.1 The Concept of View and ViewGroup
-2.2.1 LinearLayout (Linear Layout)
-2.2.2 RelativeLayout (Relative Layout)
-2.2.3 TableLayout (Table Layout)
-2.2.4 FrameLayout (Frame Layout)
-2.2.5 GridLayout (Grid Layout)
-2.2.6 AbsoluteLayout (Absolute Layout)
-2.3.1 TextView (Text Box) Detailed Explanation
-2.3.2 EditText (Input Box) Detailed Explanation
-2.3.3 Button (Button) and ImageButton (Image Button)
-2.3.5 RadioButton (Radio Button) & Checkbox (Checkbox)
-[2.3.6 ToggleButton (Toggle Button) and Switch (Switch)]
4.4.2 Further Exploration of ContentProvider - Document Provider
5.2.1 Detailed Explanation of Fragment Example - Implementation of Bottom Navigation Bar (Method 1)
5.2.2 Detailed Explanation of Fragment Example - Implementation of Bottom Navigation Bar (Method 2)
5.2.3 Detailed Explanation of Fragment Example - Implementation of Bottom Navigation Bar (Method 3)
5.2.4 Detailed Explanation of Fragment Example - Bottom Navigation Bar + ViewPager Page Switching
6.2 Data Storage and Access - SharedPreferences for Saving User Preferences
7.1.1 Android Network Programming and HTTP Protocol Learning
-10.6 PowerManager (Power Service)
-10.7 WindowManager (Window Management Service)
-10.8 LayoutInflater (Layout Service)
-10.9 WallpaperManager (Wallpaper Manager)
-10.10 Sensor Special (1) – Introduction
-10.11 Sensor Special (2) – Orientation Sensor
-10.12 Sensor Special (3) – Accelerometer/Gyroscope Sensor
-10.12 Sensor Special (4) – Understanding Other Sensors
-10.14 Introduction to Android GPS
-11.0 "2015 Latest Android Basic Tutorial" Completion Celebration~
-12.2 DrySister Girl Watching App (First Edition) -- 2. Parsing Backend Data
-12.4 DrySister Girl Watching App (First Edition) -- 4. Adding Data Caching (Integrating SQLite)