Android高级进阶——绘图篇（六）setXfermode混合模式实际使用

开篇

本篇我们将使用不同模式来实现一些常见效果，具体看下文吧

示例1、区域波纹

这种效果是不是看着挺炫的？复杂么？NO！ 非常简单，首先你需要去考虑采用什么方式可以实现这种效果的展示，一般出现这种情况首先考虑的就是采用混合模式（setXfermode方法是在混合的模式实现），那么混合模式那么多，要具体使用哪一个呢？

其实上篇博客我们介绍了 最常用的四种，SRC_IN、DST_IN、SRC_OUT、DST_OUT 都可以实现这种效果，只不过前提条件不一样罢了

• 使用 DST_IN 模式
  我们知道使用 DST_IN 的前提是不能与空白像素（透明像素）相交，一旦产生相交区域，那么相交区域也会变成空白像素，我们就可以利用这个特点来实现这个效果，而如果要想实现这个效果首先需要考虑把谁作为目标图像，把谁作为源图像，这里目标图像肯定是 动态的贝塞尔曲线 了（因为相交区域显示颜色是贝塞尔曲线的颜色），源图像就是 文本信息了：

• 1、动态贝塞尔曲线 绘制
  这个前面介绍过 《Android高级绘制——绘图篇（三）路径Path绘制以及贝塞尔曲线使用技巧》 ，这里只是改了显示区域罢了

    private void init() {
        //初始化画笔
        paint = new Paint();
        //设置画笔颜色（不能为完全透明）
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        // 源图像
        srcBitmap = Bitmap.createBitmap(800, 400, Bitmap.Config.ARGB_8888);
        //目标图像
        dstBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        //路径（贝塞尔曲线）
        path = new Path();
        //绘制中奖信息文字的画笔
        textPaint = new Paint();
        textPaint.setColor(Color.WHITE);
        textPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        textPaint.setTextSize(150);
        Canvas srcCanvas = new Canvas(srcBitmap);
        text = “aKaic’Blog”;
        //获取文字宽度
        textWidth = textPaint.measureText(text);
        //贝塞尔曲线波长
        mItemWaveLength = textWidth;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //禁用硬件加速
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        //使用离屏绘制
        int layerID = canvas.saveLayer(0, 0, getWidth(), getHeight(), paint, Canvas.ALL_SAVE_FLAG);


        path.reset();
        //这里的贝塞尔曲线的坐标为（文字开始绘制的X坐标，文字基线Y）,文字的绘制是在源图像的中间绘制的（水平，垂直居中显示）当然垂直上并没有真正的居中，需要的话可以根据 paint.getFontMetrics(); 进行计算
        path.moveTo(-mItemWaveLength + dx, srcBitmap.getHeight() / 2 - 55);

        //这里和之前一样，通过 rQuadTO 方法实现
        float halfWavelen = mItemWaveLength / 2;
        for (float i = -mItemWaveLength; i <= textWidth + mItemWaveLength; i += mItemWaveLength) {
   
            path.rQuadTo(halfWavelen / 2, 50, halfWavelen, 0);
      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46