上一篇文章 Compose Canvas基礎（1） drawxxx方法

前言

閱讀本文需要一定compose基礎，如果沒有請移步Jetpack Compose入門詳解（實時更新）

本文介紹Compose Canvas基礎，介紹Canvas可組合項繪制的圖形的轉(zhuǎn)換相關(guān)api。

---

平移 translate

下例的代碼都在Canvas可組合項的drawscope中

代碼示例如下：

            drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = false)translate(left = 100f,top = 100f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = false)}

效果如下：

需要講解的是translate()方法，它有三個參數(shù)

• left-在x軸上平移坐標空間的像素
• top-在y軸上平移坐標空間的像素
• block-lambda，用于將圖形包裹起來的lambda

上例代碼表示將圖形向右移動100像素，向下移動100像素.

---

縮放 scale

代碼示例如下：

 		translate(left = 100f,top = 100f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = false)}scale(scaleX = 2f,scaleY = 1f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = false)}

效果如下：

需要講解的是scale()方法，它有四個參數(shù)

• scaleX-要在X中縮放的量
• scaleY-要在Y中縮放的量
• pivot-軸心點的坐標，默認為坐標空間的中心
• block-lambda，用于將圖形包裹起來的lambda

上例代碼表示將圖形以中心為軸心以x縮放2倍，y不變.

---

旋轉(zhuǎn) rotate

代碼示例如下：

 		drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)rotate(degrees = 45f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)}

效果如下：

需要講解的是rotate()方法，它有四個參數(shù)

• degrees-順時針旋轉(zhuǎn)
• pivot-軸心點的坐標，默認為坐標空間的中心
• block-lambda，用于將圖形包裹起來的lambda

上例代碼表示將圖形以中心為軸心順時針旋轉(zhuǎn)45度.

---

自定義繪圖區(qū)域及繪制內(nèi)邊距inset

代碼示例如下：

 drawArc(color = Color(0xFFF44336),size = size,startAngle = 0f,sweepAngle = 90f,useCenter = true)val cqs = size/2finset(horizontal = 50f, vertical = 30f){drawArc(color = Color(0xFFF44336),size = cqs,startAngle = 0f,sweepAngle = 90f,useCenter = true)}

效果如下：

需要講解的是inset()方法，它有四個參數(shù)

• horizontal-插入左右邊界的像素數(shù)。默認為零
• vertical-插入上邊界和下邊界的可選像素數(shù)。默認為零
• block-lambda，用于將圖形包裹起來的lambda

上例代碼表示將圖形以canvas的寬高度的一半為區(qū)域作圖，并且horizontalpadding 50像素 verticapadding 30像素.

---

組合轉(zhuǎn)換 withTransform

代碼示例如下：

            drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)withTransform({translate(left= 600f)scale(scaleX = 2f,scaleY = 1f)}){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)}

效果如下：

需要講解的是withTransform()方法，它有四個參數(shù)

• transformBlock-調(diào)用回調(diào)以在發(fā)布繪圖操作之前發(fā)布要進行的轉(zhuǎn)換
• block-lambda，用于將圖形包裹起來的lambda

上例代碼表示將圖形先以平移600像素，再縮放2倍.

完整代碼

import androidx.compose.foundation.Canvas
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.PointMode
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.drawscope.inset
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.graphics.drawscope.scale
import androidx.compose.ui.graphics.drawscope.translate
import androidx.compose.ui.graphics.drawscope.withTransform
import androidx.compose.ui.text.drawText
import androidx.compose.ui.tooling.preview.Preview/*** @author zengyifeng* @date createDate:2023-10-03* @brief description*/
@Preview(showBackground = true, showSystemUi = true)
@Composable
fun CanvasView() {Canvas(modifier = Modifier, onDraw = {drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)withTransform({translate(left= 600f)scale(scaleX = 2f,scaleY = 1f)}){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)}val cqs = size/2finset(horizontal = 50f, vertical = 30f){drawArc(color = Color(0xFFF44336),size = cqs,startAngle = 0f,sweepAngle = 90f,useCenter = true)}translate(left = 100f,top = 100f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)}scale(scaleX = 2f,scaleY = 1f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = false)}rotate(degrees = 45f){drawArc(color = Color(0xFFF44336),size = Size(size.width/2,size.height/4),startAngle = 0f,sweepAngle = 90f,useCenter = true)}})
}

總結(jié)

本文介紹了Compose Canvas基礎中圖形轉(zhuǎn)換相關(guān)的API，包括平移、縮放、旋轉(zhuǎn)、自定義繪圖區(qū)域及內(nèi)邊距、組合轉(zhuǎn)換等內(nèi)容。通過示例代碼，演示了這些API的使用，希望對初學者有所幫助。