在Android上，我如何制作形状奇特的裁剪区域? [英] On Android how do I make oddly shaped clipping areas?

问题描述

以下是如何创建圆形的裁剪区域:

Here is how to create a clipping area the shape of a circle:

Path path = new Path();
path.addCircle(200,200,100,Direction.CW);
c.clipPath(path); // c is a Canvas

现在，画布"上有一个剪贴区域，可防止在该圆的边界之外绘制任何内容.但是，如果我想使修剪区域的形状像一个甜甜圈(或其他形状)怎么办?

Now there's a clipping area on the Canvas which prevents drawing anything outside the bounds of that circle. But, what if I want to have the clipping area be shaped like a donut (or whatever)?

我尝试创建第二条路径，并在其上使用toggleInverseFillType，然后将其添加到原始路径中，但这似乎行不通.

I tried playing around with creating a second Path and using toggleInverseFillType on it and then adding that to the original path, but that doesn't seem to work.

或者，不是使用路径，而是可以创建位图以用作遮罩并将其设置为Canvas上的剪贴蒙板吗?

Alternatively, instead of using a Path, is it possible to just create a Bitmap to use as a mask and set it as a clipping mask on the Canvas somehow?

答案恰好是我需要的一小部分.在画布上执行多项操作时，请始终在第一个clipPath调用上使用Op.REPLACE.这将替换该Canvas上所有现有的clipPath.

The answer is exactly what I needed with one small addition. When doing multiple operations on a canvas, always use Op.REPLACE on the first clipPath call. That will replace any existing clipPath on that Canvas.

作为参考，这是我发现的6个不同Region.Op值的含义.想象一个带有2个圆圈的维恩图. "B"是2个圆圈重叠的部分. "A"是不重叠的左圆圈. "C"是不重叠的右圆圈.

For reference, here is what I discovered what the 6 different Region.Op values mean. Imagine a venn diagram with 2 circles. "B" is the part where the 2 circles overlap. "A" is the non-overlapping left circle. "C" is the non-overlapping right circle.

c.clipPath(a,Region.Op.REPLACE);
c.clipPath(b,???);

Region.Op.DIFFERENCE         -> A..            
Region.Op.INTERSECT          -> .B.            
Region.Op.REPLACE            -> .BC            
Region.Op.REVERSE_DIFFERENCE -> ..C            
Region.Op.UNION              -> ABC
Region.Op.XOR                -> A.C

."表示未绘制的部分.抱歉，如果不清楚.没有图形很难描述得很好.

The "." indicates the part that isn't drawn. Sorry if that's not particularly clear. It's hard to describe well without graphics.

推荐答案

来自Canvas Canvas#clipPath(Path path, Region.Op op)-使用指定的路径修改当前剪辑.

Canvas#clipPath(Path path, Region.Op op) - Modify the current clip with the specified path.

因此，以您的甜甜圈示例为例:

So, for your donut example:

1. 创建2条路径.一个代表较大的圆圈，一个代表较小的圆圈.
2. Canvas#clipPath( Path )带有较大的圆圈Path.

3. 使用较小的圆圈Path调用画布上的Canvas#clipPath( Path, Region.Op )方法作为第一个参数和相应的

1. Create 2 Paths. One for the larger circle, one for the smaller circle.
2. Canvas#clipPath( Path ) with larger circle Path.

3. Call the Canvas#clipPath( Path, Region.Op ) method on your canvas with the smaller circle Path for the first argument and the appropriate Region.Op enum value for the second argument.

Path largePath = new Path();
largePath.addCircle(200,200,100,Direction.CW);
Path smallPath = new Path();
smallPath.addCircle(200,200,40,Direction.CW);
c.clipPath(largePath); // c is a Canvas
c.clipPath(smallPath, Region.Op.DIFFERENCE);

再次修改Region.Op枚举值以获得不同的效果...

Again, modify the Region.Op enum value to get different effects...

这篇关于在Android上，我如何制作形状奇特的裁剪区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！