本篇文章給大家分享的是有關(guān)怎么在Android中使用Paint進(jìn)行繪圖,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)黃山區(qū),十余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
Paint的使用
使用Paint之前需要初始化
mPaint = new Paint();
設(shè)置筆(Paint)的顏色和alpha值:
mPaint.setColor(Color.BLUE); mPaint.setAlpha(255);
注意:alpha的范圍是[0..255],而不是[0..1],是一個int值。
設(shè)置畫筆的樣式:通過mPaint.setStyle()來設(shè)置樣式。
public enum Style { /** * Geometry and text drawn with this style will be filled, ignoring all * stroke-related settings in the paint. */ FILL (0), /** * Geometry and text drawn with this style will be stroked, respecting * the stroke-related fields on the paint. */ STROKE (1), /** * Geometry and text drawn with this style will be both filled and * stroked at the same time, respecting the stroke-related fields on * the paint. This mode can give unexpected results if the geometry * is oriented counter-clockwise. This restriction does not apply to * either FILL or STROKE. */ FILL_AND_STROKE (2); Style(int nativeInt) { this.nativeInt = nativeInt; } final int nativeInt; }
總共有三種畫筆的樣式
FILL:填充內(nèi)容;
STROKE:描邊;
FILL_AND_STROKE:填充內(nèi)容并描邊。
設(shè)置畫筆的寬度
mPaint.setStrokeWidth(50);
設(shè)置畫筆的線帽
通過mPaint.setStrokeCap
來設(shè)置線帽,總共有三種線帽
/** * The Cap specifies the treatment for the beginning and ending of * stroked lines and paths. The default is BUTT. */ public enum Cap { /** * The stroke ends with the path, and does not project beyond it. */ BUTT (0), /** * The stroke projects out as a semicircle, with the center at the * end of the path. */ ROUND (1), /** * The stroke projects out as a square, with the center at the end * of the path. */ SQUARE (2); private Cap(int nativeInt) { this.nativeInt = nativeInt; } final int nativeInt; }
BUTT:沒有線帽,默認(rèn)模式
ROUND:圓形
SQUARE:方形
三種線帽對比:
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mPaint.setColor(Color.BLUE); mPaint.setAlpha(255); //設(shè)置畫筆的樣式 mPaint.setStyle(Paint.Style.FILL_AND_STROKE); //畫筆的寬度 mPaint.setStrokeWidth(50); mPaint.setStrokeCap(Paint.Cap.SQUARE);//方形 mPaint.setStrokeJoin(Paint.Join.BEVEL);//直線 Path path = new Path(); path.moveTo(100, 100); path.lineTo(300, 100); canvas.drawPath(path, mPaint); mPaint.reset();//重置 mPaint.setColor(Color.RED); mPaint.setStyle(Paint.Style.FILL_AND_STROKE); mPaint.setStrokeWidth(50); mPaint.setStrokeCap(Paint.Cap.ROUND);//圓形 mPaint.setStrokeJoin(Paint.Join.BEVEL);//直線 Path path2 = new Path(); path2.moveTo(100, 200); path2.lineTo(300, 200); canvas.drawPath(path2, mPaint); mPaint.reset();//重置 mPaint.setColor(Color.GREEN); mPaint.setStyle(Paint.Style.FILL_AND_STROKE); mPaint.setStrokeWidth(50); mPaint.setStrokeCap(Paint.Cap.BUTT);//沒有 mPaint.setStrokeJoin(Paint.Join.BEVEL);//直線 Path path3 = new Path(); path3.moveTo(100, 300); path3.lineTo(300, 300); canvas.drawPath(path3, mPaint); }
上面代碼中有個重置畫筆,這時候需要重新設(shè)置畫筆。
線帽對比
設(shè)置Join
使用setStrokeJoin方法來設(shè)置Join,Join有三種類型:
BEVEL:直線
ROUND:圓角
MITER:銳角
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mPaint.setColor(Color.BLUE); mPaint.setAlpha(255); mPaint.setStyle(Paint.Style.STROKE);//設(shè)置畫筆的樣式 mPaint.setStrokeWidth(50);//畫筆的寬度 mPaint.setStrokeCap(Paint.Cap.BUTT);//線帽 mPaint.setStrokeJoin(Paint.Join.BEVEL); Path path = new Path(); path.moveTo(100, 100); path.lineTo(300, 100); path.lineTo(100, 300); path.close(); canvas.drawPath(path, mPaint); mPaint.reset();//重置 mPaint.setColor(Color.RED); mPaint.setStyle(Paint.Style.FILL_AND_STROKE); mPaint.setStrokeWidth(50); mPaint.setStrokeCap(Paint.Cap.BUTT);//圓形 mPaint.setStrokeJoin(Paint.Join.ROUND);//圓弧 Path path2 = new Path(); path2.moveTo(100, 400); path2.lineTo(300, 400); path2.lineTo(100, 700); path2.close(); canvas.drawPath(path2, mPaint); mPaint.reset();//重置 mPaint.setColor(Color.GREEN); mPaint.setStyle(Paint.Style.FILL_AND_STROKE); mPaint.setStrokeWidth(50); mPaint.setStrokeCap(Paint.Cap.BUTT);//沒有 mPaint.setStrokeJoin(Paint.Join.MITER);//銳角 Path path3 = new Path(); path3.moveTo(100, 800); path3.lineTo(300, 800); path3.lineTo(100, 1100); path3.close(); canvas.drawPath(path3, mPaint); }
Join對比
以上就是Join三種類型對比。
設(shè)置防鋸齒
mPaint.setAntiAlias(true);
如果設(shè)置防鋸齒,會損失一定的性能
抖動處理
使用mPaint.setDither()方法,設(shè)置是否使用圖像抖動處理。會使繪制的圖片等顏色更加的清晰以及飽滿,也是損失性能。
使用Path繪制圖形
Path繪制圖形
點(diǎn)組成線,線組成面,這樣Path可以繪制各種各樣的圖形,可以說是無所不能的了,但是Path也提供了很多方法,來繪制圖形。
文本繪制
上文中,介紹了Paint畫筆,和繪制了一些圖形。但是介紹Paint的時候,我們知道它可以繪制圖形,文本和bitmap,所以Paint是非常強(qiáng)大的了,我們看下Paint是如何繪制文本的。
設(shè)置字符之間的間距
setLetterSpacing
設(shè)置文本刪除線
mPaint.setStrikeThruText(true);
是否設(shè)置下劃線
mPaint.setUnderlineText(true);
設(shè)置文本大小
mPaint.setTextSize(textSize);
設(shè)置字體類型
mPaint.setTypeface(Typeface.BOLD); // Style public static final int NORMAL = 0;//常規(guī) public static final int BOLD = 1;//粗體 public static final int ITALIC = 2; //斜體 public static final int BOLD_ITALIC = 3;//粗斜體
字體類型有以上四種類型可以設(shè)置。
加載自定義字體
Typeface.create(familyName, style)
文字傾斜
mPaint.setTextSkewX(-0.25f);
文字傾斜默認(rèn)為0,官方推薦的-0.25f是斜體
文本對齊方式
mPaint.setTextAlign(Align.LEFT)
有三種:
public enum Align { /** * The text is drawn to the right of the x,y origin */ LEFT (0),//左對齊 /** * The text is drawn centered horizontally on the x,y origin */ CENTER (1),//居中 /** * The text is drawn to the left of the x,y origin */ RIGHT (2);//右對齊 private Align(int nativeInt) { this.nativeInt = nativeInt; } final int nativeInt; }
計算制定長度的字符串
int breadText = mPaint.breakText(text, measureForwards, maxWidth, measuredWidth)
注意:字符長度、字符個數(shù)、顯示的時候是真實(shí)的長度
Rect bounds獲取文本的矩形區(qū)域(寬高) mPaint.getTextBounds(text, index, count, bounds) mPaint.getTextBounds(text, start, end, bounds) //獲取文本的寬度,和上面類似,但是是一個比較粗略的結(jié)果 float measureText = mPaint.measureText(str); //獲取文本的寬度,和上面類似,但是是比較精準(zhǔn)的。 float[] measuredWidth = new float[10]; //measuredWidth得到每一個字符的寬度;textWidths字符數(shù) int textWidths = mPaint.getTextWidths(str, measuredWidth); mPaint.getTextWidths(text, start, end, widths)
使用drawText繪制文本
public class PaintView extends View { private Paint mPaint; private String text = "你是我世界之光,我心另一半"; public PaintView(Context context) { this(context,null); } public PaintView(Context context, @Nullable AttributeSet attrs) { this(context, attrs,0); } public PaintView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs, defStyleAttr); } private void init(Context context, AttributeSet attrs, int defStyleAttr) { mPaint = new Paint(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mPaint.setColor(Color.BLUE); mPaint.setStyle(Paint.Style.STROKE);//設(shè)置畫筆的樣式 mPaint.setStrokeCap(Paint.Cap.BUTT);//線帽 mPaint.setStrokeJoin(Paint.Join.BEVEL); int top = 100; int baselineX = 0; mPaint.setTextSize(50); mPaint.setTextAlign(Paint.Align.LEFT); canvas.drawLine(0, top, 2000, top, mPaint); //文本Metrics Paint.FontMetrics fontMetrics = mPaint.getFontMetrics(); float baselineY = top - fontMetrics.top; canvas.drawText(text, baselineX, baselineY, mPaint); } }
繪制文本
繪制文本時,還有一個很重要的知識點(diǎn)就是基線的確定
DrawText 基線的確定
在自定義控件的時候,有時候會用到DrawText 方法.
先把自定義TextView的貼出來
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int x = getPaddingLeft(); //dy 代表的是:高度的一半到 baseLine的距離 Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt(); // top 是一個負(fù)值 bottom 是一個正值 top,bttom的值代表是 bottom是baseLine到文字底部的距離(正值) // 必須要清楚的,可以自己打印就好 int dy = (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom; int baseLine = getHeight()/2 + dy; canvas.drawText(costom_text,x,baseLine,paint); }
/** * Draw the text, with origin at (x,y), using the specified paint. The * origin is interpreted based on the Align setting in the paint. * * @param text The text to be drawn * @param x The x-coordinate of the origin of the text being drawn * @param y The y-coordinate of the baseline of the text being drawn * @param paint The paint used for the text (e.g. color, size, style) */ public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) { native_drawText(mNativeCanvasWrapper, text, 0, text.length(), x, y, paint.mBidiFlags, paint.getNativeInstance(), paint.mNativeTypeface); }
x,y 分別表示 基線的開始坐標(biāo),并不是 文字左上角的坐標(biāo),因為文字的繪制是以基線為基礎(chǔ)的
圖中的 五角星 所在的線 就是基線 BaseLine,那么如何確定基線的x,y坐標(biāo)呢?
首寫我們先確定一下x坐標(biāo) :int x = getPaddingLeft();
也就是文字距左邊的距離
y坐標(biāo):
1、我們先計算一下文字高度的一半到 baseLine的距離。
int dy = (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom;
2、之后我們再使用控件高度的一般,加上文字高度的一半到 baseLine的距離,就是基線的y坐標(biāo)
int baseLine = getHeight()/2 + dy;
以上就是怎么在Android中使用Paint進(jìn)行繪圖,小編相信有部分知識點(diǎn)可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。