Android 绘图工具与实战（具体例子）

约定不等于承诺〃 2023-02-11 04:54 12阅读 0赞

## 绘图工具与实战 ##

参考链接：https://www.runoob.com/w3cnote/android-tutorial-drawable-tool.html  
**三大绘图工具：**

**1)Paint(画笔):**  
就是画笔,用于设置绘制风格,如:线宽(笔触粗细),颜色,透明度和填充风格等 直接使用无参构造方法就可以创建Paint实例: Paint paint = new Paint( );

我们可以通过下述方法来设置Paint(画笔)的相关属性,另外,关于这个属性有两种, 图形绘制相关与文本绘制相关:

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>setARGB(int a,int r,int g,int b):</td> 
   <td>设置绘制的颜色，a代表透明度，r，g，b代表颜色值。</td> 
  </tr> 
  <tr> 
   <td>setAlpha(int a):</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>setAntiAlias(boolean aa):</td> 
   <td>设置是否使用抗锯齿功能，会消耗较大资源，绘制图形速度会变慢。</td> 
  </tr> 
  <tr> 
   <td>setDither(boolean dither):</td> 
   <td>设定是否使用图像抖动处理，会使绘制出来的图片颜色更加平滑和饱满，图像更加清晰</td> 
  </tr> 
  <tr> 
   <td>setFilterBitmap(boolean filter)：</td> 
   <td>如果该项设置为true，则图像在动画进行中会滤掉对Bitmap图像的优化操作， 加快显示速度，本设置项依赖于dither和xfermode的设置</td> 
  </tr> 
  <tr> 
   <td>setMaskFilter(MaskFilter maskfilter)：</td> 
   <td>设置MaskFilter，可以用不同的MaskFilter实现滤镜的效果，如滤化，立体等</td> 
  </tr> 
  <tr> 
   <td>setColorFilter(ColorFilter colorfilter)：</td> 
   <td>设置颜色过滤器，可以在绘制颜色时实现不用颜色的变换效果</td> 
  </tr> 
  <tr> 
   <td>setPathEffect(PathEffect effect)</td> 
   <td>设置绘制路径的效果，如点画线等</td> 
  </tr> 
  <tr> 
   <td>setShader(Shader shader)：</td> 
   <td>设置图像效果，使用Shader可以绘制出各种渐变效果</td> 
  </tr> 
  <tr> 
   <td>setShadowLayer(float radius ,float dx,float dy,int color)：</td> 
   <td>在图形下面设置阴影层，产生阴影效果， radius为阴影的角度，dx和dy为阴影在x轴和y轴上的距离，color为阴影的颜色</td> 
  </tr> 
  <tr> 
   <td>setStyle(Paint.Style style)：</td> 
   <td>设置画笔的样式，为FILL，FILL_OR_STROKE，或STROKE</td> 
  </tr> 
  <tr> 
   <td>setStrokeCap(Paint.Cap cap)：</td> 
   <td>当画笔样式为STROKE或FILL_OR_STROKE时，设置笔刷的图形样式， 如圆形样Cap.ROUND,或方形样式Cap.SQUARE</td> 
  </tr> 
  <tr> 
   <td>setSrokeJoin(Paint.Join join)：</td> 
   <td>设置绘制时各图形的结合方式，如平滑效果等</td> 
  </tr> 
  <tr> 
   <td>setStrokeWidth(float width)：</td> 
   <td>当画笔样式为STROKE或FILL_OR_STROKE时，设置笔刷的粗细度</td> 
  </tr> 
  <tr> 
   <td>setXfermode(Xfermode xfermode)：</td> 
   <td>设置图形重叠时的处理方式，如合并，取交集或并集，经常用来制作橡皮的擦除效果</td> 
  </tr> 
  <tr> 
   <td>setFakeBoldText(boolean fakeBoldText)：</td> 
   <td>模拟实现粗体文字，设置在小字体上效果会非常差</td> 
  </tr> 
  <tr> 
   <td>setSubpixelText(boolean subpixelText)：</td> 
   <td>设置该项为true，将有助于文本在LCD屏幕上的显示效果</td> 
  </tr> 
  <tr> 
   <td>setTextAlign(Paint.Align align)：</td> 
   <td>设置绘制文字的对齐方向</td> 
  </tr> 
  <tr> 
   <td>setTextScaleX(float scaleX)：</td> 
   <td>设置绘制文字x轴的缩放比例，可以实现文字的拉伸的效果</td> 
  </tr> 
  <tr> 
   <td>setTextSize(float textSize)：</td> 
   <td>设置绘制文字的字号大小</td> 
  </tr> 
  <tr> 
   <td>setTextSkewX(float skewX)：</td> 
   <td>设置斜体文字，skewX为倾斜弧度</td> 
  </tr> 
  <tr> 
   <td>setTypeface(Typeface typeface)：</td> 
   <td>设置Typeface对象，即字体风格，包括粗体，斜体以及衬线体，非衬线体等</td> 
  </tr> 
  <tr> 
   <td>setUnderlineText(boolean underlineText)：</td> 
   <td>设置带有下划线的文字效果</td> 
  </tr> 
  <tr> 
   <td>setStrikeThruText(boolean strikeThruText)：</td> 
   <td>设置带有删除线的效果</td> 
  </tr> 
  <tr> 
   <td>setStrokeJoin(Paint.Join join)：</td> 
   <td>设置结合处的样子，Miter:结合处为锐角， Round:结合处为圆弧：BEVEL：结合处为直线</td> 
  </tr> 
  <tr> 
   <td>setStrokeMiter(float miter)：</td> 
   <td>设置画笔倾斜度</td> 
  </tr> 
  <tr> 
   <td>setStrokeCap (Paint.Cap cap)：</td> 
   <td>设置转弯处的风格 其他常用方法：</td> 
  </tr> 
  <tr> 
   <td>float ascent( )：</td> 
   <td>测量baseline之上至字符最高处的距离</td> 
  </tr> 
  <tr> 
   <td>float descent()：</td> 
   <td>baseline之下至字符最低处的距离</td> 
  </tr> 
  <tr> 
   <td>int breakText(char[] text, int index, int count, float maxWidth, float[] measuredWidth)：</td> 
   <td>检测一行显示多少文字</td> 
  </tr> 
  <tr> 
   <td>clearShadowLayer( )：</td> 
   <td>清除阴影层 其他的自行查阅文档~</td> 
  </tr> 
 </tbody> 
</table>

**2)Canvas(画布):**  
画笔有了，接着就到画布(Canvas)，总不能凭空作画是吧~常用方法如下：

首先是构造方法，Canvas的构造方法有两种：

Canvas(): 创建一个空的画布，可以使用setBitmap()方法来设置绘制具体的画布。

Canvas(Bitmap bitmap): 以bitmap对象创建一个画布，将内容都绘制在bitmap上，因此bitmap不得为null。

接着是 1.drawXXX()方法族：以一定的坐标值在当前画图区域画图，另外图层会叠加， 即后面绘画的图层会覆盖前面绘画的图层。 比如：

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>drawRect(RectF rect, Paint paint) ：</td> 
   <td>绘制区域，参数一为RectF一个区域</td> 
  </tr> 
  <tr> 
   <td>drawPath(Path path, Paint paint) ：</td> 
   <td>绘制一个路径，参数一为Path路径对象</td> 
  </tr> 
  <tr> 
   <td>drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) ：</td> 
   <td>贴图，参数一就是我们常规的Bitmap对象，参数二是源区域(这里是bitmap)， 参数三是目标区域(应该在canvas的位置和大小)，参数四是Paint画刷对象， 因为用到了缩放和拉伸的可能，当原始Rect不等于目标Rect时性能将会有大幅损失。</td> 
  </tr> 
  <tr> 
   <td>drawLine(float startX, float startY, float stopX, float stopY, Paintpaint) ：</td> 
   <td>画线，参数一起始点的x轴位置，参数二起始点的y轴位置，参数三终点的x轴水平位置， 参数四y轴垂直位置，最后一个参数为Paint 画刷对象。</td> 
  </tr> 
  <tr> 
   <td>drawPoint(float x, float y, Paint paint)：</td> 
   <td>画点，参数一水平x轴，参数二垂直y轴，第三个参数为Paint对象。</td> 
  </tr> 
  <tr> 
   <td>drawText(String text, float x, floaty, Paint paint) ：</td> 
   <td>渲染文本，Canvas类除了上面的还可以描绘文字，参数一是String类型的文本， 参数二x轴，参数三y轴，参数四是Paint对象。</td> 
  </tr> 
  <tr> 
   <td>drawOval(RectF oval, Paint paint)：</td> 
   <td>画椭圆，参数一是扫描区域，参数二为paint对象；</td> 
  </tr> 
  <tr> 
   <td>drawCircle(float cx, float cy, float radius,Paint paint)：</td> 
   <td>绘制圆，参数一是中心点的x轴，参数二是中心点的y轴，参数三是半径，参数四是paint对象；</td> 
  </tr> 
  <tr> 
   <td>drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)：</td> 
   <td>画弧，参数一是RectF对象，一个矩形区域椭圆形的界限用于定义在形状、大小、电弧，参数二是起始角 (度)在电弧的开始，参数三扫描角(度)开始顺时针测量的，参数四是如果这是真的话,包括椭圆中心的电 弧,并关闭它,如果它是假这将是一个弧线,参数五是Paint对象；</td> 
  </tr> 
 </tbody> 
</table>

2.clipXXX()方法族:在当前的画图区域裁剪(clip)出一个新的画图区域，这个画图区域就是canvas 对象的当前画图区域了。比如：clipRect(new Rect())，那么该矩形区域就是canvas的当前画图区域

3.save()和restore()方法： save( )：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作！ restore（）：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。 save()和restore()要配对使用(restore可以比save少,但不能多)，若restore调用次数比save多,会报错！

4.translate(float dx, float dy)： 平移，将画布的坐标原点向左右方向移动x，向上下方向移动y.canvas的默认位置是在（0,0）

5.scale(float sx, float sy)：扩大，x为水平方向的放大倍数，y为竖直方向的放大倍数

6.rotate(float degrees)：旋转，angle指旋转的角度，顺时针旋转

**3)Path(路径)**  
简单点说就是描点，连线~在创建好我们的Path路径后，可以调用Canvas的drawPath(path,paint) 将图形绘制出来~常用方法如下：

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>addArc(RectF oval, float startAngle, float sweepAngle：</td> 
   <td>为路径添加一个多边形</td> 
  </tr> 
  <tr> 
   <td>addCircle(float x, float y, float radius, Path.Direction dir)：</td> 
   <td>给path添加圆圈</td> 
  </tr> 
  <tr> 
   <td>addOval(RectF oval, Path.Direction dir)</td> 
   <td>添加椭圆形</td> 
  </tr> 
  <tr> 
   <td>addRect(RectF rect, Path.Direction dir)：</td> 
   <td>添加一个区域</td> 
  </tr> 
  <tr> 
   <td>addRoundRect(RectF rect, float[] radii, Path.Direction dir)：</td> 
   <td>添加一个圆角区域</td> 
  </tr> 
  <tr> 
   <td>isEmpty()：</td> 
   <td>判断路径是否为空</td> 
  </tr> 
  <tr> 
   <td>transform(Matrix matrix)：</td> 
   <td>应用矩阵变换</td> 
  </tr> 
  <tr> 
   <td>transform(Matrix matrix, Path dst)：</td> 
   <td>应用矩阵变换并将结果放到新的路径中，即第二个参数。</td> 
  </tr> 
 </tbody> 
</table>

更高级的效果可以使用PathEffect类！

几个To：

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>moveTo(float x, float y)：</td> 
   <td>不会进行绘制，只用于移动移动画笔</td> 
  </tr> 
  <tr> 
   <td>lineTo(float x, float y)：</td> 
   <td>用于直线绘制，默认从(0，0)开始绘制，用moveTo移动！ 比如 mPath.lineTo(300, 300); canvas.drawPath(mPath, mPaint);</td> 
  </tr> 
  <tr> 
   <td>quadTo(float x1, float y1, float x2, float y2)：</td> 
   <td>用于绘制圆滑曲线，即贝塞尔曲线，同样可以结合moveTo使用！</td> 
  </tr> 
  <tr> 
   <td>rCubicTo(float x1, float y1, float x2, float y2, float x3, float y3)</td> 
   <td>同样是用来实现贝塞尔曲线的。 (x1,y1) 为控制点，(x2,y2)为控制点，(x3,y3) 为结束点。 Same as cubicTo, but the coordinates are considered relative to the current point on this contour.就是多一个控制点而已~ 绘制上述的曲线： mPath.moveTo(100, 500); mPath.cubicTo(100, 500, 300, 100, 600, 500); 如果不加上面的那个moveTo的话：则以(0,0)为起点，(100,500)和(300,100)为控制点绘制贝塞尔曲线</td> 
  </tr> 
  <tr> 
   <td>arcTo(RectF oval, float startAngle, float sweepAngle)：</td> 
   <td>绘制弧线（实际是截取圆或椭圆的一部分）ovalRectF为椭圆的矩形，startAngle 为开始角度， sweepAngle 为结束角度。</td> 
  </tr> 
 </tbody> 
</table>

**实战刮刮乐**  
activity\_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">
    
        <ImageView android:id="@+id/bg" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg1"/>
    
        <ImageView android:id="@+id/imgv" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/ggl" tools:layout_editor_absoluteX="0dp" tools:layout_editor_absoluteY="0dp" />
    
    </RelativeLayout>

MainActivity.java

package com.example.scratchcard;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.DiscretePathEffect;
    import android.graphics.Matrix;
    import android.graphics.Paint;
    import android.os.Bundle;
    import android.util.DisplayMetrics;
    import android.view.MotionEvent;
    import android.view.View;
    import android.widget.ImageView;
    
    public class MainActivity extends AppCompatActivity { 
    
        private ImageView imageView;
        private Bitmap alterBitmap;
        private double nX;
        private double nY;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) { 
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            imageView = (ImageView)findViewById(R.id.imgv);
            //从资源文件中解析一张Bitmap
            final Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ggl);
            alterBitmap = Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(),bitmap.getConfig());
            DisplayMetrics dm = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(dm);
            nX = (double)bitmap.getWidth()/dm.widthPixels;
            nY = (double)bitmap.getHeight() / dm.heightPixels;
            //创建一个Canvas对象
            Canvas canvas = new Canvas(alterBitmap);
            //创建画笔对象
            Paint paint = new Paint();
            paint.setColor(Color.BLACK);
            paint.setAntiAlias(true);
            //创建Matrix对象
            Matrix matrix = new Matrix();
            canvas.drawBitmap(bitmap,matrix,paint);
            //为ImageView设置触摸监听
            imageView.setOnTouchListener(new View.OnTouchListener(){ 
    
                @Override
                public boolean onTouch(View v, MotionEvent event) { 
                    try{ 
                        int x = (int)event.getX();
                        int y = (int)event.getY();
                        for (int i = -100;i<100;i++){ 
                            for (int j=-100;j<100;j++){ 
                                //将区域内的像素设置透明像素
                                if(Math.sqrt((i*i)+(j*j))<=100){ 
                                    alterBitmap.setPixel((int)(x * nX)+i,(int)(y * nY+90)+j,Color.TRANSPARENT);
                                }
                            }
                        }
                        imageView.setImageBitmap(alterBitmap);
                    }catch (Exception e){ 
                        e.printStackTrace();
                    }
                    return true;
                }
            });
        }
    }

运行截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200521234708974.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA==,size_16,color_FFFFFF,t_70