Android-高级-UI-进阶之路(四)-Paint-渲染-滤镜-xfermode-使用

/**
*

• 环形渲染
• centerX ,centerY：shader的中心坐标，开始渐变的坐标
• radius:渐变的半径
• centerColor,edgeColor:中心点渐变颜色，边界的渐变颜色
• colors:渐变颜色数组
• stops:渐变位置数组，类似扫描渐变的positions数组，取值[0,1],中心点为0，半径到达位置为1.0f
• tileMode:shader未覆盖以外的填充模式
  */
  val mRadialGradient = RadialGradient(
  width/2f,height/2f,width/3.toFloat(),
  mColors, null, Shader.TileMode.REPEAT
  )
  mPaint!!.setShader(mRadialGradient)
  canvas.drawCircle(width/2f,height/2f,width/3.toFloat(), mPaint!!)
  复制代码

5. 扫描渲染 SweepGradient

/**

• 扫描渲染
• cx,cy 渐变中心坐标
• color0,color1：渐变开始结束颜色
• colors，positions：类似LinearGradient,用于多颜色渐变,positions为null时，根据颜色线性渐变
  */
  val mSweepGradient = SweepGradient(width/2f,height/2f, mColors, null)
  mPaint!!.setShader(mSweepGradient)
  canvas.drawCircle(width/2f,height/2f,width/3.toFloat(), mPaint!!)
  复制代码

6. 组合渲染 ComposeShader

/**

• 组合渲染，
• ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, Xfermode mode)
• ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, PorterDuff.Mode mode)
• shaderA,shaderB:要混合的两种shader
• Xfermode mode： 组合两种shader颜色的模式
• PorterDuff.Mode mode: 组合两种shader颜色的模式
  */
  val bitMapShader = BitmapShader(
  mBitMap!!, Shader.TileMode.REPEAT,
  Shader.TileMode.REPEAT
  )
  val linearGradient = LinearGradient(
  0f, 0f, 800f, 800f,
  mColors, null, Shader.TileMode.CLAMP
  )
  val mComposeShader = ComposeShader(linearGradient, bitMapShader, PorterDuff.Mode.SRC_OVER)
  mPaint!!.setShader(mComposeShader)
  canvas.drawRect(0f, 0f, 800f, 1000f, mPaint!!)

7. 绘制心型 ComposeShader

//创建BitmapShader，用以绘制心
val mBitmap = (resources.getDrawable(R.mipmap.heart) as BitmapDrawable).bitmap
val bitmapShader = BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
//创建LinearGradient，用以产生从左上角到右下角的颜色渐变效果
val linearGradient = LinearGradient(
0f, 0f, mWidth.toFloat(), mHeight.toFloat(),
Color.BLUE, Color.RED, Shader.TileMode.CLAMP
)
//bitmapShader对应目标像素，linearGradient对应源像素，像素颜色混合采用MULTIPLY模式
val composeShader = ComposeShader(linearGradient, bitmapShader, PorterDuff.Mode.MULTIPLY)
// ComposeShader composeShader2 = new ComposeShader(composeShader, linearGradient, PorterDuff.Mode.MULTIPLY);
//将组合的composeShader作为画笔paint绘图所使用的shader
mPaint!!.setShader(composeShader)
//用composeShader绘制矩形区域
canvas.drawRect(0f, 0f, mBitmap.width.toFloat(), mBitmap.height.toFloat(), mPaint!!)
//所谓渲染就是对于我们绘制区域进行按照上诉渲染规则进行色彩的填充

9. 线性渲染-字体渐变 LinearGradient

[外链图片转存中…(img-a7MpfEsS-1714196424978)]

class LinearGradientTextView : TextView {

/**

• 定义线性渐变
  */
  private var mLinearGradient: LinearGradient? = null

/**

• 定义一个矩阵
  */
  private var mGradientatrix: Matrix? = null

/**

• 定义一个画笔
  */
  private var mPaint: Paint? = null

private var mViewWidth = 0
private var mTranslate = 0

private var delta = 15

constructor(context: Context?) : super(context)
constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

/**

• 当字改变的时候回调
  /
  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
  super.onSizeChanged(w, h, oldw, oldh)
  if (mViewWidth ==0){
  //拿到当前 text 宽度
  mViewWidth = measuredWidth
  if (mViewWidth > 0){
  //拿到当前画笔
  mPaint = paint
  //拿到 text
  var text = text.toString()
  //mViewWidth除字体总数就得到了每个字的像素 然后3 表示3个文字的像素
  var size = 0;
  //如果当前 text 长度大于 0
  if (text.length > 0){
  //拿到当前 3 个文字的像素
  size = mViewWidth / text.length * 3

}else{//说明没有文字
size = mViewWidth
}
/**线性渲染

• x0, y0, 起始点
• x1, y1, 结束点
• int[] mColors, 中间依次要出现的几个颜色
• float[] positions 位置数组，position的取值范围[0,1]，作用是指定几个颜色分别放置在那个位置上，
• 如果传null，渐变就线性变化。
• tile 用于指定控件区域大于指定的渐变区域时，空白区域的颜色填充方法
  */
  //从左边 size 开始，左边看不见的地方开始，以滚动扫描的形式过来
  mLinearGradient = LinearGradient(-size.toFloat(),0f,0f,0f, intArrayOf(0x33ffffff, -0x1, 0x33ffffff),
  floatArrayOf(0f, 0.2f, 1f), Shader.TileMode.CLAMP)
  //将线性渐变添加到 paint 中
  mPaint!!.setShader(mLinearGradient)
  //定义一个矩阵
  mGradientatrix = Matrix()