写点什么

Compose 中的图形

用户头像
Changing Lin
关注
发布于: 2 小时前
Compose 中的图形

1.使用 Compose 的声明性图像

Compose 将其声明性方法扩展到了处理图形的方式中。特点:

  • Compose 可最大限度地减少图形元素中的 state,有助于避免状态的编程困难。

  • 当您绘制图形时,所有选项都位于可组合函数中的恰当位置。

  • Compose 的图形 API 负责以高效的方式创建和释放对象。

  • Compose 依赖于基于视图的界面的画布和其他关联对象。

2.Canvas

自定义图形的核心可组合项是 Canvas。

// 创建一个 Canvas 可组合项,用于填充其父元素中的所有可用空间Canvas(modifier = Modifier.fillMaxSize()) {}
复制代码
  • Canvas 会自动提供 DrawScope

  • DrawScope 提供了几个有用的字段,例如 size,一个指定 DrawScope 的当前维度和最大维度的 Size 对象。


// 绘制一条从画布右上角到左下角的对角线,线宽为5dpCanvas(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, strokeWidth = 5F )}
复制代码


// 使用 drawCircle 将圆形放在画布中央Canvas(modifier = Modifier.fillMaxSize()) {    val canvasWidth = size.width    val canvasHeight = size.height    drawCircle(        color = Color.Blue,        center = Offset(x = canvasWidth / 2, y = canvasHeight / 2),        radius = size.minDimension / 4    )}
复制代码

3.DrawScope

  • 一个维护自身状态且限定了作用域的绘图环境

// 在画布左上角绘制一个矩形Canvas(modifier = Modifier.fillMaxSize()) {    val canvasQuadrantSize = size / 2F    drawRect(        color = Color.Green,        size = canvasQuadrantSize    )}
复制代码


// 使用 DrawScope.inset() 函数来调整当前作用域的默认参数,以更改绘图边界并相应地转换绘图。val canvasQuadrantSize = size / 2Finset(50F, 30F) {    drawRect(        color = Color.Green,        size = canvasQuadrantSize    )}
复制代码


// 使用 withTransform() 函数,向矩形同时应用平移和旋转,用于创建并应用整合了您所需的所有更改的单一转换withTransform({    translate(left = canvasWidth / 5F)    rotate(degrees = 45F)}) {    drawRect(        color = Color.Gray,        topLeft = Offset(x = canvasWidth / 3F, y = canvasHeight / 3F),        size = canvasSize / 3F    )}
复制代码


发布于: 2 小时前阅读数: 2
用户头像

Changing Lin

关注

获得机遇的手段远超于固有常规之上~ 2020.04.29 加入

我能做的,就是调整好自己的精神状态,以最佳的面貌去面对那些未曾经历过得事情,对生活充满热情和希望。

评论

发布
暂无评论
Compose 中的图形