Region.Op - canvas.clipxxx(xxx, Region.Op.XXX)

注: **canvas.clipxxx()** 对于圆角部分锯齿有些明显, Android9.0之后仅支持 **Region.Op.DIFFERENCE/Region.Op.INTERSECT**
Region.Op 主要用于 canvas 的裁剪, 与其类似的还有 Path.Op 作用于 Path 上, 具体效果请参考下文的 Path.Op 

  1. @Override
  2. protected void onDraw(Canvas canvas) {
  3.     super.onDraw(canvas);
  4.     canvas.save();
  5.     canvas.clipPath(mBgPath);
  6.     // canvas.clipPath(mBgPath, Region.Op.DIFFERENCE)
  7.     canvas.drawPath(mBgPath, mPaintBg);
  8.     canvas.drawRect(mRectF, mPaint);
  9.     canvas.restore();
  10. }

PorterDuff.Mode - paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.XXX)

注: PorterDuff 拥有抗锯齿属性
SRC: 设置了 xfermode 的所有图形(目标图形, 设置顺序会有)
DST: 没有设置 xfermode 的所有图形
PorterDuff.Mode 的合成模式主要依靠透明和重叠, 如果非重叠部分不透明, 非重叠部分也有可能会显示出来, 结果可能会跟预想的不同, 解决方法就是在非重叠部分添加透明层(注意: 透明层的添加顺序, 透明层是否设置 Xfermode)image.png

  1. // PorterDuff 示例 View
  2. class PorterDuffView constructor(context: Context, attrs: AttributeSet? = null) : View(context, attrs) {
  4.     private var type = 0
  6.     private val xfermode: Xfermode by lazy {
  7.         val mode = when (type) {
  8.             0 -> {
  9.                 PorterDuff.Mode.CLEAR
  10.             }
  11.             1 -> {
  12.                 PorterDuff.Mode.SRC
  13.             }
  14.             2 -> {
  15.                 PorterDuff.Mode.DST
  16.             }
  17.             3 -> {
  18.                 PorterDuff.Mode.SRC_OVER
  19.             }
  20.             4 -> {
  21.                 PorterDuff.Mode.DST_OVER
  22.             }
  23.             5 -> {
  24.                 PorterDuff.Mode.SRC_IN
  25.             }
  26.             6 -> {
  27.                 PorterDuff.Mode.DST_IN
  28.             }
  29.             7 -> {
  30.                 PorterDuff.Mode.SRC_OUT
  31.             }
  32.             8 -> {
  33.                 PorterDuff.Mode.DST_OUT
  34.             }
  35.             9 -> {
  36.                 PorterDuff.Mode.SRC_ATOP
  37.             }
  38.             10 -> {
  39.                 PorterDuff.Mode.DST_ATOP
  40.             }
  41.             11 -> {
  42.                 PorterDuff.Mode.XOR
  43.             }
  44.             16 -> {
  45.                 PorterDuff.Mode.DARKEN
  46.             }
  47.             17 -> {
  48.                 PorterDuff.Mode.LIGHTEN
  49.             }
  50.             13 -> {
  51.                 PorterDuff.Mode.MULTIPLY
  52.             }
  53.             14 -> {
  54.                 PorterDuff.Mode.SCREEN
  55.             }
  56.             12 -> {
  57.                 PorterDuff.Mode.ADD
  58.             }
  59.             else -> {
  60.                 PorterDuff.Mode.OVERLAY
  61.             }
  62.         }
  63.         PorterDuffXfermode(mode)
  64.     }
  66.     private val srcColor = Color.parseColor("#FF2C98F0")
  67.     private val dstColor = Color.parseColor("#FFff2565")
  68.     private val transparentColor = 0
  70.     private val area = dp2px(100f)
  71.     private val offset = dp2px(10f)
  72.     private val radius = dp2px(30f)
  73.     private val size = dp2px(50f)
  75.     private val paint = Paint().apply {
  76.         isAntiAlias = true
  77.         style = Paint.Style.FILL_AND_STROKE
  78.         strokeWidth = 1f
  79.     }
  81.     private val path = Path()
  82.     private val rectF = RectF(offset, area - offset - size, offset + size, area - offset)
  83.     private val rectFBg = RectF(0f, 0f, area, area)
  85.     init {
  86.         attrs?.let {
  87.             val types = context.obtainStyledAttributes(it, R.styleable.PorterDuffView)
  88.             type = types.getInt(R.styleable.PorterDuffView_porter_type, type)
  89.             types.recycle()
  90.         }
  91.     }
  93.     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  94.         setMeasuredDimension(area.toInt(), area.toInt())
  95.     }
  97.     override fun onDraw(canvas: Canvas) {
  98.         val count = canvas.saveLayer(null, null, Canvas.ALL_SAVE_FLAG)
  100.         path.reset()
  101.         path.addCircle(area - offset - radius, radius + offset, radius, Path.Direction.CCW)
  102.         paint.color = dstColor
  103.         canvas.drawPath(path, paint)
  105.         path.reset()
  106.         path.addRect(rectF, Path.Direction.CCW)
  107.         paint.color = srcColor
  108.         paint.xfermode = xfermode
  109.         canvas.drawPath(path, paint)
  110.         paint.xfermode = null
  112.         path.reset()
  113.         path.addRect(rectFBg, Path.Direction.CCW)
  114.         path.addRect(rectF, Path.Direction.CW)
  115.         paint.color = transparentColor
  116.         paint.xfermode = xfermode
  117.         canvas.drawPath(path, paint)
  118.         paint.xfermode = null
  120.         canvas.restoreToCount(count)
  121.     }
  123.     private fun dp2px(dpValue: Float): Float {
  124.         val scale = Resources.getSystem().displayMetrics.density
  125.         return dpValue * scale + 0.5f
  126.     }
  127. }
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <declare-styleable name="PorterDuffView">
  4.         <attr name="porter_type" format="enum" >
  5.             <enum name="clear" value="0" />
  6.             <enum name="src" value="1" />
  7.             <enum name="dst" value="2" />
  8.             <enum name="src_over" value="3" />
  9.             <enum name="dst_over" value="4" />
  10.             <enum name="src_in" value="5" />
  11.             <enum name="dst_in" value="6" />
  12.             <enum name="src_out" value="7" />
  13.             <enum name="dst_out" value="8" />
  14.             <enum name="src_atop" value="9" />
  15.             <enum name="dst_atop" value="10" />
  16.             <enum name="xor" value="11" />
  17.             <enum name="darken" value="16" />
  18.             <enum name="lighten" value="17" />
  19.             <enum name="multiply" value="13" />
  20.             <enum name="screen" value="14" />
  21.             <enum name="add" value="12" />
  22.             <enum name="overlay" value="15" />
  23.         </attr>
  24.     </declare-styleable>
  25. </resources>
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="@color/white"
  7.     android:orientation="vertical">
  9.     <com.ypw.code.view.FlowLayout
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content">
  13.         <com.ypw.code.view.PorterDuffView
  14.             android:layout_width="wrap_content"
  15.             android:layout_height="wrap_content"
  16.             android:layout_margin="@dimen/sw_2"
  17.             android:background="#f0eeeeee"
  18.             app:porter_type="clear" />
  20.         <com.ypw.code.view.PorterDuffView
  21.             android:layout_width="wrap_content"
  22.             android:layout_height="wrap_content"
  23.             android:layout_margin="@dimen/sw_2"
  24.             android:background="#f0eeeeee"
  25.             app:porter_type="src" />
  27.         <com.ypw.code.view.PorterDuffView
  28.             android:layout_width="wrap_content"
  29.             android:layout_height="wrap_content"
  30.             android:layout_margin="@dimen/sw_2"
  31.             android:background="#f0eeeeee"
  32.             app:porter_type="dst" />
  34.         <com.ypw.code.view.PorterDuffView
  35.             android:layout_width="wrap_content"
  36.             android:layout_height="wrap_content"
  37.             android:layout_margin="@dimen/sw_2"
  38.             android:background="#f0eeeeee"
  39.             app:porter_type="src_over" />
  41.         <com.ypw.code.view.PorterDuffView
  42.             android:layout_width="wrap_content"
  43.             android:layout_height="wrap_content"
  44.             android:layout_margin="@dimen/sw_2"
  45.             android:background="#f0eeeeee"
  46.             app:porter_type="dst_over" />
  48.         <com.ypw.code.view.PorterDuffView
  49.             android:layout_width="wrap_content"
  50.             android:layout_height="wrap_content"
  51.             android:layout_margin="@dimen/sw_2"
  52.             android:background="#f0eeeeee"
  53.             app:porter_type="src_in" />
  55.         <com.ypw.code.view.PorterDuffView
  56.             android:layout_width="wrap_content"
  57.             android:layout_height="wrap_content"
  58.             android:layout_margin="@dimen/sw_2"
  59.             android:background="#f0eeeeee"
  60.             app:porter_type="dst_in" />
  62.         <com.ypw.code.view.PorterDuffView
  63.             android:layout_width="wrap_content"
  64.             android:layout_height="wrap_content"
  65.             android:layout_margin="@dimen/sw_2"
  66.             android:background="#f0eeeeee"
  67.             app:porter_type="src_out" />
  69.         <com.ypw.code.view.PorterDuffView
  70.             android:layout_width="wrap_content"
  71.             android:layout_height="wrap_content"
  72.             android:layout_margin="@dimen/sw_2"
  73.             android:background="#f0eeeeee"
  74.             app:porter_type="dst_out" />
  76.         <com.ypw.code.view.PorterDuffView
  77.             android:layout_width="wrap_content"
  78.             android:layout_height="wrap_content"
  79.             android:layout_margin="@dimen/sw_2"
  80.             android:background="#f0eeeeee"
  81.             app:porter_type="src_atop" />
  83.         <com.ypw.code.view.PorterDuffView
  84.             android:layout_width="wrap_content"
  85.             android:layout_height="wrap_content"
  86.             android:layout_margin="@dimen/sw_2"
  87.             android:background="#f0eeeeee"
  88.             app:porter_type="dst_atop" />
  90.         <com.ypw.code.view.PorterDuffView
  91.             android:layout_width="wrap_content"
  92.             android:layout_height="wrap_content"
  93.             android:layout_margin="@dimen/sw_2"
  94.             android:background="#f0eeeeee"
  95.             app:porter_type="xor" />
  97.         <com.ypw.code.view.PorterDuffView
  98.             android:layout_width="wrap_content"
  99.             android:layout_height="wrap_content"
  100.             android:layout_margin="@dimen/sw_2"
  101.             android:background="#f0eeeeee"
  102.             app:porter_type="darken" />
  104.         <com.ypw.code.view.PorterDuffView
  105.             android:layout_width="wrap_content"
  106.             android:layout_height="wrap_content"
  107.             android:layout_margin="@dimen/sw_2"
  108.             android:background="#f0eeeeee"
  109.             app:porter_type="lighten" />
  111.         <com.ypw.code.view.PorterDuffView
  112.             android:layout_width="wrap_content"
  113.             android:layout_height="wrap_content"
  114.             android:layout_margin="@dimen/sw_2"
  115.             android:background="#f0eeeeee"
  116.             app:porter_type="multiply" />
  118.         <com.ypw.code.view.PorterDuffView
  119.             android:layout_width="wrap_content"
  120.             android:layout_height="wrap_content"
  121.             android:layout_margin="@dimen/sw_2"
  122.             android:background="#f0eeeeee"
  123.             app:porter_type="screen" />
  125.         <com.ypw.code.view.PorterDuffView
  126.             android:layout_width="wrap_content"
  127.             android:layout_height="wrap_content"
  128.             android:layout_margin="@dimen/sw_2"
  129.             android:background="#f0eeeeee"
  130.             app:porter_type="overlay" />
  132.         <com.ypw.code.view.PorterDuffView
  133.             android:layout_width="wrap_content"
  134.             android:layout_height="wrap_content"
  135.             android:layout_margin="@dimen/sw_2"
  136.             android:background="#f0eeeeee"
  137.             app:porter_type="add" />
  139.     </com.ypw.code.view.FlowLayout>
  141. </androidx.core.widget.NestedScrollView>

Path.fillType + Path.Direction.CW/CCW

path.fillType 路径的填充方式:

  • WINDING: 非零环绕, 保留两种图形的全部区域
  • INVERSEWINDING: 反非零环绕, **保留非两种图形的区域**_
  • EVENODD: 奇偶, **去除第二种图形和第一种图形的重叠部分**_
  • INVERSEEVEN_ODD: 反奇偶, **填充非图形区域并去除两种图形的非重叠部分_**

path.addxxx(xxx, Path.Direction.CW/CCW) 路径的绘制方向

  • Path.Direction.CW: 顺时针方向
  • Path.Direction.CCW: 逆时针方向

path.fillType 可单独使用, 也可以和 path.addxxx(xxx, Path.Direction.CW/CCW) 一起使用

第一种情况: 两种图形里有一个带圆角, 且是同向绘制

image.png

第二种情况: 两种图形里有一个带圆角, 且是异向绘制

image.png

第三种情况: 两种图形里不包含圆角, 且是同向绘制

image.png

第四种情况: 两种图形里不包含圆角, 且是异向绘制

image.png

  1. // 正方形和圆角正方形
  2. override fun onDraw(canvas: Canvas) {
  3.     val size = min(width, height) / 4f
  4.     val path = Path()
  5.     val rectF = RectF(size / 2,  size / 2, width - size / 2, height - size / 2)
  6.     path.fillType = dir
  7.     path.addRect(rectF, Path.Direction.CW)
  8.     path.addRoundRect(rectF, size / 2, size / 2, Path.Direction.CW)
  9.     canvas.drawPath(path, paint)
  10. }
  11. // 两个圆形
  12. override fun onDraw(canvas: Canvas) {
  13.     val centerX = width / 2f
  14.     val centerY = height / 2f
  15.     val size = min(centerX, centerY) / 2f
  16.     val path = Path()
  17.     path.fillType = dir
  18.     path.addCircle(centerX - size / 2, centerY, size, Path.Direction.CW)
  19.     path.addCircle(centerX + size / 2, centerY, size, Path.Direction.CCW)
  20.     canvas.drawPath(path, paint)
  21. }
  22. // 正方形和五角星
  23. override fun onDraw(canvas: Canvas) {
  24.     val pathData = context.getString(R.string.path_star)
  25.     // 根据 矢量图形里的 PathData 创建 Path
  26.     val pathStart = PathUtils.createPathFromPathData(pathData)
  27.     // 应用 Matrix
  28.     if (pathStart != null) {
  29.         // 计算缩放比例
  30.         val scaleWidth: Float = width / 1024.0f
  31.         val scaleHeight: Float = height / 1024.0f
  32.         // 创建 Matrix 处理 path 缩放
  33.         val matrix = Matrix()
  34.         matrix.postScale(scaleWidth, scaleHeight)
  35.         pathStart.transform(matrix)
  36.     }
  37.     val size = min(width, height) / 4f
  38.     val path = Path()
  39.     val rectF = RectF(size / 2,  size / 2, width - size / 2, height - size / 2)
  40.     val rectF1 = RectF(size,  size, width - size, height - size)
  41.     path.fillType = dir
  42.     path.addRect(rectF, Path.Direction.CCW)
  43.     path.addPath(pathStart)
  44.     canvas.drawPath(path, paint)
  45. }
  46. // 大小正方形
  47. override fun onDraw(canvas: Canvas) {
  48.     val size = min(width, height) / 4f
  49.     val path = Path()
  50.     val rectF = RectF(size / 2,  size / 2, width - size / 2, height - size / 2)
  51.     val rectF1 = RectF(size,  size, width - size, height - size)
  52.     path.fillType = dir
  53.     path.addRect(rectF1, Path.Direction.CCW)
  54.     path.addRect(rectF, Path.Direction.CW)
  55.     canvas.drawPath(path, paint)
  56. }

Path.Op - path.op(xxx, Path.Op.XXX)

注: Path.Op 添加于 Android4.4 - API 19
与 Region.Op 类似, 只是少了一个 REPLACE, Region.Op
image.png

  1. class TempTextView constructor(context: Context, attrs: AttributeSet? = null) : TextView(context, attrs) {
  3.     val paint = Paint().apply {
  4.         isAntiAlias = true
  5.         color = Color.parseColor("#FF2C98F0")
  6.         style = Paint.Style.FILL
  7.     }
  9.     val pathRect1: Path by lazy {
  10.         Path().apply {
  11.             addRect(0f, 0f, width * 0.6f, height * 0.6f, Path.Direction.CW)
  12.         }
  13.     }
  15.     val pathRect2: Path by lazy {
  16.         Path().apply {
  17.             addRect(width * 0.4f, height * 0.4f, width.toFloat(), height.toFloat(), Path.Direction.CW)
  18.         }
  19.     }
  21.     var type = 0
  23.     private val op: Path.Op by lazy {
  24.         val p = when (type) {
  25.             0 -> {
  26.                 Path.Op.DIFFERENCE
  27.             }
  28.             1 -> {
  29.                 Path.Op.INTERSECT
  30.             }
  31.             2 -> {
  32.                 Path.Op.UNION
  33.             }
  34.             3 -> {
  35.                 Path.Op.XOR
  36.             }
  37.             else -> {
  38.                 Path.Op.REVERSE_DIFFERENCE
  39.             }
  40.         }
  41.         text = p.name
  42.         p
  43.     }
  45.     init {
  46.         attrs?.let {
  47.             val types = context.obtainStyledAttributes(it, R.styleable.TempTextView)
  48.             type = types.getInt(R.styleable.TempTextView_op_type, type)
  49.             types.recycle()
  50.         }
  51.         setLayerType(LAYER_TYPE_SOFTWARE, null)
  52.     }
  54.     override fun onDraw(canvas: Canvas) {
  55.         val path = Path()
  56.         path.op(pathRect1, pathRect2, op)
  57.         canvas.drawPath(path, paint)
  58.         super.onDraw(canvas)
  59.     }
  61. }
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <declare-styleable name="TempTextView">
  4.         <attr name="op_type" format="enum">
  5.             <enum name="DIFFERENCE" value="0"/>
  6.             <enum name="INTERSECT" value="1"/>
  7.             <enum name="UNION" value="2"/>
  8.             <enum name="XOR" value="3"/>
  9.             <enum name="REVERSE_DIFFERENCE" value="4"/>
  10.             <enum name="REPLACE" value="5"/>
  11.         </attr>
  12.     </declare-styleable>
  13. </resources>
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="@color/white"
  7.     android:orientation="vertical">
  9.     <com.ypw.code.view.FlowLayout
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content">
  13.         <com.ypw.code.view.TempTextView
  14.             android:layout_width="@dimen/sw_160"
  15.             android:layout_height="@dimen/sw_160"
  16.             android:textSize="@dimen/sw_16"
  17.             android:gravity="center"
  18.             android:layout_margin="@dimen/sw_5"
  19.             android:background="#80eeeeee"
  20.             app:op_type="DIFFERENCE"/>
  22.         <com.ypw.code.view.TempTextView
  23.             android:layout_width="@dimen/sw_160"
  24.             android:layout_height="@dimen/sw_160"
  25.             android:textSize="@dimen/sw_16"
  26.             android:gravity="center"
  27.             android:layout_margin="@dimen/sw_5"
  28.             android:background="#80eeeeee"
  29.             app:op_type="INTERSECT"/>
  31.         <com.ypw.code.view.TempTextView
  32.             android:layout_width="@dimen/sw_160"
  33.             android:layout_height="@dimen/sw_160"
  34.             android:textSize="@dimen/sw_16"
  35.             android:gravity="center"
  36.             android:layout_margin="@dimen/sw_5"
  37.             android:background="#80eeeeee"
  38.             app:op_type="UNION"/>
  40.         <com.ypw.code.view.TempTextView
  41.             android:layout_width="@dimen/sw_160"
  42.             android:layout_height="@dimen/sw_160"
  43.             android:textSize="@dimen/sw_16"
  44.             android:layout_margin="@dimen/sw_5"
  45.             android:background="#80eeeeee"
  46.             android:gravity="center"
  47.             app:op_type="XOR"/>
  49.         <com.ypw.code.view.TempTextView
  50.             android:layout_width="@dimen/sw_160"
  51.             android:layout_height="@dimen/sw_160"
  52.             android:textSize="@dimen/sw_16"
  53.             android:layout_margin="@dimen/sw_5"
  54.             android:background="#80eeeeee"
  55.             android:gravity="center"
  56.             app:op_type="REVERSE_DIFFERENCE"/>
  58.     </com.ypw.code.view.FlowLayout>
  60. </androidx.core.widget.NestedScrollView>