public SketchpadView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); public SketchpadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); private void init () { // 抗锯齿、防抖动 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG); // 画笔模式为描边 mPaint.setStyle(Paint.Style.STROKE); // 拐角为圆角 mPaint.setStrokeJoin(Paint.Join.ROUND); // 两端为圆角 mPaint.setStrokeCap(Paint.Cap.ROUND); // 画笔宽度 mPaint.setStrokeWidth(50); // 画笔颜色 mPaint.setColor(getResources().getColor(R.color.colorAccent)); // 画笔透明度，先设置颜色，再设置透明度0-255 mPaint.setAlpha(80); // 笔迹路径 mPath = new Path(); @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); // 双缓存机制 mBufferBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_4444); mBufferCanvas = new Canvas(mBufferBitmap); @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (mBufferBitmap != null) { canvas.drawBitmap(mBufferBitmap, 0, 0, null); @SuppressLint( "ClickableViewAccessibility" ) @Override public boolean onTouchEvent(MotionEvent event) { float x = event.getX(); float y = event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mLastX = x; mLastY = y; mPath.moveTo(x, y); break ; case MotionEvent.ACTION_MOVE: mPath.quadTo(mLastX, mLastY, (x + mLastX) / 2, (y + mLastY) / 2); mBufferCanvas.drawPath(mPath, mPaint); mLastX = x; mLastY = y; invalidate(); break ; case MotionEvent.ACTION_UP: mPath.reset(); invalidate(); break ; return true ;

注意：在初始化画笔的时候，我们给画笔设置了80的透明度，透明度一定要在颜色之后设置，因为颜色中也存在透明通道，会覆盖已设置的透明度。

// 画笔颜色
mPaint.setColor(getResources().getColor(R.color.colorAccent));
// 画笔透明度，先设置颜色，再设置透明度0-255
mPaint.setAlpha(80);

看下效果：

咦，为什么还一段一段的颜色渐变？

这里需要了解下Paint类中的一个很重要的方法 setXfermode(Xfermode xfermode) ，参数Xfermode有三个子类：AvoidXfermode、PixelXorXfermode和PorterDuffXfermode，前两个类在API 16被遗弃了，重点看下PorterDuffXfermode这个类，PorterDuffXfermode类主要用于图形合成时的图像过渡模式计算，共有18种过渡模式，本文重点看下其中的两种模式SRC_OVER、SRC。

如果没有调用setXfermode方法，Paint绘制默认采用的是 SRC_OVER 模式，即先绘制第一笔，绘制第二笔时，第二笔与第一笔重合的部分，会进行叠加，颜色会变得越来越深。

这就解释了为什么上面的效果中，会出现一段一段的的颜色渐变笔迹，是因为半透明的笔迹叠加了，现在我们将模式修改为 SRC ，即重合的部分只显示第二笔，看下效果：

透明效果出来了，但是存在一个问题，就是每段笔迹重合的部分，没有叠加颜色变深的效果，继续往下看。

2.笔迹叠加

修改下代码：

public class SketchpadView extends View {
    private Paint mPaint;
    private Path mPath;
    private float mLastX;
    private float mLastY;
    private Bitmap mBufferBitmap;
    private Canvas mBufferCanvas;
    public SketchpadView(Context context) {
        this(context, null);
    public SketchpadView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    public SketchpadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    private void init() {
        // 抗锯齿、防抖动
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        // 画笔模式为描边
        mPaint.setStyle(Paint.Style.STROKE);
        // 拐角为圆角
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        // 两端为圆角
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        // 画笔宽度
        mPaint.setStrokeWidth(50);
        // 画笔颜色
        mPaint.setColor(getResources().getColor(R.color.colorAccent));
        // 画笔透明度，先设置颜色，再设置透明度0-255
        mPaint.setAlpha(80);
        // 笔迹路径
        mPath = new Path();
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 双缓存机制
        mBufferBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_4444);
        mBufferCanvas = new Canvas(mBufferBitmap);
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mBufferBitmap != null) {
            canvas.drawBitmap(mBufferBitmap, 0, 0, null);
        // 修改1
        // ACTION_MOVE时，将笔迹临时绘制在画布上
        canvas.drawPath(mPath, mPaint);
    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mLastX = x;
                mLastY = y;
                mPath.moveTo(x, y);
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.quadTo(mLastX, mLastY, (x + mLastX) / 2, (y + mLastY) / 2);
                // 修改2
                // 将绘制方法移到ACTION_UP中
                mLastX = x;
                mLastY = y;
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                // 修改3
                // ACTION_UP时，将当前一笔的笔迹，绘制到缓存画布上
                mBufferCanvas.drawPath(mPath, mPaint);
                mPath.reset();
                invalidate();
                break;
        return true;

修改后的代码，没有设置Paint的图像模式，默认为叠加状态，在ACTION_MOVE时，没有将笔迹实时绘制在缓存画布上，而是临时绘制在实际画布上，ACTION_UP时再将当前一笔的笔迹一次性绘制到缓存画布，然后再绘制到实际画布中，这样一笔一笔下来，就会产生叠加的笔迹效果了，看下最终效果：

3.写在最后

到这里半透明画笔的笔迹叠加效果就介绍完了，如有错误或者遗漏的地方可以给我留言评论，谢谢！

代码已上传至GitHub，欢迎Star、Fork！

GitHub地址： github.com/alidili/Dem…

本文Demo的Apk下载地址： github.com/alidili/Dem…

Android工程师 73.9k

粉丝