07_ Handout on the essence and practical skills of text measurement and geometric transformation

HenCoder Plus The first 7 course The notes draw （ Two ）

Text measurement 量

Draw text ：drawText()

Text measurement 量 One of the difficulties ： Centered longitudinal measurement 量

• Mode one ：Paint.getTextBounds() after , Use (bounds.top + bounds.bottom) / 2
• Mode two ：Paint.getFontMetrics() after , Use (fontMetrics.ascend + fontMetrics.descend) / 2

Text measurement 量 Difficulty 2 ： Align left

use getTextBounds() After that left To calculate

Text measurement 量 The third difficulty ： in 行

use breakText() To calculate

Canvas Range cutting

• clipRect()
• clipPath() clipPath() Why does the cut circle have no anti aliasing effect ？ because 「 Forced edge cutting 」
• clipOutRect() / clipOutPath()

Canvas The geometric transformation of

• translate(x, y)
• rotate(degree)
• scale(x, y)
• skew(x, y)

a key ：Canvas The geometric transformation method of refers to View The coordinate system of , And the drawing method （drawXxx()） The reference is Canvas Own coordinate system .

About multiple transformations ：

Canvas When the transformation method of is called many times , because Canvas The coordinate system of will be transformed as a whole , So when translating 、 rotate 、 Shrinkage 、 When there are multiple transformations such as staggering ,Canvas The transformation parameters of will be very difficult to calculate , Therefore, we can use the way of understanding in reverse order ：

take Canvas The transformation of is understood as Canvas The coordinate system of 不 change , Each transformation is only for the internal drawing content 行 Transformation , At the same time Canvas The transformation order of is regarded as reverse （ That is, the transformation written below is executed first ）, It can be more convenient 便 Into the 行 Parameter calculation of multiple transformations .

Matrix The geometric transformation of

• preTranslate(x, y) / postTranslate(x, y)
• preRotate(degree) / postRotate(degree)
• preScale(x, y) / postScale(x, y)
• preSkew(x, y) / postSkew(x, y)

among preXxx() Effect and Canvas The method of quasi homonymy is the same , postXxx() Effect and Canvas The order of quasi homonymous methods is opposite .

Be careful
If used repeatedly Matrix, Before use, you need to use Matrix.reset() Come and take Matrix Reset .

Use Camera Do three-dimensional rotation

• rotate() / rotateX() / rotateY() / rotateZ()
• translate()
• setLocation()

among , Generally only rotateX() and rorateY() To do along x Axis or y The rotation of the shaft , And the use of setLocation() To adjust the visual amplitude of zoom .

Yes Camera After the change , Use Camera.applyToCanvas(Canvas) To apply to Canvas.

setLocation()

Generally, the first two parameters of this method are filled 0, The third parameter is negative . Because the unit of this value is hard coded , Therefore, the higher the pixel density of mobile phones , amount to Camera distance View Closer , So it's best to write this value as machine 器 Of density A negative value in direct proportion , for example -6 * density.