Compose中Canvas相关总结

作者: 风月寒 | 来源:发表于2021-11-17 20:57 被阅读0次

drawLine

fun drawLine(
        color: Color,
        start: Offset,
        end: Offset,
        strokeWidth: Float = Stroke.HairlineWidth,
        cap: StrokeCap = Stroke.DefaultCap,
        pathEffect: PathEffect? = null,
        /*FloatRange(from = 0.0, to = 1.0)*/
        alpha: Float = 1.0f,
        colorFilter: ColorFilter? = null,
        blendMode: BlendMode = DefaultBlendMode
    )

/**
 * brush 是刷子，就填充线的颜色的刷子，主要是处理渐变的 主要有linearGradient，horizontalGradient，verticalGradient，radialGradient，sweepGradient
 * color 是线的颜色
 * start 是线的起始点位置
 * end 是线的终点位置
 * strokeWidth 线的宽度
 * cap 线段末端的形状。 三种取值：StrokeCap.Butt平的效果（以平边开始和结束轮廓，没有延伸。）StrokeCap.Round 圆形效果（以半圆延伸开始和结束轮廓）StrokeCap.Square 平的效果（以半正方形延伸开始和结束轮廓）
 * pathEffect 设置显示效果（比如虚线）
 *    PathEffect.cornerPathEffect(radius: Float) 将线段之间的锐角替换为指定半径的圆角 radius是半径
 *    PathEffect.dashPathEffect(intervals: FloatArray, phase: Float = 0f) 将形状绘制为具有给定间隔的一系列破折号。比如虚线  例如interval={20，5}，第一个参数表示虚线的长度是20，5是虚线之间的间隔是5.  phase 偏移
 *    PathEffect.chainPathEffect(outer: PathEffect, inner: PathEffect) 创建一个PathEffect，将内部效果应用于路径，然后应用外部效果
 *    PathEffect.stampedPathEffect(shape: Path, advance: Float, phase: Float,style: StampedPathEffectStyle) 用path表示的指定形状冲压绘制的路径.  shape要踩踏的路径,advance 每个冲压形状之间的前进间距, phase 在压印第一个形状之前要偏移的相位量, style如何在每个位置转换形状，因为它是冲压. style有三种取值 StampedPathEffectStyle.Translate 平移 ，StampedPathEffectStyle.Rotate 旋转，StampedPathEffectStyle.Morph 变形
 * alpha 透明度
 * colorFilter 用于修改在其安装的[Paint]上绘制的每个像素的颜色的效果
 * blendMode 混合模式
 */

drawRect

fun drawRect(
        brush: Brush,
        color: Color,
        topLeft: Offset = Offset.Zero,
        size: Size = this.size.offsetSize(topLeft),
        /*@FloatRange(from = 0.0, to = 1.0)*/
        alpha: Float = 1.0f,
        style: DrawStyle = Fill,
        colorFilter: ColorFilter? = null,
        blendMode: BlendMode = DefaultBlendMode
    )

/**
 * brush 刷子
 * color 颜色
    topLeft 左上角点的坐标
    size 大小，比如Size(w,h) w是宽度，h是高度
    cornerRadius 是具体的圆角
    alpha 透明度
    style DrawStyle 可以是Fill填充，也可以是Stroke，线条
    colorFilter 用于修改在其安装的[Paint]上绘制的每个像素的颜色的效果。
    blendMode 混合模式
 */

drawImage

fun drawImage(
        image: ImageBitmap,
        topLeft: Offset = Offset.Zero,
        /*@FloatRange(from = 0.0, to = 1.0)*/
        alpha: Float = 1.0f,
        style: DrawStyle = Fill,
        colorFilter: ColorFilter? = null,
        blendMode: BlendMode = DefaultBlendMode
    )

/**
 * image 图片
    topLeft 左上角
    alpha 透明度
    style 绘制类型是Fill还是Stoke
    colorFilter 用于修改在其安装的[Paint]上绘制的每个像素的颜色的效果。
    blendMode 混合模式后面讲
    srcOffset IntOffset类型原图像的偏移
    srcSize IntSize类型 原图像的大小
    dstOffset IntOffset 类型目标图像的左上角的位置
    dstSize IntSize大小 目标图像的大小
 */

drawCircle

fun drawCircle(
        color: Color,
        radius: Float = size.minDimension / 2.0f,
        center: Offset = this.center,
        /*@FloatRange(from = 0.0, to = 1.0)*/
        alpha: Float = 1.0f,
        style: DrawStyle = Fill,
        colorFilter: ColorFilter? = null,
        blendMode: BlendMode = DefaultBlendMode
    )

/*
brush 刷子
color 颜色
radius 半径
center 圆形
alpha 透明度
style 填充方式 Fill跟Stroke
colorFilter 用于修改在其安装的[Paint]上绘制的每个像素的颜色的效果。
blendMode 混合模式
*/

drawOval

fun drawOval(
        color: Color,
        topLeft: Offset = Offset.Zero,
        size: Size = this.size.offsetSize(topLeft),
        /*@FloatRange(from = 0.0, to = 1.0)*/
        alpha: Float = 1.0f,
        style: DrawStyle = Fill,
        colorFilter: ColorFilter? = null,
        blendMode: BlendMode = DefaultBlendMode
    )
    
/*brush 刷子跟上面一致
color 颜色
topLeft 左上角的坐标
size 大小
alpha 透明度
style 填充类型
colorFilter 用于修改在其安装的[Paint]上绘制的每个像素的颜色的效果。
blendMode 混合模式*/

drawArc

fun drawArc(
        color: Color,
        startAngle: Float,
        sweepAngle: Float,
        useCenter: Boolean,
        topLeft: Offset = Offset.Zero,
        size: Size = this.size.offsetSize(topLeft),
        /*@FloatRange(from = 0.0, to = 1.0)*/
        alpha: Float = 1.0f,
        style: DrawStyle = Fill,
        colorFilter: ColorFilter? = null,
        blendMode: BlendMode = DefaultBlendMode
    )
    
/*brush 刷子
color 颜色
startAngle 开始的角度
sweepAngle 划过的角度
useCenter 是否连接圆心
topLeft 左上角的位置
size 大小
alpha 透明度
style 填充模式
colorFilter 用于修改在其安装的[Paint]上绘制的每个像素的颜色的效果。Image讲解里有讲到
blendMode 混合模式*/

drawPath

fun drawPath(
        path: Path,
        color: Color,
        /*@FloatRange(from = 0.0, to = 1.0)*/
        alpha: Float = 1.0f,
        style: DrawStyle = Fill,
        colorFilter: ColorFilter? = null,
        blendMode: BlendMode = DefaultBlendMode
    )
    
/*path 路径
brush 刷子
color 颜色
alpha 透明度
style 填充类型
colorFilter 用于修改在其安装的[Paint]上绘制的每个像素的颜色的效果。Image讲解里有讲到
blendMode 混合模式*/

drawPoints

fun drawPoints(
        points: List<Offset>,
        pointMode: PointMode,
        color: Color,
        strokeWidth: Float = Stroke.HairlineWidth,
        cap: StrokeCap = StrokeCap.Butt,
        pathEffect: PathEffect? = null,
        /*@FloatRange(from = 0.0, to = 1.0)*/
        alpha: Float = 1.0f,
        colorFilter: ColorFilter? = null,
        blendMode: BlendMode = DefaultBlendMode
    )
    
/*
points 点的集合
pointMode 用于指示如何绘制点。有三种取值PointMode.Points 分别画点，PointMode.Lines 画线(点集合两两组合划线，奇数的话最后一个不管)，PointMode.Polygon 画多边形
color 颜色
brush 刷子 设置渐变
strokeWidth 宽度
pathEffect 跟上面drawLine的一致
alpha 透明度
colorFilter 用于修改在其安装的[Paint]上绘制的每个像素的颜色的效果。
blendMode 混合模式
*/

inset

inline fun DrawScope.inset(
    left: Float,
    top: Float,
    right: Float,
    bottom: Float,
    block: DrawScope.() -> Unit
) {
    drawContext.transform.inset(left, top, right, bottom)
    block()
    drawContext.transform.inset(-left, -top, -right, -bottom)
}

/*left左边平移多少
top 顶部平移多少
right 右边平移多少
bottom 底部平移多少
horizontal 横向平移多少
vertical 竖向平移多少*/

translate

inline fun DrawScope.translate(
    left: Float = 0.0f,
    top: Float = 0.0f,
    block: DrawScope.() -> Unit
) {
    drawContext.transform.translate(left, top)
    block()
    drawContext.transform.translate(-left, -top)
}

/**
 * left 左边平移多少
    top顶部平移多少
 */

rotate

inline fun DrawScope.rotate(
    degrees: Float,
    pivot: Offset = center,
    block: DrawScope.() -> Unit
) = withTransform({ rotate(degrees, pivot) }, block)

/**
 * degrees 顺时针旋转的角度
pivot 旋转的中心点 （默认是图形的中心）
radians 顺时针旋转的弧度
pivot 旋转的中心点（默认是图形的中心）
 */

scale

inline fun DrawScope.scale(
    scale: Float,
    pivot: Offset = center,
    block: DrawScope.() -> Unit
) = withTransform({ scale(scale, scale, pivot) }, block)

/*scale 缩放的大小
pivot 缩放的中心点
scaleX X轴缩放多少
scaleY Y轴缩放所少
pivot 缩放的中心点*/

clipRect

inline fun DrawScope.clipRect(
    left: Float = 0.0f,
    top: Float = 0.0f,
    right: Float = size.width,
    bottom: Float = size.height,
    clipOp: ClipOp = ClipOp.Intersect,
    block: DrawScope.() -> Unit
) = withTransform({ clipRect(left, top, right, bottom, clipOp) }, block)

/*left 左边的坐标
top 顶部的坐标
right 右边的坐标
bottom 底部的坐标
clipOp 裁剪的类型ClipOp ClipOp.Intersect是裁剪出来的矩形。ClipOp.Difference从当前剪辑中减去提供的矩形*/

clipPath

inline fun DrawScope.clipPath(
    path: Path,
    clipOp: ClipOp = ClipOp.Intersect,
    block: DrawScope.() -> Unit
) = withTransform({ clipPath(path, clipOp) }, block)

/*path 是路径
clipOp 裁剪的类型ClipOp ClipOp.Intersect是裁剪出来的矩形。ClipOp.Difference从当前剪辑中减去*/

withTransform 组合

inline fun DrawScope.withTransform(
    transformBlock: DrawTransform.() -> Unit,
    drawBlock: DrawScope.() -> Unit
) = with(drawContext) {
    // Transformation can include inset calls which change the drawing area
    // so cache the previous size before the transformation is done
    // and reset it afterwards
    val previousSize = size
    canvas.save()
    transformBlock(transform)
    drawBlock()
    canvas.restore()
    size = previousSize
}

Canvas(modifier = Modifier.fillMaxSize()){
        val canvasSize = size
        val canvasWidth = size.width
        val canvasHeight = size.height

        withTransform({
            translate(left = canvasWidth/5F)
            rotate(degrees=45F)
        }) {
            drawRect(
                color = Color.Gray,
                topLeft = Offset(x = canvasWidth / 3F, y = canvasHeight / 3F),
                size = canvasSize / 3F
            )
        }
    }

BlendMode 混合模式

混合是有个原图像src,一个dst目标图像，这两个图的相交区域的各种组合情况。

Clear 清除（删除源图像和目标图像，不留下任何内容）
Src 删除目标图像，只绘制源图像
Dst 删除源图像，只绘制目标图像
SrcOver 源图和目标图合成，源图在上
DstOver 目标图和源图合成，目标图在上
SrcIn 显示源图和目标图相交的部分，并且只显示源图像
DstIn 显示目标图和源图相交的部分，并且只显示目标图
SrcOut 显示源图像和目标图不相交的部分，并且只显示源图
DstOut 显示目标图和源图像不相交的部分，并且只显示目标图
SrcAtop 显示目标图，并且在相交的地方显示源图
DstAtop 显示源图，并在相交的地方显示目标图
Xor 显示源图和目标图，但相交的位置不显示（代码注释：对源图像和目标图像应用按位异或运算符。这就使得它们重叠的地方保持透明。）
Plus 对源映像和目标映像的组件求和。其中一个图像的像素中的透明度降低了该图像对相应输出像素的贡献，就好像该图像中该像素的颜色较暗一样
Modulate 将源图像和目标图像的颜色分量相乘。这只能产生相同或较深的颜色（乘以白色，1.0，结果不变；乘以黑色（0.0，结果为黑色）。合成两个不透明图像时，这与在投影仪上重叠两个透明胶片的效果类似。对于同样乘以alpha通道的变量，请考虑乘以。
Screen 将源图像和目标图像的分量的逆相乘，然后求逆结果。反转组件意味着完全饱和的通道（不透明白色）被视为值0.0，而通常被视为0.0（黑色，透明）的值被视为1.0。这基本上与调制混合模式相同，但是在乘法之前颜色值反转，结果在渲染之前反转回来。这只能产生相同或较浅的颜色（乘以黑色，1.0，结果不变；乘以白色（0.0，结果为白色）。类似地，在alpha通道中，它只能产生更不透明的颜色。这与两台投影仪同时在同一屏幕上显示图像的效果相似。
Overlay 将源图像和目标图像的分量相乘，然后调整它们以支持目标。具体来说，如果目标值较小，则将其与源值相乘，而如果源值较小，则将源值的倒数与目标值的倒数相乘，然后反转结果。反转组件意味着完全饱和的通道（不透明白色）被视为值0.0，而通常被视为0.0（黑色，透明）的值被视为1.0。
Darken 通过从每个颜色通道中选择最低值来合成源图像和目标图像。输出图像的不透明度的计算方法与SrcOver相同。
Lighten 通过从每个颜色通道中选择最高值来合成源图像和目标图像。输出图像的不透明度的计算方法与SrcOver相同。
ColorDodge 将目标除以源的倒数。反转组件意味着完全饱和的通道（不透明白色）被视为值0.0，而通常被视为0.0（黑色，透明）的值被视为1.0。注意这个BlendMode只能在androidapi级别29及以上使用
ColorBurn :将目标的倒数除以源的倒数，然后求结果的倒数。反转组件意味着完全饱和的通道（不透明白色）被视为值0.0，而通常被视为0.0（黑色，透明）的值被视为1.0。注意这个BlendMode只能在androidapi级别29及以上使用
Hardlight : 将源图像和目标图像的分量相乘，然后调整它们以有利于源图像。具体来说，如果源值较小，则将其与目标值相乘，而如果目标值较小，则将目标值的倒数与源值的倒数相乘，然后反转结果。反转组件意味着完全饱和的通道（不透明白色）被视为值0.0，而通常被视为0.0（黑色，透明）的值被视为1.0。注意这个BlendMode只能在androidapi级别29及以上使用
Softlight: 对于低于0.5的源值，使用ColorDodge；对于高于0.5的源值，使用ColorBurn。这会产生类似的效果，但比叠加效果更柔和。注意这个BlendMode只能在androidapi级别29及以上使用
Difference: 从每个通道的较大值中减去较小的值。合成黑没有效果；合成白色将反转其他图像的颜色。输出图像的不透明度的计算方法与SrcOver相同。注意这个BlendMode只能在androidapi级别29及以上使用这种影响类似于排斥，但更为严厉。
Exclusion: 从两个图像的总和中减去两个图像乘积的两倍。合成黑没有效果；合成白色将反转其他图像的颜色。输出图像的不透明度的计算方法与SrcOver相同。注意这个BlendMode只能在androidapi级别29及以上使用效果类似于差异，但更柔和。
Multiply: 将源图像和目标图像的分量相乘，包括alpha通道。这只能产生相同或较深的颜色（乘以白色，1.0，结果不变；乘以黑色（0.0，结果为黑色）。由于alpha通道也会相乘，因此一个图像中的完全透明像素（不透明度0.0）会导致输出中的完全透明像素。这与DstIn类似，但颜色组合在一起。
Hue: 获取源图像的色调，以及目标图像的饱和度和亮度。其效果是用源图像着色目标图像。输出图像的不透明度的计算方法与SrcOver相同。在源图像中完全透明的区域从目标图像获取其色调。注意这个BlendMode只能在androidapi级别29及以上使用
Saturation: 获取源图像的饱和度，以及目标图像的色调和亮度。输出图像的不透明度的计算方法与SrcOver相同。在源图像中完全透明的区域从目标图像获取其饱和度。注意这个BlendMode只能在androidapi级别29及以上使用
Color :获取源图像的色调和饱和度，以及目标图像的亮度。其效果是用源图像着色目标图像。输出图像的不透明度的计算方法与SrcOver相同。源图像中完全透明的区域从目标处获取其色调和饱和度。注意这个BlendMode只能在androidapi级别29及以上使用
Luminosity :获取源图像的亮度，以及目标图像的色调和饱和度。输出图像的不透明度的计算方法与SrcOver相同。在源图像中完全透明的区域从目标图像获取其亮度。注意这个BlendMode只能在androidapi级别29及以上使用