@Composable
private fun ContentView(
uiState: JAFRSHO14010UiState,
onAction: (action: JafAction)
-> Unit,
modifier: Modifier = Modifier,
) {
// 描画ツールの状態
var isEraseMode by remember { mutableStateOf(false) }
var isScrollMode by remember { mutableStateOf(false) }
var selectedColor by remember { mutableStateOf(JafFF4C33) }
var brushWidth by remember { mutableFloatStateOf(5f) }
val eraseBrushWithMultiple = 2f
val imageFoldPath = "storage/emulated/0/Download/Layout_image_01.png"
val paths = remember { mutableStateListOf<Pair<Path, Paint>>
() }
var currentPath by remember { mutableStateOf<Path?>(null) }
var redrawTrigger by remember { mutableIntStateOf(0) }
var offsetX by remember { mutableFloatStateOf(0f) }
var offsetY by remember { mutableFloatStateOf(0f) }
//
// LaunchedEffect(uiState.tegakiDrawData, currentImagePath){
// }
paths.apply {
addAll(loadPathsFromByteArray(uiState.tegakiDrawData ?: ByteArray(0)))
}
Column(
modifier = Modifier
.fillMaxSize
()
.padding(10.dp)
) {
// メインコンテンツ
Card(
elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
) {
Row {
// 描画ツールバー
Column(Modifier.zIndex(2f)) {
DrawingToolbar(
modifier,
uiState,
onPrevImage = {
onAction(JAFRSHO14010Action.OnBack)
},
onNextImage = {
onAction(JAFRSHO14010Action.OnForward)
},
onEraseModeToggle = {
isEraseMode = it
onAction(JAFRSHO14010Action.OnReset)
},
onImageScrollModelToggle = {
isScrollMode = it
onAction(JAFRSHO14010Action.OnScrollImage)
},
onColorChange = {
selectedColor = it
onAction(JAFRSHO14010Action.OnSelectColor(it))
},
onBrushWidthChange = {
brushWidth = it
onAction(JAFRSHO14010Action.OnAdjustSize(it))
},
onZoomIn = {
onAction(JAFRSHO14010Action.OnEnlargeImage)
},
onZoomOut = {
onAction(JAFRSHO14010Action.OnReduceImage)
},
)
}
Spacer(modifier = Modifier.width(10.dp))
Column(
Modifier
.size(893.dp, 507.dp)
.zIndex(1f)
) {
// 写真と描画キャンバス
Box(
modifier = Modifier
.weight(1f)
.clipToBounds
()
) {
// 背景写真
Image(
bitmap = ImageBitmap(893, 507)
.apply {
val canvas = Canvas(this)
val paint = Paint
().apply {
shader = LinearGradientShader(
from = Offset(0f, 0f),
to = Offset(893f, 507f),
colors = listOf(Color.Cyan, Color.Magenta)
)
}
canvas.drawRect(Rect(0f, 0f, 893f, 507f), paint)
},
contentDescription = null,
modifier = Modifier
.size(893.dp, 507.dp)
.
graphicsLayer(
scaleX = uiState.imgScale,
scaleY = uiState.imgScale,
translationX = offsetX,
translationY = offsetY
),
contentScale = ContentScale.Fit
)
Canvas(
modifier = Modifier
.size(893.dp, 507.dp)
.
graphicsLayer(
scaleX = uiState.imgScale,
scaleY = uiState.imgScale,
compositingStrategy = CompositingStrategy.Offscreen
)
.pointerInput(Unit) {
awaitPointerEventScope {
while (true) {
val event = awaitPointerEvent
()
if (!isScrollMode) {
val position = event.changes.first
().position
val pressed = event.changes.first
().pressed
if (pressed) {
if (currentPath == null) {
currentPath = Path
().apply {
moveTo(
position.x
- offsetX,
position.y
- offsetY
)
}
} else {
currentPath?.lineTo(
position.x
- offsetX,
position.y
- offsetY
)
}
redrawTrigger++
} else if (currentPath != null) {
currentPath?.let {
val newPaint = Paint
().apply {
color =
if (isEraseMode) {
Color.Transparent
} else {
selectedColor
}
style = PaintingStyle.Stroke
strokeWidth = if (isEraseMode) {
brushWidth * eraseBrushWithMultiple
} else {
brushWidth
}
isAntiAlias = true
strokeCap = StrokeCap.Round
strokeJoin = StrokeJoin.Round
}
paths.add(it to newPaint)
}
currentPath = null
redrawTrigger++
}
event.changes.forEach { it.consume
() }
} else {
val change = event.changes.first
()
if (event.changes.size == 1 && change.pressed) {
val drag = change.positionChange
()
offsetX += drag.x
offsetY += drag.y
change.consume
()
} else {
event.changes.forEach { it.consume
() }
}
}
}
}
}
) {
redrawTrigger
withTransform({
offsetX = offsetX.coerceIn(
minimumValue = if (uiState.imgScale <= 1f) {
0f
} else {
-893f * uiState.imgScale.absoluteValue / 2
},
maximumValue = if (uiState.imgScale <= 1f) {
0f
} else {
893f * uiState.imgScale.absoluteValue / 2
}
// when (uiState.imgScale) {
// 0f
-> 0f
// 1f
-> 0f
// 2f
-> 893f / 2
// 3f
-> 893f * 2 / 3
// 4f
-> 893f * 3 / 4
// else
-> 0f
// }
)
offsetY = offsetY.coerceIn(
minimumValue = if (uiState.imgScale <= 1f) {
0f
} else {
-507f * uiState.imgScale.absoluteValue / 2
},
maximumValue = if (uiState.imgScale <= 1f) {
0f
} else {
507f * uiState.imgScale.absoluteValue / 2
}
// when (uiState.imgScale) {
// 0f
-> 0f
// 1f
-> 0f
// 2f
-> 507f / 2
// 3f
-> 507f * 2 / 3
// 4f
-> 507f * 3 / 4
// else
-> 0f
// }
)
translate(left = offsetX, top = offsetY)
}) {
paths.forEach { (path, paint)
->
if (paint.color == Color.Transparent) {
drawPath(
path = path,
color = paint.color,
style = Stroke(width = paint.strokeWidth),
blendMode = BlendMode.
Clear
)
} else {
drawPath(
path = path,
color = paint.color,
style = Stroke(width = paint.strokeWidth)
)
}
}
currentPath?.let {
if (isEraseMode) {
drawPath(
path = it,
color = selectedColor,
style = Stroke(
width = brushWidth * eraseBrushWithMultiple
),
blendMode = BlendMode.
Clear
)
} else {
drawPath(
path = it,
color = selectedColor,
style = Stroke(width = brushWidth)
)
}
}
}
}
}
}
}
}
Spacer(modifier = Modifier.height(10.dp))
Row(
modifier = Modifier.fillMaxWidth
(),
horizontalArrangement = Arrangement.spacedBy(92.dp)
) {
PageButton(
text = uiState.btnReturn,
{ onAction(JAFRSHO14010Action.OnReturn) },
modifier.size(width = 220.dp, height = 75.dp)
)
PageButton(
text = uiState.btn
Clear,
{
if (!paths.isEmpty
()) {
paths.
clear()
currentPath = null
redrawTrigger++
}
onAction(JAFRSHO14010Action.On
Clear)
},
modifier.size(width = 220.dp, height = 75.dp)
)
PageButton(
text = uiState.btnUndo,
{
if (!paths.isEmpty
()) {
paths.removeAt(paths.lastIndex)
redrawTrigger++
}
onAction(JAFRSHO14010Action.OnUndo)
},
modifier.size(width = 220.dp, height = 75.dp)
)
PageButton(
text = uiState.btnConfirm,
{ onAction(JAFRSHO14010Action.OnConfirm) },
modifier.size(width = 220.dp, height = 75.dp)
)
}
}
// }
}
本文探讨了如何通过将picmarksymbol嵌入资源来减少网络传输的方法，并介绍了设置autoMoveToTop为false以调整鼠标移动时的图形显示方式。
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
