Canvas cut the method used primarily clipRect, clipPath, clipRegion three methods.
clipRect method:
clipRect methods provide seven heavy-duty implementation, such as:
Parameters are described below:
- rect: Rect objects, define the scope of the clipping region, and the like RectF Rect function, accuracy, and various methods of providing it
- Left position of the rectangular cut-outs: left
- top: the top position of the rectangular cut-outs
- Right position of the crop rectangle: right
- The lower position of the rectangular cropped region: bottom
- op: combination cropped area
The four values may be integer or floating point.
Example of use:
1, no op clipRect method parameters, i.e., normal clipping canvas method.
canvas.drawColor(Color.BLUE);//裁剪之前
//裁剪
Rect rect = new Rect(100, 100, 400, 400);
canvas.clipRect(rect);
canvas.drawColor(Color.RED);//红色就去就是剪裁出来的画布，通过剪裁之后，所有的操作都只能在剪裁区域内绘制。Results are as follows:
2, op clipRect method parameters:
there are cropping method op parameters, based on different parameters of op, cut out of the canvas will be different, where the first parameter of op to make a presentation, you can see the source code to know, Region.Op is an enumerated type, a total of six values to choose from, as follows:
- DIFFERENCE: the first part is different from the second time is displayed
- REPLACE: is the second time the show
- REVERSE_DIFFERENCE: a second display different from the first portion
- INTERSECT: the intersection of display
- UNION: Show All
- XOR: The complement is part of The Complete Works of birth minus the intersection of display
By the following specific examples to verify the specific meaning different values:
(. 1) the DIFFERENCE, is different from the first display section is displayed second
canvas.drawColor(Color.GRAY);//原始画布填充一个灰色的默认背景
canvas.save();
canvas.drawRect(new Rect(100, 100, 200, 200), mStrokePaint);//画一个黄色框，方便识别
canvas.clipRect(110, 110, 190, 190);//第一次裁剪
canvas.clipRect(130, 130, 170, 170, Region.Op.DIFFERENCE);//第二次裁剪
canvas.drawColor(Color.WHITE);//剪裁过后，在画布上执行绘制操作
canvas.restore();FIG effect:
the effect can be seen in FIG., Two after cutting, drawing canvas may be only the white area, i.e. cut obtained operable canvas is the white area.
If the first crop code is not executed, that is commented out, the result is as follows: You can see the final result is dug up a piece gouged out of this one is unable to perform rendering the entire canvas:
gray part removing portions of the white part of the stay canvas can be white area is drawn.
(2) REPLACE: displays the results of the second cut
canvas.drawColor(Color.GRAY);//原始画布填充一个灰色的默认背景
canvas.save();
canvas.drawRect(new Rect(100, 100, 200, 200), mStrokePaint);//画一个黄色框，方便识别
canvas.clipRect(110, 110, 190, 190);//第一次裁剪
canvas.drawColor(Color.BLUE);//第一次裁剪后，给画布填充一个蓝色的背景，
canvas.clipRect(130, 130, 170, 170, Region.Op.REPLACE);//第二次裁剪
canvas.drawColor(Color.WHITE);//剪裁过后，在画布上执行绘制操作，绘制的内容都在这个白色的区域内，超出白色区域的绘制不显示，即无效。
mPaint.setColor(Color.RED);
canvas.drawLine(100, 100, 200, 200, mPaint);//画一条红色的对角线
canvas.restore();FIG Effect:
The white area is left behind after the two cutting regions, i.e. twice drawable area after cutting. Such as red diagonal coordinates of the upper left corner from the blue paint, the end of the lower right corner to blue, but only this part of the white area, the excess part of the final display rendering invalid.
(3) REVERSE_DIFFERENCE: second time different from the first display portion
canvas.save();
canvas.drawRect(new Rect(100, 100, 200, 200), mStrokePaint);//画一个黄色框，方便识别
canvas.clipRect(110, 110, 190, 190);//第一次裁剪
canvas.drawColor(Color.BLUE);
canvas.clipRect(150, 150, 250, 250, Region.Op.REVERSE_DIFFERENCE);//第二次裁剪
canvas.drawColor(Color.WHITE);//剪裁过后，在画布上执行绘制操作
mPaint.setColor(Color.RED);
canvas.drawLine(100, 100, 250, 250, mPaint);
canvas.restore();FIG Effect:
As can be seen from the chart, the Region.Op.REVERSE_DIFFERENCE mode, the final white canvas preserved region, blue region, and blue and white intersecting region are removed, that is twice the cut not drawing area. The red line is drawn from the upper left corner of the blue area to the bottom right corner of the white areas.
(4) INTERSECT: the intersection of display
and (3) code is the same, but in the second cut is the last parameter changed Region.Op.INTERSECT,
canvas.save();
canvas.drawRect(new Rect(100, 100, 200, 200), mStrokePaint);//画一个黄色框，方便识别
canvas.clipRect(110, 110, 190, 190);//第一次裁剪
canvas.drawColor(Color.BLUE);
canvas.clipRect(150, 150, 250, 250, Region.Op.INTERSECT);//第二次裁剪
canvas.drawColor(Color.WHITE);//剪裁过后，在画布上执行绘制操作
mPaint.setColor(Color.RED);
canvas.drawLine(100, 100, 250, 250, mPaint);
canvas.restore();To achieve the following results:
As can be seen from the chart, the Region.Op.INTERSECT mode, the final preserved canvas is first retained portion and the second cut of the intersection, i.e. the way that the white area without intersecting areas have been removed.
(5) UNION: Show All
And (3) code is the same, but in the second cut is the last parameter changed Region.Op.UNION,
canvas.save();
canvas.drawRect(new Rect(100, 100, 200, 200), mStrokePaint);//画一个黄色框，方便识别
canvas.clipRect(110, 110, 190, 190);//第一次裁剪
canvas.drawColor(Color.BLUE);
canvas.clipRect(150, 150, 250, 250, Region.Op.UNION);//第二次裁剪
canvas.drawColor(Color.WHITE);//剪裁过后，在画布上执行绘制操作
mPaint.setColor(Color.RED);
canvas.drawLine(100, 100, 250, 250, mPaint);
canvas.restore();FIG effect achieved as follows:
As can be seen from the chart, the Region.Op.UNION mode, the canvas is finally retained by the first and second retained all of the cut-out portion, i.e., the way that the white area, i.e., by adding two clipping region. As can be seen, after filling the first cut is not blue, because after the end of the second crop, to be re-filled with white drawing area, so blue was replaced.
(6) XOR: subtracting the complement of the intersection is displayed repertoire fertility section:
and (3) code is the same, but the second cut is the last parameter changed Region.Op.XOR,
canvas.save();
canvas.drawRect(new Rect(100, 100, 200, 200), mStrokePaint);//画一个黄色框，方便识别
canvas.clipRect(110, 110, 190, 190);//第一次裁剪
canvas.drawColor(Color.BLUE);
canvas.clipRect(150, 150, 250, 250, Region.Op.XOR);//第二次裁剪
canvas.drawColor(Color.WHITE);//剪裁过后，在画布上执行绘制操作
mPaint.setColor(Color.RED);
canvas.drawLine(100, 100, 250, 250, mPaint);
canvas.restore();FIG effect achieved as follows:
As can be seen from the figure, the Region.Op.XOR mode, the final preserved canvas is first retained portion and the second cut disjoint, i.e., is white in FIG. area, while the intersecting region is removed.
clipPath method described:
ClipPath canvas by cutting method in which a canvas is cut out along the pathways (i.e., area) specified by the Path.
canvas.save();
canvas.translate(10, 160);
canvas.clipRect(new Rect(0, 0, 100, 100));//第一次裁剪画布
canvas.drawColor(Color.BLUE);//第一次裁剪画布后，为画布填充蓝色背景
Path mPath = new Path();//new一个Path对象，
//canvas.clipPath(mPath); // makes the clip empty
mPath.addCircle(50, 50, 50, Path.Direction.CCW);//添加一个半径为50的圆
canvas.clipPath(mPath, Region.Op.REPLACE);//第二次裁剪画布，最后一个参数与clipRect方法的一样，参考上面
drawContent(canvas);//绘制内容
canvas.restore();FIG effect achieved as follows:
As can be seen from the figure, the white area is where the circle drawable area, while the blue part of the non-drawing area. clipPath and clipRect essence no different, clipRect cropped area cutting method is relatively simple, it can only be a rectangular area, and clipPath method clipping region richer, basically you specify what areas, on what crop area, comparatively speaking, clipPath more flexible and rich.
For the Path class will be specifically written to use a blog to introduce here it is not too much introduced.
clipRegion method:
The method uses the Region class clipRegion:
means Region, i.e. meaning Chinese region, which is represented by a canvas layer on a closed area.
Note:
with clipRect and clipPath To use the current matrix transform different. clipRegion will not be converted. That canvas of the matrix has no effect on clipRegion.
Paint paint = new Paint();
canvas.scale(0.5f, 0.5f);
paint.setColor(Color.BLUE);
canvas.drawRect(new Rect(0, 0, 300, 300), paint);//矩形实际大小为150*150
canvas.save();
canvas.clipRect(new Rect(300, 300, 600, 600));//裁剪区域实际大小为150*150
canvas.drawColor(Color.RED);
canvas.restore();
canvas.clipRegion(new Region(new Rect(400, 0, 700, 300)));//裁剪区域实际大小为300*300
canvas.drawColor(Color.YELLOW);The effect achieved is as follows:
We can see, Canvas transformation has no effect on clipRegion.
It is recommended to write a good blog: Android 2D Graphics Learning (II), Canvas articles 2, Canvas crop and Region, RegionIterator , where there is a detailed description of the Region and clipRegion.