Android开发 - Canvas类与Paint画笔与Draw绘制方法详解与使用

李琳琳 發表於 2024-7-25 22:05:00

Android开发 - Canvas类与Paint画笔与Draw绘制方法详解与使用

<h1 id="canvas类是什么">Canvas类是什么</h1>
<ul>
<li>Android中Canvas类常用于自定义View等操作中，Canvas则如同一张画布可以在上面绘制内容，然后这张画布也可以叠加其他的图层或者平移旋转等操作。Canvas对象的获取方式有两种：一种我们通过重写onDraw方法，View中重写<code>onDraw(Canvas canvas)</code>Canvas对象会被当做参数传递过来，我们操作这个Canvas，效果会直接反应在View中（我们也可以在ViewGroup中对Canvas做操作，然后将这个Canvas通过<code>diapatchDraw(Canvas canvas)</code>的方式传递给子View，子View将会按照Canvas的规则去绘制）；另一种就是new的方式去创建。Canvas类持有“draw”调用。要绘制内容需要4个基本组件：一个用于持有像素的Bitmap，一个用于承载绘制调用的Canvas（写入位图），一个绘制图元（例如矩形（Rect），路径（Path），文本（text），位图（Bitmap））和一个画笔（Paint）（ 描述图纸的颜色和样式）</li>
</ul>
<h1 id="绘制需要什么">绘制需要什么</h1>
<h2 id="paint画笔">paint（画笔）</h2>
<ul>
<li>画笔提供了最基础的绘画功能，颜色、画笔大小、样式等。我们只需要简单的设计几个参数就可以使用：
<ul>
<li><code>setColor();</code>：设置画笔的颜色</li>
<li><code>setAntiAlias();</code>：设置画笔的锯齿效果</li>
<li><code>setARGB();</code>：设置画笔的A、R、G、B颜色值</li>
<li><code>setAlpha();</code>：设置画笔的Alpha值</li>
<li><code>setTextSize();</code>：设置字体的尺寸</li>
<li><code>setStyle();</code>：设置画笔的风格（空心或实心）</li>
<li><code>setStrokeWidth();</code>：设置空心边框的宽度（线宽）</li>
</ul>
</li>
</ul>
<h2 id="canvas画布">canvas（画布）</h2>
<h3 id="canvas-常用的api">canvas 常用的API</h3>
<h4 id="绘制画笔drawpaint">绘制画笔：drawPaint</h4>
<ul>
<li>
<code>drawPaint(Paint paint)</code>
<ul>
<li>参数解析：
<ul>
<li>paint：这个画笔绘制出来就是当前view的颜色，填充满整个画布</li>
</ul>
</li>
</ul>
<h5 id="代码实例">代码实例</h5>
<pre><code class="language-java">private void drawPaint(Canvas canvas) {
canvas.drawPaint(paint);
}
</code></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724122754_10.png">
</li>
</ul>
<h4 id="绘画圆弧drawarc">绘画圆弧：drawArc</h4>
<ul>
<li><code>canvas:drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)</code>
<ul>
<li>参数解析：
<ul>
<li>RectF：画布的大小</li>
<li>startAngle：开始角度，这个值只能决定图形的开始角度，不能改变图的开角角度。</li>
<li>sweepAngle：扫描的角度，正常就是图形的角度</li>
<li>useCenter:是否以中心旋转，如果是，画中的扇形中心在圆中心，否则就是一个普通的扇形</li>
<li>paint：画笔</li>
</ul>
</li>
</ul>
</li>
</ul>
 <img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724023222_1.gif">
<h5 id="拼色扇形实例">拼色扇形实例</h5>
<ul>
<li>
像一些统计图其实是通过绘制圆弧完成的，但是绘制的时候需要注意图层问题：Canvas是一层一层绘制的，如果处理多图形拼图，最大层应该在最下方
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724025816_2.png">
<h6 id="代码实例-1">代码实例</h6>
<pre><code class="language-java">RectF rectF = new RectF(0, 0, getMeasuredWidth(), getMeasuredHeight());

if (paint == null) {
paint = new Paint();
}

paint.setColor(Color.RED);
paint.setStrokeWidth(2);
paint.setStyle(Paint.Style.FILL);

canvas.drawArc(rectF, 0, 360, true, paint);
canvas.save();
paint.setColor(Color.YELLOW);
canvas.drawArc(rectF, 0, 150, true, paint);
paint.setColor(Color.BLUE);
canvas.drawArc(rectF, 0, 90, true, paint);

paint.setColor(Color.GRAY);
canvas.drawArc(rectF, 0, 30, true, paint);
</code></pre>
<ul>
<li>
这里面有四种扇形，红色、黄色、绿色、灰色：
<ul>
<li>
灰色开角：30
</li>
<li>
绿色开角：90
</li>
<li>
黄色开角：150
</li>
<li>
红色开角：360(圆形)
</li>
</ul>
</li>
<li>
视觉上：
<ul>
<li>灰色：30°
<ul>
<li>绿色：60°</li>
<li>黄色：60°</li>
<li>红色：210°</li>
</ul>
</li>
</ul>
</li>
</ul>
<h6 id="技巧">技巧</h6>
<ul>
<li>先算出各个角度，再计算出各个扇形的开角。注意先绘制大图形，再绘制小的，否则360°先绘制会导致图形的遮挡问题</li>
</ul>
</li>
</ul>
<h4 id="绘制路径drawpath">绘制路径：drawPath</h4>
<ul>
<li>
<code>canvas.drawPath(Path path,Paint paint)</code>
<ul>
<li>参数解析：
<ul>
<li>
path：路径值，又因为path可以完成各种路径的构建
</li>
<li>
paint：画笔
</li>
</ul>
</li>
</ul>
</li>
<li>
正常path绘制很多东西，如果一个画面由三个点组成
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724031929_3.png">
<h5 id="代码实例-2">代码实例</h5>
<pre><code class="language-java">private void drawPath(Canvas canvas) {
Path path = new Path();
path.moveTo(100, 100);
path.lineTo(300, 300);
path.lineTo(200,300);
path.close();

canvas.drawPath(path, paint);
}
</code></pre>
</li>
</ul>
<h4 id="组合绘图drawpicture">组合绘图：drawPicture</h4>
<ul>
<li><code>canvas.drawPicture(Picture picture)</code>：绘制复杂的图形或者需要耗时较长，可以通过该方法
<ul>
<li>参数解析：
<ul>
<li>picture：图片或者海报</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="绘制色块drawargb">绘制色块：drawARGB</h4>
<ul>
<li>
<code>canvas.drawARGB(int a, int r, int g, int b)</code>：这个色块类似一个填充色，以ARGB颜色来完成。值可以参考色值：0-255，2^8-1
<ul>
<li>参数解析：
<ul>
<li>a：透明度</li>
<li>r：红色</li>
<li>g：绿色</li>
<li>b：蓝色</li>
</ul>
</li>
</ul>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724040535_4.png">
</li>
</ul>
<h4 id="绘制bitmap资源drawbitmap">绘制bitmap资源：drawBitmap</h4>
<ul>
<li>
<code>canvas.drawBitmap(Bitmap bitmap, float left, float top, Paint paint)</code>
<ul>
<li>参数解析：
<ul>
<li>bitmap：bitmap资源</li>
<li>left:从布局左边的坐标点（类似View的X轴）开始绘制</li>
<li>top:从布局的顶部的坐标点（类似View的Y轴）开始绘制</li>
<li>paint：画笔</li>
</ul>
</li>
</ul>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724041115_5.png">
<h5 id="代码实例-3">代码实例</h5>
<pre><code class="language-java">private void drawBitmap(Canvas canvas)
{
canvas.drawBitmap(getBitmap(),0,0,paint);
canvas.save();
}
</code></pre>
</li>
</ul>
<h4 id="图片扭曲特效drawbitmapmesh">图片扭曲特效：drawBitmapMesh</h4>
<ul>
<li>
<code>canvas.drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts, int vertOffset, colors, int colorOffset, Paint paint)</code>
<ul>
<li>
参数解析：
<ul>
<li>bitmap：指定需要扭曲的源位图。</li>
<li>meshwidth：该参数控制在横向上把该源位图划分成多少格</li>
<li>meshheight：该参数控制在纵向上把该源位图划分成多少格</li>
<li>verts：该参数是一个长度为<code>(meshWidth + 1)*(meshHeight+1)* 2</code>的数组，它记录了扭曲后的位图各"顶点"位置。虽然它是个一维数组,实际上它记录的数据是形如<code>(x0, y0),(x1, y1),(x2, y2)......(xN, yN)</code>格式的数据，这些数组元素控制对bitmap位图的扭曲效果</li>
<li>vertOffset：vert的偏移，也就是控制verts数组中从第几个数组元素开始才对bitmap进行扭曲(忽略veroffset之前数据的扭曲效果)</li>
</ul>
</li>
<li>
drawBitmapMesh方法对源位图扭曲时最关键的参数是meshWidth、meshHeight和verts这三个参数对扭曲的控制，如下图:
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724060727_6.png">
</li>
<li>
从上图可以看出，当程序希望调用drawBitmapMesh方法对位图进行扭曲时，关键是计算verts数组的值（该数组的值记录了扭曲后的位图上各"顶点"的坐标）
</li>
</ul>
<h5 id="代码实例-4">代码实例</h5>
<ul>
<li>
下面的实例是通过drawBitmapMesh方法来控制图片的扭曲
<ol>
<li>
自定义MeshView组件
<pre><code class="language-java">package com.example.matrixdemo.view;

import com.example.matrixdemo.R;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/***
* 通过Canvas的drawBitmapMesh方法控制图片的扭曲效果
* @author Administrator
*
*/
public class MyMeshView extends View {
/** 源图片 */
private Bitmap bitmap;
/** 定义常量,常量指定该图片横向上被分为20格 */
private final int MESH_WIDTH = 20;
/** 定义常量,常量指定该图片纵向上被分为20格 */
private final int MESH_HEIGHT = 20;
/** 记录该图片上包含的441个顶点 */
private final int COUNT = (MESH_WIDTH + 1) * (MESH_HEIGHT + 1);
/** 定义一个数组,保存Bitmap上的21*21个点的坐标 */
private float[] verts = new float;
/** 定义一个数组,保存Bitmap上的21*21个点经过扭曲后的坐标 */
// 对图片进行扭曲的关键就是修改该数组里元素的值
private float[] orig = new float;

public MyMeshView(Context context) {
this(context, null);
}

public MyMeshView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public MyMeshView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setFocusable(true);
// 加载Bitmap资源
bitmap = ((BitmapDrawable) getResources().getDrawable(
R.drawable.bg02)).getBitmap();
// 获取图片的宽度,高度
float bitmapWidth = bitmap.getWidth();
float bitmapHeight = bitmap.getHeight();
int index = 0;
for (int i = 0; i <= MESH_HEIGHT; i++) {
float fy = bitmapHeight * i / MESH_HEIGHT;
for (int j = 0; j < MESH_WIDTH; j++) {
float fx = bitmapWidth * i / MESH_WIDTH;
// 初始化orig,verts数组,初始化后,orig,verts两个数组均匀的保存了21*21个点的坐标
orig = verts = fx; //偶数
orig = verts = fy; //奇数
index += 1;
}
}
// 设置背景色
setBackgroundColor(Color.WHITE);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmapMesh(bitmap, MESH_WIDTH, MESH_HEIGHT, verts, 0,
null, 0, null);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
//调用warp方法根据触摸屏事件的坐标来扭曲verts数组
warp(event.getX(), event.getY());
return true;
}

/***
* 根据触摸事件的位置计算verts数组里个元素的值
*
* @param x
* X坐标
* @param y
* Y坐标
*/
private void warp(float cx, float cy) {
for (int i = 0; i < MESH_WIDTH * 2; i += 2) {
float dx = cx - orig;
float dy = cy - orig;
float dd = dx * dx + dy * dy;
//计算每个坐标点与当前坐标点(cx,cy)之间的距离
float d = (float) Math.sqrt(dd);
//计算扭曲度,距离当前点(cx,cy)越远,扭曲度越小
float pull = 80000 / (dd * d);
//对verts数组(保存bitmap上21*21进过扭曲后的坐标)重新赋值
if(pull >= 1){
verts = cx;
verts = cy;
}else{
//控制各个顶点向触摸事件发生点进行偏移
verts = orig * dx * pull;
verts = orig * dy * pull;
}
}
//通知view组件重绘
invalidate();
}

}
</code></pre>
</li>
<li>
activity调用以及布局
<ul>
<li>
Java调用
<pre><code class="language-java">package com.example.matrixdemo;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class MeshActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mesh);
}
}
</code></pre>
</li>
<li>
xml布局
<pre><code class="language-xml"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >.

<com.example.matrixdemo.view.MyMeshView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>

</LinearLayout>
</code></pre>
</li>
</ul>
</li>
</ol>
</li>
<li>
上面的程序中，warp方法会根据触摸点的位置动态修改verts数组里所有数组元素的值，这样就控制了drawBitmapMesh方法的扭曲效果
</li>
</ul>
</li>
</ul>
<h4 id="画圆drawcircle">画圆：drawCircle</h4>
<ul>
<li>
<code>canvas.drawCircle(float cx, float cy, float radius, Paint paint)</code>
<ul>
<li>参数解析
<ul>
<li>cx：圆心x轴坐标</li>
<li>cy：圆心y轴坐标</li>
<li>radius：半径</li>
<li>paint：画笔</li>
</ul>
</li>
</ul>
<h5 id="代码实例-5">代码实例</h5>
<pre><code class="language-java">canvas.drawCircle(100, 100, 100, paint);
</code></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724063140_7.png">
</li>
</ul>
<h4 id="划线drawline">划线：drawLine</h4>
<ul>
<li>
<code>canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint)</code>
<ul>
<li>
参数解析：
<ul>
<li>
startX：起点x坐标
</li>
<li>
startY：起点y坐标
</li>
<li>
stopX：终点x坐标
</li>
<li>
stopY：终点y坐标
</li>
<li>
paint：画笔
</li>
</ul>
</li>
</ul>
<h5 id="代码实例-6">代码实例</h5>
<pre><code class="language-java">private void drawLine(Canvas canvas) {
paint.setStrokeWidth(100);
canvas.drawLine(0, 500, 500, 500, paint);
}
</code></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724115022_8.png">
<ul>
<li>由于线段是两点确定，所以(startX,startY)是起点，（stopX，stopY）是终点</li>
<li>如果想这条线很宽。通过设置画笔的宽度 <code>paint.setStrokeWidth(100);</code></li>
</ul>
</li>
</ul>
<h4 id="画椭圆drawoval">画椭圆：drawOval</h4>
<ul>
<li>
<code>canvas.drawOval(RectF oval, Paint paint)</code>
<ul>
<li>参数解析：
<ul>
<li>oval：设置一个矩形区域，扫描测量</li>
<li>paint：画笔</li>
</ul>
</li>
</ul>
</li>
<li>
<code>canvas.drawOval(float left, float top, float right, float bottom, Paint paint)</code>
<ul>
<li>
参数解析：
<ul>
<li>
left：左边坐标；在绘制中常表示为起点的Y轴坐标
</li>
<li>
top：上边左边；在绘制中常表示为起点的X轴坐标
</li>
<li>
right：右边坐标；在绘制中常表示为终点的Y轴坐标
</li>
<li>
bottom：下边坐标；在绘制中常表示为终点的Y轴坐标
</li>
<li>
paint：画笔
</li>
</ul>
</li>
</ul>
</li>
<li>
第二种方法的前4个参数实际上就是RectF类的参数，同样是创建一个矩形扫描测量区域进行放置一个椭圆
</li>
</ul>
<h5 id="代码实例-7">代码实例</h5>
<pre><code class="language-java">private void drawOval(Canvas canvas) {
int width=getMeasuredWidth();
int height=getMeasuredHeight()/3;

canvas.drawOval(0,0,width,height,paint);
}
</code></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724122130_9.png">
<h3 id="绘制补丁drawpatch">绘制补丁：drawPatch</h3>
<ul>
<li>
<code>canvas.drawPatch(NinePatch patch, Rect dst, Paint paint)</code>
<ul>
<li>参数详解：
<ul>
<li>patch：点九资源（.9.png），</li>
<li>dst：绘制区域</li>
<li>paint：画笔</li>
</ul>
</li>
</ul>
</li>
<li>
此方法资料很少，估计是不太常用，简单了解一下即可：[点九资源](android draw9 patch介绍_android studio canvas drawpatch-CSDN博客)
<h5 id="代码实例-8">代码实例</h5>
<pre><code class="language-java">Bitmap bitmap = getBitmap();
NinePatch patch = new NinePatch(bitmap,bitmap.getNinePatchChunk());
canvas.drawPatch(patch, dst, paint)
</code></pre>
</li>
</ul>
<h4 id="绘制点drawpoint">绘制点：drawPoint</h4>
<ul>
<li>
<code>canvas.drawPoint(float x, float y, Paint paint)</code>
<ul>
<li>参数解析：
<ul>
<li>x：点的x轴坐标位置</li>
<li>y：点的y轴坐标位置</li>
<li>paint：画笔</li>
</ul>
</li>
</ul>
</li>
<li>
点的大小取决于paint的画笔大小
<h5 id="代码实例-9">代码实例</h5>
<pre><code class="language-java">private void drawPoint(Canvas canvas) {
paint.setStrokeWidth(20);
canvas.drawPoint(100, 100, paint);
}
</code></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724125905_1.png">
</li>
</ul>
<h4 id="绘制文字从点pos出发drawpostext">绘制文字从点pos出发：drawPosText</h4>
<ul>
<li>
<code>canvas.drawPosText(String text, @Size(multiple = 2) float[] pos, Paint paint)</code>
<ul>
<li>参数解析：
<ul>
<li>text：文本</li>
<li>pos：pos坐标（x，y）</li>
<li>paint：画笔</li>
</ul>
</li>
</ul>
<h5 id="代码实例-10">代码实例</h5>
<pre><code class="language-java"> private void drawPosText(Canvas canvas) {

 float[] pos = new float[]{100, 100};
 canvas.drawPosText("Hellow", pos, paint);

}
</code></pre>
</li>
</ul>
<h4 id="绘制矩形区域drawrect">绘制矩形区域：drawRect</h4>
<ul>
<li>
<code>canvas.drawRect(RectF rect, Paint paint)</code>
<ul>
<li>参数解析：
<ul>
<li>RectF：绘制区域</li>
<li>paint：画笔</li>
</ul>
</li>
</ul>
<h5 id="代码实例-11">代码实例</h5>
<pre><code class="language-java">private void drawRect(Canvas canvas) {
RectF rectF=new RectF(0,0,500,500);
canvas.drawRect(rectF,paint);

}
</code></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724131042_2.png">
</li>
</ul>
<h4 id="绘制色域drawrgbdrawcolor">绘制色域：drawRGB、drawColor</h4>
<ul>
<li>
<code>canvas.drawRGB(int r, int g, int b)</code>
<ul>
<li>参数解析：
<ul>
<li>r：rgb颜色值的r值</li>
<li>g：rgb颜色值的g值</li>
<li>b：rgb颜色值的b值</li>
</ul>
</li>
</ul>
</li>
<li>
<code>canvas.drawColor(int color)</code>
<ul>
<li>参数解析：
<ul>
<li>color：</li>
</ul>
</li>
</ul>
</li>
<li>
以下只举例其一
<h5 id="代码实例-12">代码实例</h5>
<pre><code class="language-java">public void drawRGB(Canvas canvas) {
canvas.drawRGB(200, 200, 200);
}
</code></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724131735_fc475020a99446a38c2db31861201265.png">
</li>
</ul>
<h4 id="在矩形内绘制圆角drawroundrect">在矩形内绘制圆角：drawRoundRect</h4>
<ul>
<li>
<code>canvas.drawRoundRect(RectF rect, float rx, float ry, Paint paint)</code>
<ul>
<li>
参数解析：
<ul>
<li>
RectF ：绘制区域
</li>
<li>
rx：圆角角度在矩形内的坐标x轴
</li>
<li>
ry：圆角角度在矩形内的坐标y轴
</li>
<li>
paint：画笔
</li>
</ul>
</li>
</ul>
<h5 id="注意事项">注意事项</h5>
<ul>
<li>如果rx和ry为0，那么绘制出来的view就是矩形，如果rx，ry在矩形正中心，那么绘制出来的圆角就是圆形</li>
<li>如果x和y都小于矩形的宽和高，那么显示就是矩形四个角被裁剪</li>
<li>如果x和y都大于矩形的宽和高，那么显示就是圆</li>
<li>如果x和y其中一个小于宽和高，那么显示可能是一个不规则图形</li>
</ul>
<h5 id="代码实例-13">代码实例</h5>
<pre><code class="language-java">public void drawRoundRect(Canvas canvas)
{
RectF rectF=new RectF(0,0,200,200);
canvas.drawRoundRect(rectF,10,10,paint);
}
</code></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724132407_c8e477d0edc74f69ad8ab31bd99169c7.png">
</li>
</ul>
<h4 id="绘制字符drawtext">绘制字符：drawText</h4>
<ul>
<li>
<code>canvas.drawText(String text, float x, float y, Paint paint)</code>
<ul>
<li>参数解析：
<ul>
<li>text：文本</li>
<li>x：位置的x轴坐标</li>
<li>y：位置的y轴坐标</li>
<li>paint：画笔</li>
</ul>
</li>
</ul>
<h5 id="注意事项-1">注意事项</h5>
<ul>
<li>绘制的时候paint style（画笔风格）必须设置成<code>paint.setStyle(Paint.Style.FILL);</code>否则会出现一团</li>
<li>文字的样式和大小，都是通过paint（画笔）来设置，关于paint可以自行查看</li>
</ul>
<h5 id="代码实例-14">代码实例</h5>
<pre><code class="language-java">private void drawText(Canvas canvas)
{
paint.setTextSize(100);
canvas.drawText("你好",100,100,paint);
}
</code></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724133003_507.png">
</li>
</ul>
<h4 id="绘制文本按路径显示drawtextonpath">绘制文本按路径显示：drawTextOnPath</h4>
<ul>
<li>
<code>canvas.drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)</code>
<ul>
<li>
参数解析：
<ul>
<li>
text ：文本
</li>
<li>
path：路径，最终文本文字会按路径显示
</li>
<li>
hOffset ：横向偏移，沿路径添加到文本起始位置的距离
</li>
<li>
vOffset ：纵向偏移，定位文本的路径上方（-）或下方（+）的距离
</li>
<li>
paint：画笔
</li>
</ul>
</li>
</ul>
<h5 id="代码实例-15">代码实例</h5>
<pre><code class="language-java">private void drawTextOnPath(Canvas canvas) {
paint.setTextSize(100);
Path path=new Path();
path.moveTo(0,500);
path.lineTo(500,500);
path.lineTo(500,0);
path.close();
canvas.drawTextOnPath("Hello word just do it",path,100,100,paint);
}
</code></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724133658_344.png">
</li>
</ul>
<h4 id="绘制运行中的文本drawtextrun">绘制运行中的文本：drawTextRun</h4>
<ul>
<li>
<code>canvas.drawTextRun(CharSequence text, int start, int end, int contextStart, int contextEnd, float x, float y, boolean isRtl,Paint paint)</code>
<ul>
<li>
参数解析：
<ul>
<li>
text：文本
</li>
<li>
start：内容开始索引
</li>
<li>
end：内容结束的索引
</li>
<li>
contextStart：塑造语句的起点索引，默认从0开始
</li>
<li>
contextEnd：塑造语句的终结索引默认text的长度
</li>
<li>
x：位置x轴坐标
</li>
<li>
y：位置y轴坐标
</li>
<li>
isRtl：运行是否为镜像
</li>
<li>
paint：画笔
</li>
</ul>
</li>
</ul>
<h5 id="代码实例-16">代码实例</h5>
<pre><code class="language-java">private void drawTextRun(Canvas canvas)
{
paint.setTextSize(100);
CharSequence text="Hello word just do it";
canvas.drawTextRun(text,0,text.length(),0,text.length(),100,100,true,paint);

canvas.drawTextRun(text,0,text.length(),0,text.length(),100,600,false,paint);

}
</code></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/816849/galleries/2378863/o_240724134549_265.png">
</li>
</ul>
<h4 id="绘制多边形drawvertices">绘制多边形：drawVertices</h4>
<ul>
<li><code>canvas.drawVertices(VertexMode mode, int vertexCount, float[] verts, int vertOffset, float[] texs, int texOffset, @Nullable int[] colors, int colorOffset, short[] indices, int indexOffset, int indexCount, Paint paint)</code>
<ul>
<li>参数解析：
<ul>
<li>mode：如何解释顶点数组</li>
<li>vertexCount：顶点数组中的值数（如果非空，则为相应的texs和颜色数组）。每个逻辑顶点都是两个值（x，y），vertexCount必须是2的倍数</li>
<li>verts：网格的顶点数组</li>
<li>vertOffset：绘制前要跳过的顶点中的值数</li>
<li>texs：可能为空。如果不为空，则指定要采样到当前着色器中的坐标（例如位图平铺或渐变）</li>
<li>texOffset：绘制前要跳过的texs中的值数</li>
<li>colors：可为空。如果不为空，则为每个顶点指定一种颜色，以便在三角形上进行插值。</li>
<li>colorOffset：绘制前要跳过的颜色值的数目</li>
<li>indices：如果不为null，则引用到顶点（texs，colors）数组的索引数组</li>
<li>indexCount：如果不为空，索引数组中的条目数</li>
<li>paint：画笔</li>
</ul>
</li>
<li>由于资料很少，做一下简单的了解，在Android开发程序中应该是不常用的</li>
</ul>
</li>
</ul> 
来源：https://www.cnblogs.com/ajunjava/p/18324242

頁: [1]

琼殿技术论坛's Archiver

Android开发 - Canvas类与Paint画笔与Draw绘制方法详解与使用