Paint画笔(一)

1、Paint画笔的常用API


mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.beauty);

mPaint =new Paint(); //初始化

mPaint.setColor(Color.RED);// 设置颜色

mPaint.setARGB(255, 255, 255, 0); // 设置 Paint对象颜色,范围为0~255

mPaint.setAlpha(200); // 设置alpha不透明度,范围为0~255

mPaint.setAntiAlias(true); // 抗锯齿

 //设置画笔的样式
mPaint.setStyle(Paint.Style.FILL);//填充内容
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//描边与填充
mPaint.setStyle(Paint.Style.STROKE);//描边

mPaint.setStrokeWidth(4);//宽度

//线帽
mPaint.setStrokeCap(Paint.Cap.BUTT);//没有
mPaint.setStrokeCap(Paint.Cap.ROUND);//圆的
mPaint.setStrokeCap(Paint.Cap.SQUARE);//方形

mPaint.setStrokeJoin(Paint.Join.MITER);//拐角风格(锐角)
mPaint.setStrokeJoin(Paint.Join.ROUND);//圆弧
mPaint.setStrokeJoin(Paint.Join.BEVEL);//直线

mPaint.setShader(new SweepGradient(200, 200, Color.BLUE, Color.RED)); //设置环形渲染器

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DARKEN)); //设置图层混合模式

mPaint.setColorFilter(new LightingColorFilter(0x00ffff, 0x000000)); //设置颜色过滤器

mPaint.setFilterBitmap(true); //设置双线性过滤

mPaint.setMaskFilter(new BlurMaskFilter(10, BlurMaskFilter.Blur.NORMAL));//设置画笔遮罩滤镜 ,传入度数和样式

mPaint.setTextScaleX(2);// 设置文本缩放倍数

mPaint.setTextSize(38);// 设置字体大小

mPaint.setTextAlign(Paint.Align.LEFT);//对其方式

mPaint.setUnderlineText(true);// 设置下划线

String str ="Android高级工程师";

Rect rect =new Rect();

mPaint.getTextBounds(str, 0, str.length(), rect); //测量文本大小,将文本大小信息存放在rect中

mPaint.measureText(str); //获取文本的宽

mPaint.getFontMetrics(); //获取字体度量对象

2、Shader着色器


private Shader mShader;

(1)线性渲染


/**

* 1.线性渲染,LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[], @Nullable float positions[], @NonNull TileMode tile)

* (x0,y0):渐变起始点坐标

* (x1,y1):渐变结束点坐标

* color0:渐变开始点颜色,16进制的颜色表示,必须要带有透明度

* color1:渐变结束颜色

* colors:渐变数组

* positions:位置数组,position的取值范围[0,1],作用是指定某个位置的颜色值,如果传null,渐变就线性变化。

* tile:用于指定控件区域大于指定的渐变区域时,空白区域的颜色填充方法

*/

mShader =new LinearGradient(0, 0, 500, 500, new int[]{Color.RED, Color.BLUE, Color.GREEN}, new float[]{0.f,0.7f,1}, Shader.TileMode.REPEAT);

mPaint.setShader(mShader);

canvas.drawRect(0,0,1000,1000, mPaint);

(2)环形渲染


/**

* 环形渲染,RadialGradient(float centerX, float centerY, float radius, @ColorInt int colors[], @Nullable float stops[], TileMode tileMode)

* centerX ,centerY:shader的中心坐标,开始渐变的坐标

* radius:渐变的半径

* centerColor,edgeColor:中心点渐变颜色,边界的渐变颜色

* colors:渐变颜色数组

* stoops:渐变位置数组,类似扫描渐变的positions数组,取值[0,1],中心点为0,半径到达位置为1.0f

* tileMode:shader未覆盖以外的填充模式。

*/

mShader =new RadialGradient(250, 250, 250, new int[]{Color.GREEN, Color.YELLOW, Color.RED}, null, Shader.TileMode.CLAMP);

mPaint.setShader(mShader);

canvas.drawCircle(250, 250, 250, mPaint);

(3)扫描渲染


/**

* 扫描渲染,SweepGradient(float cx, float cy, @ColorInt int color0,int color1)

* cx,cy 渐变中心坐标

* color0,color1:渐变开始结束颜色

* colors,positions:类似LinearGradient,用于多颜色渐变,positions为null时,根据颜色线性渐变

*/

mShader =new SweepGradient(250, 250, Color.RED, Color.GREEN);

mPaint.setShader(mShader);

canvas.drawCircle(250, 250, 250, mPaint);

(4)位图渲染


/**

* 位图渲染,BitmapShader(@NonNull Bitmap bitmap, @NonNull TileMode tileX, @NonNull TileMode tileY)

* Bitmap:构造shader使用的bitmap

* tileX:X轴方向的TileMode

* tileY:Y轴方向的TileMode

            REPEAT, 绘制区域超过渲染区域的部分,重复排版

            CLAMP, 绘制区域超过渲染区域的部分,会以最后一个像素拉伸排版

            MIRROR, 绘制区域超过渲染区域的部分,镜像翻转排版

*/

mShader =new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);

mPaint.setShader(mShader);

canvas.drawRect(0,0,500, 500, mPaint);

(5)组合渲染


/**

* 组合渲染,

* ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, Xfermode mode)

* ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, PorterDuff.Mode mode)

* shaderA,shaderB:要混合的两种shader

* Xfermode mode: 组合两种shader颜色的模式

* PorterDuff.Mode mode: 组合两种shader颜色的模式

*/

BitmapShader bitmapShader =new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);

LinearGradient linearGradient =new LinearGradient(0, 0, 1000, 1600, new int[]{Color.RED, Color.GREEN, Color.BLUE}, null, Shader.TileMode.CLAMP);

mShader =new ComposeShader(bitmapShader, linearGradient, PorterDuff.Mode.MULTIPLY);

mPaint.setShader(mShader);

canvas.drawCircle(250, 250, 250, mPaint);

3、PorterDuff.Mode 图层混合模式

参考PorterDuff.Mode的几种模式的区别 - 简书

它将所绘制图像的像素与Canvas中对应位置的像素按照一定的规则进行混合,形成新的像素值,从而更新Canvas中的最终的像素颜色值。

他有18个模式

**1.PorterDuff.Mode.CLEAR **

所绘制不会提交到画布上。

2.PorterDuff.Mode.SRC

显示上层绘制图片

3.PorterDuff.Mode.DST

显示下层绘制图片

4.PorterDuff.Mode.SRC_OVER

正常绘制显示,上下层绘制叠盖。

5.PorterDuff.Mode.DST_OVER

上下层都显示。下层居上显示。

6.PorterDuff.Mode.SRC_IN

取两层绘制交集。显示上层。

7.PorterDuff.Mode.DST_IN

取两层绘制交集。显示下层。

8.PorterDuff.Mode.SRC_OUT

取上层绘制非交集部分。

9.PorterDuff.Mode.DST_OUT

取下层绘制非交集部分。

10.PorterDuff.Mode.SRC_ATOP

取下层非交集部分与上层交集部分

11.PorterDuff.Mode.DST_ATOP

取上层非交集部分与下层交集部分

12.PorterDuff.Mode.XOR

异或:去除两图层交集部分

13.PorterDuff.Mode.DARKEN

取两图层全部区域,交集部分颜色加深

14.PorterDuff.Mode.LIGHTEN

取两图层全部,点亮交集部分颜色

15.PorterDuff.Mode.MULTIPLY

取两图层交集部分叠加后颜色

16.PorterDuff.Mode.SCREEN

取两图层全部区域,交集部分变为透明色

17.PorterDuff.Mode.ADD

取两图层全部区域,交集部分饱和度相加

18.PorterDuff.Mode.OVERLAY

取两图层全部区域,交集部分叠加

src指的是上层图像,dst指的是下层图像,这里的上层和上层,是指调用canvas的先后顺序,先调用canvas绘制的就是下层图像,后调用的就是上层图像,可以理解为canvas是一层一层绘制的,后绘制的会覆盖在先绘制的上层

4、离屏绘制

通过使用离屏缓冲,把要绘制的内容单独绘制在缓冲层,保证Xfermode的使用不会出现错误的结果


private Paint mPaint;

private int mWidth, mHeight;

private void init() {

    //初始化画笔

    mPaint =new Paint();

    mPaint.setColor(Color.RED);

    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    mWidth = MeasureSpec.getSize(widthMeasureSpec);

    mHeight = MeasureSpec.getSize(heightMeasureSpec);

}

@Override

protected void onDraw(Canvas canvas) {

    super.onDraw(canvas);

    //禁止硬件加速

    setLayerType(View.LAYER_TYPE_SOFTWARE, null);

    setBackgroundColor(Color.GRAY);

    //离屏绘制

    int layerId = canvas.saveLayer(0,0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);

    //目标图

    canvas.drawBitmap(createRectBitmap(mWidth, mHeight), 0, 0, mPaint);

    //设置混合模式 取两层绘制交集。显示下层

    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

    //源图,重叠区域右下角部分

    canvas.drawBitmap(createCircleBitmap(mWidth, mHeight), 0, 0, mPaint);

    //清除混合模式

    mPaint.setXfermode(null);

    canvas.restoreToCount(layerId);

}

//画矩形Dst

public BitmapcreateRectBitmap(int width, int height) {

Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

    Canvas canvas =new Canvas(bitmap);

    Paint dstPaint =new Paint(Paint.ANTI_ALIAS_FLAG);

    dstPaint.setColor(0xFF66AAFF);

    canvas.drawRect(new Rect(width /20, height /3, 2 * width /3, 19 * height /20), dstPaint);

    return bitmap;

}

//画圆src

public BitmapcreateCircleBitmap(int width, int height) {

Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

    Canvas canvas =new Canvas(bitmap);

    Paint scrPaint =new Paint(Paint.ANTI_ALIAS_FLAG);

    scrPaint.setColor(0xFFFFCC44);

    canvas.drawCircle(width *2 /3, height /3, height /4, scrPaint);

    return bitmap;

}

附上一个擦除有奖的自定义View,用到离屏绘制与PorterDuff.Mode.SRC_OUT图层混合模式:


public class XfermodeEraserView extends View {

    private PaintmPaint;

    private BitmapmDstBmp, mSrcBmp, mTxtBmp;

    private PathmPath;

    public XfermodeEraserView(Context context) {

    this(context, null);

    }

public XfermodeEraserView(Context context, AttributeSet attrs) {

    this(context, attrs, 0);

    }

public XfermodeEraserView(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        init();

    }

private void init() {

        //初始化画笔

        mPaint =new Paint();

        mPaint.setColor(Color.RED);

        mPaint.setStyle(Paint.Style.STROKE);

        mPaint.setStrokeWidth(80);

        //禁用硬件加速

        setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        //初始化图片对象

        mTxtBmp = BitmapFactory.decodeResource(getResources(), R.drawable.result);

        //src指的是上层图像 先调用canvas绘制的就是下层图像,后调用的就是上层图像

        mSrcBmp = BitmapFactory.decodeResource(getResources(), R.drawable.eraser);

        //dst指的是下层图像

        mDstBmp = Bitmap.createBitmap(mSrcBmp.getWidth(), mSrcBmp.getHeight(), Bitmap.Config.ARGB_8888);

        //路径(贝塞尔曲线)

        mPath =new Path();

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        //绘制刮奖结果

        canvas.drawBitmap(mTxtBmp, 0, 0, mPaint);

        //使用离屏绘制

        int layerID = canvas.saveLayer(0, 0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);

        //先将路径绘制到 bitmap上

        Canvas dstCanvas =new Canvas(mDstBmp);

        dstCanvas.drawPath(mPath, mPaint);

        //绘制 目标图像

        canvas.drawBitmap(mDstBmp, 0, 0, mPaint);

        //设置 模式 为 SRC_OUT, 擦橡皮区域为交集区域需要清掉像素 取上层绘制非交集部分。

        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));

        //绘制源图像

        canvas.drawBitmap(mSrcBmp, 0, 0, mPaint);

        //清除混合模式

        mPaint.setXfermode(null);

        //进行图层回复

        canvas.restoreToCount(layerID);

    }

private float mEventX, mEventY;

    @Override

    public boolean onTouchEvent(MotionEvent event) {

    super.onTouchEvent(event);

    switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:

                mEventX = event.getX();

                mEventY = event.getY();

                mPath.moveTo(mEventX, mEventY);

                break;

            case MotionEvent.ACTION_MOVE:

                float endX = (event.getX() -mEventX) /2 +mEventX;

                float endY = (event.getY() -mEventY) /2 +mEventY;

                //画二阶贝塞尔曲线

                mPath.quadTo(mEventX, mEventY, endX, endY);

                mEventX = event.getX();

                mEventY = event.getY();

                break;

        }

        invalidate();

        return true; //消费事件

    }

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,172评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,346评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,788评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,299评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,409评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,467评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,476评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,262评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,699评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,994评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,167评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,499评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,149评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,387评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,028评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,055评论 2 352

推荐阅读更多精彩内容

  • 一: Paint 类 **1.图形绘制 ** setAntiAlias();设置画笔的锯齿效果 setColor...
    666swb阅读 1,755评论 0 12
  • 自定义View(一)- 流程 在上一篇文章中我们分析了自定义View的流程,这片文章我们来分析一下绘制过程中的 P...
    TianFB阅读 437评论 0 0
  • 自定义控件 使用场景: 在实际开发中经常会遇到现有的UI控件不能满足项目需求,或一个功能涉及到多个UI控件的组合,...
    Reathin阅读 955评论 3 10
  • 最近在学习Paint方面的知识,发现了PorterDuff这个东西。记录学习一下。 他有16个模式 1.Porte...
    会飞的羽天羽阅读 7,029评论 0 7
  • 马上要赶火车,时间不够用了,今天凑数一下,最近质量都不高,看到大家的干货,自惭形秽。 痛定思痛,回家之后要好好写文...
    铁匠826阅读 193评论 0 0