Jetpack ComposeͰ ը૾ΫϩοϓػೳΛ࣮૷͢Δ @MoyuruAizawa

Moyuru Aizawa Software Engineer of Catlog, RABO. Previously at Azit, CyberAgent, and Eureka. Love Metal, Hardcore and EDM. MoyuruAizawa

github.com/MoyuruAizawa/Cropify

‣ Jetpack ComposeͰ࢖͑ΔImage Cropper͕ཉ͍͠ ‣ ArthurHub/Android-Image-Cropper ‣ ViewͷੈքͰ͓ੈ࿩ʹͳͬͯͨ ‣ Compose + AndroidViewͰ࢖͑ͳ͍ (ಉ྅͕ݕূͨ݁͠Ռͦ͏ݴͬͯͨΑ) ‣ SmartToolFactory/Compose-Cropper ‣ Android-Image-Cropperͱૢ࡞ײ͕ҟͳΔ ‣ BitmapͷαϯϓϦϯάಡΈࠐΈʹରԠ͍ͯ͠ͳ͍ Motivation

ࣗ࡞͢Δ͔…!!

1. αϯϓϦϯάͨ͠BitmapΛϩʔυ͢Δ 2. CanvasʹBitmapΛඳը͢Δ 3. Canvasͷ্ʹΫϩοϓϑϨʔϜΛඳը͢Δ 4. Ϣʔβʔૢ࡞ʹैͬͯΫϩοϓϑϨʔϜΛҠಈ/֦ॖ͢Δ 5. ϑϨʔϜͷ࠲ඪͱαΠζΛऔͬͯBitmap͔Βը૾Λൈ͖औΔ ࣮૷ͷ֓ཁ

αϯϓϦϯάͨ͠BitmapΛϩʔ υ͢Δ

‣ Image/Canvas/ImageViewΑΓ΋ང͔ʹେ͖͍ը૾Λ ͦͷ··දࣔ͢Δͷ͸ϝϞϦͷແବ ‣ αϯϓϦϯάͯ͠ը૾ΛBitmapʹ͓ͤ͜͹ޮ཰త ‣ 🔍 AndroidDevelopers ”Loading Large Bitmaps Efficiently” αϯϓϦϯάͨ͠BitmapΛϩʔυ͢Δ

CanvasʹBitmapΛදࣔ͢Δ

Canvas(modifier = modifier) { drawRect(option.backgroundColor) drawImage( image = bitmap, dstSize = size.toInt(), dstOffset = offset.toInt(), ) } CanvasʹBitmapΛදࣔ͢Δ

Canvas(modifier = modifier) { drawRect(option.backgroundColor) drawImage( image = bitmap, dstSize = size.toInt(), dstOffset = offset.toInt(), ) } എܠΛCanvas͍ͬͺʹඳը

Canvas(modifier = modifier) { drawRect(option.backgroundColor) drawImage( image = bitmap, dstSize = size.toInt(), dstOffset = offset.toInt(), ) } CanvasʹBitmapΛFitCenterʹͳΔΑ͏ʹඳը

Canvasͷ্ʹ ΫϩοϓϑϨʔϜΛඳը͢Δ

‣ ΫϩοϓϑϨʔϜΛඳը͢Δ ‣ ΫϩοϓϑϨʔϜͷ֎ଆ͸҉͘͢Δ ‣ PorterDuff Canvasͷ্ʹΫϩοϓϑϨʔϜΛඳը͢Δ

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ͷ্ʹΫϩοϓϑϨʔϜΛඳը͢Δ

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ͰϚεΫ͢Δ

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”

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Λઃఆ͓ͯ͘͠

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) }
 } ϑϨʔϜΛඳը͢Δ

Ϣʔβʔૢ࡞ʹैͬͯ ΫϩοϓϑϨʔϜΛҠಈ/֦ॖ͢Δ

‣ 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)) }

modifier .pointerInput(bitmap, option.frameAspectRatio) { detectDragGestures( onDragStart = { … }, onDragEnd = { … }, onDrag = { … } ) } ΫϩοϓϑϨʔϜͷҠಈ/֦ॖ

modifier .pointerInput(bitmap, option.frameAspectRatio) { detectDragGestures( onDragStart = { … }, onDragEnd = { … }, onDrag = { … } ) } ϑϨʔϜͷͲ͜Λ৮ͬͨͷ͔Λ൑ผ͢Δ

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Λܭࢉ

modifier .pointerInput(bitmap, option.frameAspectRatio) { detectDragGestures( onDragStart = { … }, onDragEnd = { … }, onDrag = { … } ) } ϑϨʔϜͷ֦ॖ/ҠಈΛߦ͏

onDrag = { change, dragAmount -> touchRegion?.let { when (it) { is TouchRegion.Vertex -> state.scaleFrameRect(…) TouchRegion.Inside -> state.translateFrameRect(…) } change.consume() } } TouchRegionͱdragAmountΛΈͯϑϨʔϜΛ֦ॖ/Ҡಈ

‣ ϑϨʔϜ͸ը૾ͷ֎ʹग़ͯ͸͍͚ͳ͍ ‣ ϑϨʔϜ֦ॖͰ௖఺࠲ඪΛҠಈ͢Δ৔߹ ྡͷ௖఺Λ௒͑ͯ͸ͳΒͳ͍ ‣ ΞεϖΫτൺݻఆͷϑϨʔϜ֦ॖͰ௖఺࠲ඪΛҠಈ͢Δ৔߹ ͍͍ײ͡ʹΞεϖΫτൺΛҡ࣋ͯ͠௖఺࠲ඪΛಈ͔͢ ϑϨʔϜͷ֦ॖ͸ͪΐͬͱͩΔ͍

Bitmap͔Βը૾Λ੾Γൈ͘

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͔Βը૾Λ੾Γൈ͘

؆୯ʹImage Cropper࡞Εͨ🥰

Thank you