Android Canvas 更改形状和文本交叉点的颜色
Android Canvas change color of intersection of shapes and texts
我正在尝试使用 Canvas 更改形状和文本相交处的颜色。 我有 2 个形状和 1 个不同颜色的文本。
这没有任何 PorterDuffXfermode 和 PorterDuffColorFilter 模式添加到任何绘画。我希望形状的交集是特定的颜色，例如白色，文本为红色或白色，如下图所示。
在我的例子中，文本在底部，圆圈中间和矩形在上面，但它是微不足道的，我只是想弄清楚它是如何工作的以及如何将交叉点设置为特定颜色。
正如您在此图片中所见 背景为黑色，圆圈为白色，文字为黑色。当圆圈重叠时，圆圈交点变为黑色，文本重叠部分变为白色。
我可以用
实现
canvas.drawColor(Color.TRANSPARENT, Mode.CLEAR);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_OUT));
如果圆形和矩形都是白色，背景是黑色。当我将背景颜色更改为任何其他颜色时，文本不可见，形状为黑色。
我也想知道如何才能得到与此图像相似的结果 圆形、矩形和文本的重叠部分可以设置为特定颜色吗？
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.ADD;
(2) Canvas 背景必须是 transparent 才能使 compositing 工作。
如果您需要 任何其他背景颜色，那么我们需要在 separate [=16] 上进行 compositing =].
然后我们把图纸复制到原来的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.
我正在尝试使用 Canvas 更改形状和文本相交处的颜色。
这没有任何 PorterDuffXfermode 和 PorterDuffColorFilter 模式添加到任何绘画。我希望形状的交集是特定的颜色，例如白色，文本为红色或白色，如下图所示。
在我的例子中，文本在底部，圆圈中间和矩形在上面，但它是微不足道的，我只是想弄清楚它是如何工作的以及如何将交叉点设置为特定颜色。
正如您在此图片中所见
我可以用
实现canvas.drawColor(Color.TRANSPARENT, Mode.CLEAR);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_OUT));
如果圆形和矩形都是白色，背景是黑色。当我将背景颜色更改为任何其他颜色时，文本不可见，形状为黑色。
我也想知道如何才能得到与此图像相似的结果
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.ADD;
(2)
Canvas背景必须是transparent才能使compositing工作。 如果您需要 任何其他背景颜色，那么我们需要在 separate [=16] 上进行 compositing =]. 然后我们把图纸复制到原来的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.