Android Canvas 更改形状和文本交叉点的颜色

Question

我正在尝试使用 Canvas 更改形状和文本相交处的颜色。 我有 2 种形状和 1 种不同颜色的文字。

这没有任何 PorterDuffXfermode 和 PorterDuffColorFilter 模式添加到任何绘画。我希望形状的交集具有特定的颜色，例如白色，文本为红色或白色，如下图所示。

在我的例子中，文本在底部，圆圈中间和矩形在上面，但它是微不足道的，我只是想弄清楚它是如何工作的，以及交叉点应该如何设置为特定颜色。

正如您在此图片中所见 背景为黑色，圆圈为白色，文字为黑色。当圆圈重叠时，圆圈的交叉点变为黑色，文本的重叠部分变为白色。

我可以用

canvas.drawColor(Color.TRANSPARENT, Mode.CLEAR);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_OUT));

如果圆形和矩形都是白色，背景是黑色。当我将背景颜色更改为任何其他颜色时，文本不可见，形状为黑色。

我也想知道我怎样才能得到与这张图片类似的结果 是否可以将圆形、矩形和文本的重叠部分设置为特定颜色？

Answer 1

Android Canvas change color of intersection of shapes and texts

和:

"If circle and rectangle are both white and background is black. When I change background color to any other color, text is not visible, shapes are black."

波特达夫

• (1) 是的，我们可以用 PorterDuff.Mode (Mode.ADD):

  PorterDuff.Mode mode = Mode.ADD;

• (2) Canvas 背景必须是透明，合成 才能工作。如果您需要任何其他背景颜色，那么我们需要在单独 Canvas 上进行合成。然后我们将绘图复制到原始的Canvas。

"I also wonder how can i get similar results like in this image"

这是代码输出(PorterDuff 决定混合色 ;O( ):

(Q1:) "Can overlapping sections for circle, rectangle and text can be set to specific color?"

• (A1:) 是的，可以做到(付出很多努力)。快完成了，但有信心它可以。这是几乎完成的图像(我不得不使用这个答案中的几乎所有内容，必须有更简单的方法...):

代码

@Override
protected void onDraw(Canvas canvas) 
{
    super.onDraw(canvas);

    Paint paint          = new Paint();
    Paint paintClear     = new Paint();
    TextPaint textPaint  = new TextPaint();
    int width            = getWidth();
    int height           = getHeight();
    int x                = 100;
    int y                = 100;
    int radius           = 100;

    PorterDuff.Mode mode        = Mode.ADD;      // mode Mode.ADD

    paintClear.setStyle(Style.FILL); 
    paint.setStyle(Style.FILL); 
    textPaint.setAntiAlias(true); 
    textPaint.setTextSize(100 * getResources().getDisplayMetrics().density);
    textPaint.setColor(Color.GREEN);    
    textPaint.setStrokeWidth(3);     

    // ** clear canvas backgound to white**
    paintClear.setColor(Color.WHITE);
    canvas.drawPaint(paintClear); 
    //canvas.save();

    Bitmap compositeBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
    Canvas compositeCanvas = new Canvas(compositeBitmap);
    paintClear.setColor(Color.TRANSPARENT);
    compositeCanvas.drawPaint(paintClear); 

    // ** draw destination circle in red **
    paint.setColor(Color.RED);
    compositeCanvas.drawCircle(x+100, y+100, radius, paint);

    // ** set Xfermode **
    paint.setXfermode(new PorterDuffXfermode(mode));
    textPaint.setXfermode(new PorterDuffXfermode(mode));

    // ** draw source circle in blue **
    paint.setColor(Color.BLUE);
    compositeCanvas.drawCircle(x-0, y-0, radius, paint);

    // ** draw text in Green **
    compositeCanvas.save();
    compositeCanvas.rotate(-45, x, y+150);
    compositeCanvas.drawText("- 65,6", x, y+150, textPaint);
    compositeCanvas.restore();

    //copy compositeCanvas to canvas
    canvas.drawBitmap(compositeBitmap, 0, 0, null);
    //canvas.restore();
}//onDraw

交叉口测试

使用 RectF包含并相交:

public Rect  mBound = new Rect(0  , 0  , 10 , 10);
public RectF a1     = new Rect(0f , 0f , 10f, 10f);
public RectF b1     = new Rect(5f , 5f , 20f, 20f);
public RectF c1     = new Rect(30f, 30f, 40f, 40f);

int boolean hit       = false;
int boolean intersect = false;
hit = hitTest(20,15); // returns false
hit = hitTest(5,5);   // returns true 
intersect = intersectsTest(a1,b1);// returns true
intersect = intersectsTest(a1,c1);// returns false

public boolean hitTest(int x, int y) 
{
    return mBound.contains(x, y); 
}//
// Returns true if the two specified rectangles intersect
public boolean intersectsTest(RectF a, RectF b) 
{
    return intersects ( a, b);
}//

注意事项

你表示你想了解更多关于彩绘的知识，这是我玩过的一些东西。

setColorFilter 和 ColorMatrixColorFilter 的实验:

textPaint.setColorFilter(new ColorMatrixColorFilter(getColorMatrix5()));//custom 5

//custom 5
private ColorMatrix getColorMatrix5() 
{
    ColorMatrix colorMatrix = new ColorMatrix();
    colorMatrix.setSaturation(0);//make it greyscale
    ColorMatrix blueMatrix = new ColorMatrix(new float[] {
        0, 0, 0, 0, 0, // red
        0, 0, 0, 0, 0, // green
        1, 1, 1, 1, 1, // blue
        1, 1, 1, 1, 1  // alpha
    });
    // Convert, then scale and clamp
    colorMatrix.postConcat(blueMatrix);
    return colorMatrix;
}//getColorMatrix1

自定义PorterDuff

听起来您需要一个 Custom PorterDuff。这里有一些代码可以让您了解如何编写一个代码(Android 使用用 C++ 编写的库)。

public class MyPorterDuffMode
{

    public Bitmap applyOverlayMode(Bitmap srcBmp, Bitmap destBmp)
    {
        int width          = srcBmp.getWidth();
        int height         = srcBmp.getHeight();
        int srcPixels[]    = new int[width * height];
        int destPixels[]   = new int[width * height];
        int resultPixels[] = new int[width * height];
        int aS   = 0, rS = 0, gS = 0, bS = 0;
        int rgbS = 0;
        int aD   = 0, rD = 0, gD = 0, bD = 0;
        int rgbD = 0;

        try
        {
            srcBmp.getPixels(srcPixels, 0, width, 0, 0, width, height);
            destBmp.getPixels(destPixels, 0, width, 0, 0, width, height);
            srcBmp.recycle();
            destBmp.recycle();
        }
        catch(IllegalArgumentException e)
        {
        }
        catch(ArrayIndexOutOfBoundsException e)
        {
        }

        for(int y = 0; y < height; y++)
        {
            for(int x = 0; x < width; x++)
            {
                rgbS = srcPixels[y*width + x];
                aS = (rgbS >> 24) & 0xff;
                rS = (rgbS >> 16) & 0xff;
                gS = (rgbS >>  8) & 0xff;
                bS = (rgbS      ) & 0xff;

                rgbD = destPixels[y*width + x];
                aD = ((rgbD >> 24) & 0xff);
                rD = (rgbD >> 16) & 0xff;
                gD = (rgbD >>  8) & 0xff;
                bD = (rgbD      )  & 0xff;

                //overlay-mode
                rS = overlay_byte(rD, rS, aS, aD);
                gS = overlay_byte(gD, gS, aS, aD);
                bS = overlay_byte(bD, bS, aS, aD);
                aS = aS + aD - Math.round((aS * aD)/255f);

                resultPixels[y*width + x] = ((int)aS << 24) | ((int)rS << 16) | ((int)gS << 8) | (int)bS;
            }
        }
        return Bitmap.createBitmap(resultPixels, width, height, srcBmp.getConfig());
    }

    // kOverlay_Mode
    int overlay_byte(int sc, int dc, int sa, int da) 
    {
        int tmp = sc * (255 - da) + dc * (255 - sa);
        int rc;
        if (2 * dc <= da) 
        {
            rc = 2 * sc * dc;
        } 
        else 
        {
            rc = sa * da - 2 * (da - dc) * (sa - sc);
        }
        return clamp_div255round(rc + tmp);
    }

    int clamp_div255round(int prod) 
    {
        if (prod <= 0) 
        {
            return 0;
        } 
        else if (prod >= 255*255) 
        {
            return 255;
        } 
        else 
        {
            return Math.round((float)prod/255);
        }
    }

}//class MyPorterDuffMode

Code Reference

参见 PorterDuff , PorterDuff.Mode , PorterDuffXfermode , ColorFilter , ColorMatrix , ColorMatrixColorFilter , PorterDuffColorFilter , Canvas , Color .