交叉口测试

Question

我尝试使用Canvas更改形状和文本交叉的颜色。我有2个形状和1个不同颜色的文字。

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

在我的示例中，文本位于底部，圆圈中间和矩形上方，但它无关紧要，我只想弄清楚它是如何工作的，以及如何将交叉点设置为特定颜色。

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

我可以用

实现这一目标

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

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

我也想知道如何在此图像中获得类似的结果可以将圆形，矩形和文本的重叠部分设置为特定颜色吗？

Answer 1

Android Canvas改变形状和文本交集的颜色

和

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

PorterDuff

（1）是的，我们可以PorterDuff.Mode（Mode.ADD）：

PorterDuff.Mode mode = Mode.ADD;
（2）Canvas背景必须为transparent才能使compositing生效。如果您需要任何其他背景颜色，那么我们需要在单独 Canvas上执行合成。然后我们将绘图复制到原始Canvas。

“我也想知道如何在this image”
中获得类似的结果

以下是代码输出（PorterDuff决定混合颜色; O（）：

（Q1 :)“可以将圆形，矩形和文本的重叠部分设置为具体的颜色？“

（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，{{3} }，Canvas。

Android Canvas改变形状和文本交集的颜色

1 个答案:

PorterDuff

代码

交叉口测试

注释

自定义PorterDuff

自定义`PorterDuff`