使用compose绘制可以保存成Bitmap的写字板

前言

公司的项目使用了MVI架构，V层使用compose进行UI绘制，本着探索与学习，闲暇时间写了个记事本的app，现需要一个写字板功能，遂记录，本文不涉及compose 重组机制介绍，和绘制原理，只记录功能。

功能拆分

• 写字板
  根据手势检测移动路径，使用Canvas组件绘制路径

• 保存Compose中的UI成图片
  暂时没有找到Compose 控件直接转换成的方法，转换思路
  1、使用Modifier.onGloballyPositioned()监听组件在全局的位置
2、使用Bitmap Canvas PixelCopy 等类，将指定区域的View 保存成Bitmap，如果是传统的View 可以通过drawToBitmap() 扩展函数操作
3、使用contentResolver插入到相册

手势检测

Compose 中的Modifier提供pointerInput扩展方法用来监测手势输入 由于pointerInput传入的方法是挂起函数 并是PointerInputScope的扩展函数，所以pointerInput处理手势时，并不会阻塞当前线程 在PointerInputScope.awaitEachGesture()方法中 ，我们可以通过传入一个函数实时等待手指输入，获取当前位置和手指事件

绘制Path

和传统xml布局相似，可以通过Canvas 绘制一些点、线、路径等
差别是，XML是Canvas类，而Compose提供了一个方法(声明式UI特性)

   Canvas(modifier = Modifier.fillMaxSize()) {
       val path = Path()
       path.moveTo(0f, 0f)
       path.lineTo(size.width / 2f, size.height / 2f)
       path.lineTo(size.width, 0f)
       path.close()
       drawPath(path, Color.Magenta, style = Stroke(width = 10f))
   }

Compose组件转换成bitmap

DisposableEffect(Unit) {
    screenshotState.callback = {
       runCatching {
            composeView?.let {
                if (it.width == 0f || it.height == 0f){
                    return@let
                }
                view.screenshot(it){
                    screenshotState.imageState.value = it
                    if (it is ImageResult.Success){
                        println("screenshot imageState Success")
                        screenshotState.bitmapState.value = it.data
                    }
                }
            }
        }.onFailure {
            screenshotState.imageState.value = ImageResult.Error(Exception(it.message))
        }
    }
    onDispose {
        println("screenshot onDispose ")
        val bmp = screenshotState.bitmapState.value
        bmp?.apply {
            if (!isRecycled) {
                recycle()
            }
        }
        screenshotState.bitmapState.value = null
        screenshotState.callback = null
    }
}

//根据区域保存bitmap
fun View.screenshot(
    bounds: Rect,
    bitmapCallback: (ImageResult) -> Unit
) {
    try {

        val bitmap = Bitmap.createBitmap(
            bounds.width.toInt(),
            bounds.height.toInt(),
            Bitmap.Config.ARGB_8888,
        )

        PixelCopy.request(
            (this.context as Activity).window,
            bounds.toAndroidRect(),
            bitmap,
            {
                when (it) {
                    PixelCopy.SUCCESS -> {
                        bitmapCallback.invoke(ImageResult.Success(bitmap))
                    }
                    PixelCopy.ERROR_DESTINATION_INVALID -> {
                        
                    }
                    PixelCopy.ERROR_SOURCE_INVALID -> {
                        bitmapCallback.invoke(
                         
                        )
                    }
                    PixelCopy.ERROR_TIMEOUT -> {
                        bitmapCallback.invoke(
                            ImageResult.Error(
                                Exception(
                                    "A timeout occurred while trying to acquire a buffer "  
                                            "from the source to copy from."
                                )
                            )
                        )
                    }
                    PixelCopy.ERROR_SOURCE_NO_DATA -> {
                        
                    }
                    else -> {
                        bitmapCallback.invoke(
                           
                        )
                    }
                }
            },
            Handler(Looper.getMainLooper())
        )
    } catch (e: Exception) {
        bitmapCallback.invoke(ImageResult.Error(e))
    }
}

具体实现

@Composable
fun DrawTablet() {
    // 记录每一次move的路线
    var linepath by remember { mutableStateOf(Offset.Zero) }
    // 记录path对象
    val path by remember { mutableStateOf(Path()) }
    val screenshotState = rememberScreenshotState()
    val context =  LocalContext.current
    val scope = rememberCoroutineScope()
    ScreenshotBox(screenshotState = screenshotState,
        modifier =   Modifier
            .statusBarsPadding().
            navigationBarsPadding()
            .fillMaxSize()
            .pointerInput(Unit) {
            awaitEachGesture{
                while (true) {
                    val event = awaitPointerEvent()
                    when (event.type) {
                        //按住时，更新起始点
                        Press -> {
                            path.moveTo(event.changes.first().position.x, event.changes.first().position.y)
                        }
                        //移动时，更新起始点 移动时，记录路径path
                        Move->{
                            linepath = event.changes.first().position
                        }
                    }
                }
            }
        }){
            Canvas(modifier = Modifier.fillMaxSize()) {
                //重组新路线
                path.lineTo(linepath.x, linepath.y)
                drawPath(  color = Color.Red,
                    path = path,
                    style = Stroke(width = 10F))
            }
            Row(modifier = Modifier.align(Alignment.BottomCenter)) {
                Button(modifier = Modifier.weight(1f).padding(8.dp), onClick = {
                    linepath = Offset.Zero
                    path.reset()
                }){
                    Text(text = "Clear")
                }
                Button(modifier = Modifier.weight(1f).padding(8.dp), onClick = {
                    scope.launch {
                        screenshotState.capture()
                        screenshotState.bitmap?.insertImageToImage(context)
                    }
                }){
                    Text(text = "Screenshot")
                }
            }
        }
    }

参考资料

• Compose中的图形

这篇好文章是转载于：学新通技术网