ImageViewer

ImageViewer是一个图片放大缩小查看的组件，提供了默认配置，简化组件的使用流程

🍭 基本使用

val painter = painterResource(id = R.drawable.light_02)
val state = rememberZoomableState(contentSize = painter.intrinsicSize)
ImageViewer(model = painter, state = state)

⚠️ ‼️ 这里需要注意的是，提供图片的固有尺寸是必须的，没有的话ImageViewer不会正常显示

🍰 结合Coil使用

val painter = rememberAsyncImagePainter(model = R.drawable.light_02)
val state = rememberZoomableState(contentSize = painter.intrinsicSize)
ImageViewer(model = painter, state = state)

🍨 自定义内容

ImageViewer通过传人的model类型来自动选择使用何种方式进行图片显示，与Image类似，默认支持Painter、ImageBitmap、ImageVector，也支持通过AnyComposable传入一个Composable

// 设定显示内容的固有大小
val rectSize = 100.dp
val density = LocalDensity.current
val rectSizePx = density.run { rectSize.toPx() }
val size = Size(rectSizePx, rectSizePx)
val state = rememberZoomableState(contentSize = size)
ImageViewer(
    state = state,
    model = AnyComposable {
        // 自定义内容
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Cyan)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxSize(0.6F)
                    .clip(CircleShape)
                    .background(Color.White)
                    .align(Alignment.BottomEnd)
            )
            Text(
                modifier = Modifier.align(Alignment.Center), 
                text = "Hello Compose"
            )
        }
    }
)

但是，事实上这里并不推荐使用AnyComposable，ImageViewer是对ZoomableView进行封装而来，有较高的定制化需求可以考虑直接使用 ZoomableView

🧁 类型拓展

ImageViewer可以通过ModelProcessor增加model支持的类型

val stringProcessorPair: ModelProcessorPair = String::class to { model, _ ->
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
    ) {
        Text(
            modifier = Modifier.align(Alignment.Center), 
            text = model as String
        )
    }
}

如上述代码所示，声明一个ModelProcessorPair，类型为Pair<String,@Composable (Any, ZoomableViewState) -> Unit>, 即传入String类型的model时，将按此方式进行显示

val message = "好家伙"
val state = rememberZoomableState(contentSize = Size(100F, 100F))
ImageViewer(
    model = message,
    state = state,
    processor = ModelProcessor(stringProcessorPair)
)

Scale提供了对大型图片二次采样的支持，详情见文档：SamplingDecoder

ImageViewer(
    processor = ModelProcessor(samplingProcessorPair)
)

🍦 手势与状态

ImageViewer手势事件回调为ZoomableGestureScope，状态与控制使用ZoomableViewState，见文档 ZoomableView ZoomableGestureScope ZoomableViewState