Jetpack Composeで画像クロップ機能を実装する

Transcript

1. Jetpack ComposeͰ ը૾ΫϩοϓػೳΛ࣮૷͢Δ @MoyuruAizawa
2. Moyuru Aizawa Software Engineer of Catlog, RABO. Previously at Azit, CyberAgent, and Eureka. Love Metal, Hardcore and EDM. MoyuruAizawa
3. github.com/MoyuruAizawa/Cropify
4. ‣ Jetpack ComposeͰ࢖͑ΔImage Cropper͕ཉ͍͠ ‣ ArthurHub/Android-Image-Cropper ‣ ViewͷੈքͰ͓ੈ࿩ʹͳͬͯͨ ‣ Compose + AndroidViewͰ࢖͑ͳ͍ (ಉ྅͕ݕূͨ݁͠Ռͦ͏ݴͬͯͨΑ) ‣ SmartToolFactory/Compose-Cropper ‣ Android-Image-Cropperͱૢ࡞ײ͕ҟͳΔ ‣ BitmapͷαϯϓϦϯάಡΈࠐΈʹରԠ͍ͯ͠ͳ͍ Motivation
5. ࣗ࡞͢Δ͔…!!
6. 1. αϯϓϦϯάͨ͠BitmapΛϩʔυ͢Δ 2. CanvasʹBitmapΛඳը͢Δ 3. Canvasͷ্ʹΫϩοϓϑϨʔϜΛඳը͢Δ 4. Ϣʔβʔૢ࡞ʹैͬͯΫϩοϓϑϨʔϜΛҠಈ/֦ॖ͢Δ 5. ϑϨʔϜͷ࠲ඪͱαΠζΛऔͬͯBitmap͔Βը૾Λൈ͖औΔ ࣮૷ͷ֓ཁ
7. αϯϓϦϯάͨ͠BitmapΛϩʔ υ͢Δ
8. ‣ Image/Canvas/ImageViewΑΓ΋ང͔ʹେ͖͍ը૾Λ ͦͷ··දࣔ͢Δͷ͸ϝϞϦͷແବ ‣ αϯϓϦϯάͯ͠ը૾ΛBitmapʹ͓ͤ͜͹ޮ཰త ‣ 🔍 AndroidDevelopers ”Loading Large Bitmaps Efficiently” αϯϓϦϯάͨ͠BitmapΛϩʔυ͢Δ
9. CanvasʹBitmapΛදࣔ͢Δ
10. Canvas(modifier = modifier) { drawRect(option.backgroundColor) drawImage( image = bitmap, dstSize = size.toInt(), dstOffset = offset.toInt(), ) } CanvasʹBitmapΛදࣔ͢Δ
11. Canvas(modifier = modifier) { drawRect(option.backgroundColor) drawImage( image = bitmap, dstSize = size.toInt(), dstOffset = offset.toInt(), ) } എܠΛCanvas͍ͬͺʹඳը
12. Canvas(modifier = modifier) { drawRect(option.backgroundColor) drawImage( image = bitmap, dstSize = size.toInt(), dstOffset = offset.toInt(), ) } CanvasʹBitmapΛFitCenterʹͳΔΑ͏ʹඳը
13. Canvasͷ্ʹ ΫϩοϓϑϨʔϜΛඳը͢Δ
14. ‣ ΫϩοϓϑϨʔϜΛඳը͢Δ ‣ ΫϩοϓϑϨʔϜͷ֎ଆ͸҉͘͢Δ ‣ PorterDuff Canvasͷ্ʹΫϩοϓϑϨʔϜΛඳը͢Δ
15. Canvas(modifier = modifier) { with(drawContext.canvas.nativeCanvas) { val checkPoint = saveLayer(null, null) drawRect( color = option.maskColor, alpha = option.maskAlpha, ) drawRect( color = Color.Transparent, topLeft = offset, size = size, blendMode = BlendMode.SrcOut ) restoreToCount(checkPoint) drawFrame(offset, size, option) }
 } Canvasͷ্ʹΫϩοϓϑϨʔϜΛඳը͢Δ
16. Canvas(modifier = modifier) { with(drawContext.canvas.nativeCanvas) { val checkPoint = saveLayer(null, null) drawRect( color = option.maskColor, alpha = option.maskAlpha, ) drawRect( color = Color.Transparent, topLeft = offset, size = size, blendMode = BlendMode.SrcOut ) restoreToCount(checkPoint) drawFrame(offset, size, option) } } CanvasશମΛdrawRectͰϚεΫ͢Δ
17. Canvas(modifier = modifier) { with(drawContext.canvas.nativeCanvas) { val checkPoint = saveLayer(null, null) drawRect( color = option.maskColor, alpha = option.maskAlpha, ) drawRect( color = Color.Transparent, topLeft = offset, size = size, blendMode = BlendMode.SrcOut ) restoreToCount(checkPoint) drawFrame(offset, size, option) }
 } ϑϨʔϜͷ಺ଆ͚ͩSrcOutͰ͘Γൈ͘ 🔍 AndroidDevelopers “PorterDuff.Mode” 🔍 AndroidDevelopers “BlendMode”
18. Canvas(modifier = modifier) { with(drawContext.canvas.nativeCanvas) { val checkPoint = saveLayer(null, null) drawRect( color = option.maskColor, alpha = option.maskAlpha, ) drawRect( color = Color.Transparent, topLeft = offset, size = size, blendMode = BlendMode.SrcOut ) restoreToCount(checkPoint) drawFrame(offset, size, option) } } PorterDuffͰmask͚ͩΛ͘Γൈͨ͘ΊʹlayerΛઃఆ͓ͯ͘͠
19. Canvas(modifier = modifier) { with(drawContext.canvas.nativeCanvas) { val checkPoint = saveLayer(null, null) drawRect( color = option.maskColor, alpha = option.maskAlpha, ) drawRect( color = Color.Transparent, topLeft = offset, size = size, blendMode = BlendMode.SrcOut ) restoreToCount(checkPoint) drawFrame(offset, size, option) }
 } ϑϨʔϜΛඳը͢Δ
20. Ϣʔβʔૢ࡞ʹैͬͯ ΫϩοϓϑϨʔϜΛҠಈ/֦ॖ͢Δ
21. ‣ Modifier#pointerInput ‣ PointerInputScope#detectDragGestures ‣ ͜ͷ2ͭΛ࢖ͬͯϢʔβʔͷδΣενϟʔΛ͞͹͘ ‣ ϑϨʔϜͷ࠲ඪ/αΠζ Ŋ ը૾ͷ࠲ඪ/αΠζΛߟྀ͢Δඞཁ͕͋ΔŇ Stateͱ͓ͯ࣋ͬͯ͘͠Ň ΫϩοϓϑϨʔϜͷҠಈ/֦ॖ class CropifyState { internal var frameRect by mutableStateOf(Rect(0f, 0f, 0f, 0f)) internal var imageRect by mutableStateOf(Rect(0f, 0f, 0f, 0f)) }
22. modifier .pointerInput(bitmap, option.frameAspectRatio) { detectDragGestures( onDragStart = { … }, onDragEnd = { … }, onDrag = { … } ) } ΫϩοϓϑϨʔϜͷҠಈ/֦ॖ
23. modifier .pointerInput(bitmap, option.frameAspectRatio) { detectDragGestures( onDragStart = { … }, onDragEnd = { … }, onDrag = { … } ) } ϑϨʔϜͷͲ͜Λ৮ͬͨͷ͔Λ൑ผ͢Δ
24. fun detectTouchRegion( tapPosition: Offset, frameRect: Rect, tolerance: Float ): TouchRegion? { return when { Rect(frameRect.topLeft, tolerance)
 .contains(tapPosition) -> TouchRegion.Vertex.TOP_LEFT // தུ Rect(frameRect.center, frameRect.width / 2 - tolerance)
 .contains(tapPosition) -> TouchRegion.Inside else -> null } } ϑϨʔϜͷ࠲ඪͱλον࠲ඪΛൺֱͯ͠TouchRegionΛܭࢉ
25. modifier .pointerInput(bitmap, option.frameAspectRatio) { detectDragGestures( onDragStart = { … }, onDragEnd = { … }, onDrag = { … } ) } ϑϨʔϜͷ֦ॖ/ҠಈΛߦ͏
26. onDrag = { change, dragAmount -> touchRegion?.let { when (it) { is TouchRegion.Vertex -> state.scaleFrameRect(…) TouchRegion.Inside -> state.translateFrameRect(…) } change.consume() } } TouchRegionͱdragAmountΛΈͯϑϨʔϜΛ֦ॖ/Ҡಈ
27. ‣ ϑϨʔϜ͸ը૾ͷ֎ʹग़ͯ͸͍͚ͳ͍ ‣ ϑϨʔϜ֦ॖͰ௖఺࠲ඪΛҠಈ͢Δ৔߹ ྡͷ௖఺Λ௒͑ͯ͸ͳΒͳ͍ ‣ ΞεϖΫτൺݻఆͷϑϨʔϜ֦ॖͰ௖఺࠲ඪΛҠಈ͢Δ৔߹ ͍͍ײ͡ʹΞεϖΫτൺΛҡ࣋ͯ͠௖఺࠲ඪΛಈ͔͢ ϑϨʔϜͷ֦ॖ͸ͪΐͬͱͩΔ͍
28. Bitmap͔Βը૾Λ੾Γൈ͘
29. private suspend fun cropImage( bitmap: ImageBitmap, frameRect: Rect, imageRect: Rect, ): ImageBitmap { return withContext(Dispatchers.IO) { val scale = bitmap.width / imageRect.width Bitmap.createBitmap( bitmap.asAndroidBitmap(), ((frameRect.left - imageRect.left) * scale).roundToInt(), ((frameRect.top - imageRect.top) * scale).roundToInt(), (frameRect.width * scale).roundToInt(), (frameRect.height * scale).roundToInt(), ).asImageBitmap() } } Bitmap͔Βը૾Λ੾Γൈ͘
30. ؆୯ʹImage Cropper࡞Εͨ🥰
31. Thank you