android - 以编程方式创建位图掩码

Question

我在 onDraw() 中有这段代码。

radius = drawGmpImage(this.gmpImage, canvas);
canvas.drawCircle(kHorizontalOffset, kScreenVerticalOffset, radius , maskPaint);

drawGmpImage 创建一个复杂的图形，它是一个圆圈，上面画有许多线。这是我无法更改的库函数。这些线是多边形，可以延伸到圆周以外。

需要“清除”圆圈外绘制的所有内容。

这是一个来自 iOS 的端口，最初的开发人员解决方案是使用一个简单的位图掩码，作为资源存储，带有一个与绘制的圆圈大小相匹配的透明圆圈。只需在绘制的圆圈上绘制位图即可达到预期效果，但在 Android 上不是一个选项，因为我需要支持所有可能的分辨率和比率。

因此，调用 canvas.drawCircle() 是我尝试屏蔽圆圈外所有内容的开始。它工作正常，因为在我绘制的圆上绘制了一个实心圆，这样唯一剩下的就是绘制圆周外的多边形线。 Radius 是绘制圆的半径。

我怎样才能反转它以便我只剩下圆圈的内容？

Answer 1

为什么您可以花几个小时做某事，然后放弃，提出问题，然后在 20 分钟后偶然发现答案？生活的乐趣。

Path path = new Path();
path.addCircle(kHorizontalOffset, kScreenVerticalOffset, radius, Path.Direction.CW);
canvas.clipPath(path);

我错过了 clipPath 方法，该方法将采用任何路径并将其用作剪切区域。将我的遮蔽圆圈添加到路径中正是我所需要的。

[编辑]

这很好用，但是有一个问题。如果打开了硬件加速，它就不起作用。我可以关闭加速，但随后我会在剩下的复杂绘制中失去很多性能。

这是我最终解决的方法:

在 onSizeChanged() 中，创建一个位图掩码。我使用这种涂料在位图上的正确位置绘制了一个透明圆圈。关键是使用 PorterDuffXfermode。

 maskPaint = new Paint();
 maskPaint.setColor(Color.TRANSPARENT);
 maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
 maskPaint.setStyle(Paint.Style.FILL);

然后创建位图

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {

    super.onSizeChanged(w, h, oldw, oldh);

    createMask(w,h,this.radius);

}

private void createMask(int w,int h, int radius){

    if (mask!=null){mask.recycle();}

    mask = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    Canvas maskCanvas = new Canvas(mask);
    maskCanvas.drawCircle(w, h, radius, maskPaint);

}

然后在 onDraw() 中，我简单地在整个 View 上绘制 mask :

@Override
protected void onDraw(Canvas canvas){

    // draw the image();
    setRadius(drawGmpImage(this.gmpImage, canvas));
    canvas.drawCircle(kHorizontalOffset, kScreenVerticalOffset, radius , maskPaint);

    // overlay the mask bitmap
    if (mask != null) {
        canvas.drawBitmap(mask, 0f, 0f, bitmapPaint);
    }

如果半径发生变化，则重新创建 mask :

 private void setRadius(int radius){

     this.radius = radius;
     createMask(kHorizontalOffset, kScreenVerticalOffset, radius);

 }