Jetpack?Compose?Canvas繪制超詳細(xì)介紹

更新時間：2022年10月28日 09:14:07 作者：唯鹿

Canvas?是允許您在屏幕上指定區(qū)域并在此區(qū)域上執(zhí)行繪制的組件。您必須使用修飾符指定尺寸，無論是通過Modifier.size修飾符指定確切尺寸，還是通過Modifier.fillMaxSize，ColumnScope.weight等相對于父級指定精確尺寸。如果父級包裝了此子級，則僅必須指定確切尺寸

1. Canvas

@Composable
fun Canvas(
	modifier: Modifier,
	onDraw: DrawScope.() -> Unit
) = Spacer(modifier.drawBehind(onDraw))

modifier：這里主要作用是指定畫布的大小。
onDraw就是執(zhí)行具體的繪制?？梢钥吹剿峁┝艘粋€繪圖環(huán)境的作用域 DrawScope，這里提供有我們經(jīng)常使用的繪圖api和屬性，比如drawLine、size等。

先來一個簡單的例子看看如何使用：

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasWidth = size.width
    val canvasHeight = size.height
    drawLine(
        start = Offset(x = canvasWidth, y = 0f),
        end = Offset(x = 0f, y = canvasHeight),
        color = Color.Blue
    )
}

畫一條線，開始和結(jié)束位置分別是畫布的右上角和左下角。效果如下：

2. 繪制方法

1. drawLine

drawLine在上面的例子中簡單說明了，當(dāng)然它不止這些功能。

	fun drawLine(
        color: Color, //或 brush: Brush,
        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
    )

指定線的顏色用color
漸變色可以使用brush，本系列第三篇有說明。
strokeWidth 是線的寬度，默認(rèn)是1px。
cap是線頭的形狀，默認(rèn)是StrokeCap.Butt平頭。還有StrokeCap.Round圓頭，StrokeCap.Square方頭。這部分和Android中的Paint是一樣的。平頭和方頭的不同在于是否延伸出來的部分。

pathEffect是線段的效果，比如虛線這種就是使用PathEffect.dashPathEffect(intervals: FloatArray, phase: Float = 0f) ，舉一個例子：

PathEffect.dashPathEffect(floatArrayOf(20f, 10f), 10f)

intervals中的20f表示虛線的寬度，10f是間隔寬度。phase的10f表示初始的偏移距離。所以一開始偏移10f，就會導(dǎo)致第一段的線段被"裁剪"10f，具體效果如下圖：

alpha 是線段的透明度。
colorFilter是顏色過濾器，本系列第四篇有說明，這里就不重復(fù)介紹了。
blendMode：混合模式。這個不在本篇的范圍內(nèi)，后面有機(jī)會我會詳細(xì)說一下。有興趣可以先看看文末的參考文章。

2. drawRect

繪制矩形方法，屬性與drawLine大同小異，下面說一些不同點。

	fun drawRect(
        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
    )

topLeft是用來指定左上角的偏移量，如果沒有指定那么默認(rèn)從當(dāng)前畫布左上角開始。
size用來指定矩形大小，如果沒有指定那么默認(rèn)就是當(dāng)前畫布的大小。
style是指實心還是空心。默認(rèn)Fill實心，Stroke空心。

3. drawRoundRect

繪制圓角矩形基本與矩形一致，只是多了一個設(shè)置圓角大小的參數(shù)drawRoundRect，這里就不多說明了。

4. drawImage

繪制圖片方法

	fun drawImage(
        image: ImageBitmap,
        srcOffset: IntOffset = IntOffset.Zero,
        srcSize: IntSize = IntSize(image.width, image.height),
        dstOffset: IntOffset = IntOffset.Zero,
        dstSize: IntSize = srcSize,
        /*@FloatRange(from = 0.0, to = 1.0)*/
        alpha: Float = 1.0f,
        style: DrawStyle = Fill,
        colorFilter: ColorFilter? = null,
        blendMode: BlendMode = DefaultBlendMode
    )

image：需要繪制的圖片，具體可以使用ImageBitmap.imageResource(id = R.drawable.xxx)方法獲取。
srcOffset：需要繪制圖片的左上角偏移量，默認(rèn)為圖像的原點。
srcSize：圖片相對于srcOffset的尺寸，默認(rèn)為圖像的寬高。
dstOffset：繪制圖片的相對左上角的偏移量，這默認(rèn)為圖像的原點。
dstSize：繪制圖片的大小，默認(rèn)為srcSize。

下面的代碼是繪制一張圖片的右下角區(qū)域，相對畫布偏移50 * 50，繪制的大小是200 * 200。

 	val imageBitmap = ImageBitmap.imageResource(id = R.mipmap.ic_launcher)
    Canvas(modifier = Modifier.fillMaxSize()) {
        drawImage(
            image = imageBitmap,
            srcOffset = IntOffset(imageBitmap.width / 2,imageBitmap.height / 2),
            srcSize = IntSize(imageBitmap.width, imageBitmap.height),
            dstOffset = IntOffset(50,50),
            dstSize = IntSize(200,200)
        )
    }

效果如下：

5. 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
    )

radius：圓的半徑大小。
center：圓心位置。

6. drawArc

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
    )

startAngle：開始角度
sweepAngle：弧線掃過的角度
useCenter：弧線是否過圓心

這里就不舉例說明了，可以用style、useCenter屬性自行組合嘗試。

7. 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
    )

其實和Android中的path使用一樣，圍繞著moveTo、lineTo、close這些方法，也就不詳細(xì)說明了。

8. 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 每兩個點畫成一條線段。如果點數(shù)是奇數(shù)，則忽略最后一個點。PointMode.Polygon 連接所有的點。

最后還有一個繪制橢圓方法drawOval，用法大同小異，就不說明了。

3. DrawScope拓展方法

1. inset

同時從左到上轉(zhuǎn)換DrawScope坐標(biāo)空間，并修改當(dāng)前繪制區(qū)域的尺寸。

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

inset有點像是在原有的畫布上，嵌入了一個"新"的畫布，設(shè)置的left，top就是相應(yīng)的padding。

	Canvas(modifier = Modifier.fillMaxSize()){
        drawRect(
            color = Color.Blue,
        )
        inset(100f, 100f, 100f, 100f) {
            drawRect(
                color = Color.Red,
            )
        }
    }

2. translate

平移繪制區(qū)域

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

只需要設(shè)置left、top方向移動的距離即可。

3. rotate與rotateRad

旋轉(zhuǎn)繪制區(qū)域

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

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

degrees是旋轉(zhuǎn)了多少角度。
radians是旋轉(zhuǎn)了多少弧度。
pivot 是旋轉(zhuǎn)的中心點，默認(rèn)是中心。

4. scale

縮放繪制區(qū)域。

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

指定x、y方向上的縮放倍數(shù)即可。

5. clipRect

裁剪給定的矩形區(qū)域

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
) {...}

clipOp：ClipOp.Intersect是裁剪矩形的里面，ClipOp.Difference是裁剪矩形的外面。

看個簡單的例子，便于你的理解：

	Canvas(modifier = Modifier.fillMaxSize()){
        drawRect(
            color = Color.Blue,
        )
        clipRect(200f, 200f, clipOp = ClipOp.Intersect) {
            drawRect(
                color = Color.Yellow,
            )
        }
    }

左邊是ClipOp.Intersect，右邊是ClipOp.Difference

clipPath同理。

6. drawIntoCanvas

可以直接調(diào)用底層Canvas繪制的方法。我們用它實現(xiàn)一開始的drawLine例子，畫一條對角線：

	Canvas(modifier = Modifier.fillMaxSize()) {
        val canvasWidth = size.width
        val canvasHeight = size.height
        drawIntoCanvas {
            val paint = Paint()
            paint.color = Color.Blue
            paint.strokeWidth = 1f
            it.drawLine(
                p1 = Offset(canvasWidth,0f),
                p2 = Offset(0f,canvasHeight),
                paint = paint
            )
        }
    }

其中drawLine方法，并不是一開始DrawScope中的drawLine:

actual typealias NativeCanvas = android.graphics.Canvas
private val EmptyCanvas = android.graphics.Canvas()
@PublishedApi internal class AndroidCanvas() : Canvas {
    @PublishedApi internal var internalCanvas: NativeCanvas = EmptyCanvas
	override fun drawLine(p1: Offset, p2: Offset, paint: Paint) {
        internalCanvas.drawLine(
            p1.x,
            p1.y,
            p2.x,
            p2.y,
            paint.asFrameworkPaint()
        )
    }
}

可以看到最終調(diào)用了Android的Canvas api。

7. withTransform

執(zhí)行1個或多個轉(zhuǎn)換。也就是上面平移旋轉(zhuǎn)這些可以一塊執(zhí)行。

inline fun DrawScope.withTransform(
    transformBlock: DrawTransform.() -> Unit,
    drawBlock: DrawScope.() -> Unit
) {...}

4.參考

Compose 中的圖形

Jetpack Compose 繪制 Canvas

到此這篇關(guān)于Jetpack Compose Canvas繪制超詳細(xì)介紹的文章就介紹到這了,更多相關(guān)Jetpack Compose Canvas內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片