Compose 中的图形

Changing Lin

关注

发布于: 2 小时前

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

原文链接:【http://xie.infoq.cn/article/5d69126c7905db49ac6f68891】。文章转载请联系作者。

Changing Lin

关注

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

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

发布

暂无评论

创作场景

Compose 中的图形

1.使用 Compose 的声明性图像

2.Canvas

3.DrawScope

Changing Lin

评论