Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7873b2b

Browse files
add color filter sample with graphicsLayer
1 parent f20daa9 commit 7873b2b

File tree

2 files changed

+57
-9
lines changed

2 files changed

+57
-9
lines changed

‎Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/chapter3_layout/Tutorial3_6_2SubComposeAndFlexLayout.kt

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package com.smarttoolfactory.tutorial1_1basics.chapter3_layout
22

3-
import android.widget.Toast
3+
import androidx.compose.animation.core.animateFloatAsState
4+
import androidx.compose.animation.core.tween
45
import androidx.compose.foundation.background
56
import androidx.compose.foundation.layout.Column
67
import androidx.compose.foundation.layout.PaddingValues
@@ -12,11 +13,18 @@ import androidx.compose.foundation.lazy.items
1213
import androidx.compose.foundation.lazy.rememberLazyListState
1314
import androidx.compose.runtime.Composable
1415
import androidx.compose.runtime.DisposableEffect
16+
import androidx.compose.runtime.getValue
1517
import androidx.compose.runtime.mutableStateListOf
18+
import androidx.compose.runtime.mutableStateOf
1619
import androidx.compose.runtime.remember
1720
import androidx.compose.runtime.rememberCoroutineScope
21+
import androidx.compose.runtime.setValue
1822
import androidx.compose.ui.Modifier
23+
import androidx.compose.ui.draw.drawWithCache
1924
import androidx.compose.ui.graphics.Color
25+
import androidx.compose.ui.graphics.ColorFilter
26+
import androidx.compose.ui.graphics.ColorMatrix
27+
import androidx.compose.ui.graphics.layer.drawLayer
2028
import androidx.compose.ui.platform.LocalContext
2129
import androidx.compose.ui.tooling.preview.Preview
2230
import androidx.compose.ui.unit.dp
@@ -66,17 +74,46 @@ private fun TutorialContent() {
6674
val messages = remember { mutableStateListOf<ChatMessage>() }
6775
val sdf = remember { SimpleDateFormat("hh:mm", Locale.ROOT) }
6876

77+
var selected by remember {
78+
mutableStateOf(false)
79+
}
80+
81+
val saturation by animateFloatAsState(
82+
targetValue = if (selected) 0f else 1f,
83+
animationSpec = tween(3000)
84+
)
85+
6986
Column(
7087
modifier = Modifier
7188
.fillMaxSize()
89+
.then(
90+
Modifier.drawWithCache {
91+
val graphicsLayer = obtainGraphicsLayer()
92+
93+
graphicsLayer.apply {
94+
record {
95+
drawContent()
96+
}
97+
colorFilter = ColorFilter.colorMatrix(
98+
ColorMatrix().apply {
99+
setToSaturation(saturation)
100+
})
101+
}
102+
103+
onDrawWithContent {
104+
drawLayer(graphicsLayer)
105+
}
106+
}
107+
108+
)
72109
.background(Color(0xffFBE9E7))
73110
) {
74111

75112
ChatAppbar(
76113
title = "Flexible ChatRows",
77114
description = description,
78115
onClick = {
79-
Toast.makeText(context, description, Toast.LENGTH_SHORT).show()
116+
selected = selected.not()
80117
}
81118
)
82119
val scrollState = rememberLazyListState()

‎Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/chapter6_graphics/Tutorial6_39_1GraphicsLayer1.kt

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ import androidx.compose.ui.draw.shadow
3838
import androidx.compose.ui.geometry.Offset
3939
import androidx.compose.ui.geometry.Rect
4040
import androidx.compose.ui.geometry.Size
41-
import androidx.compose.ui.graphics.BlendMode
4241
import androidx.compose.ui.graphics.Color
4342
import androidx.compose.ui.graphics.ColorFilter
4443
import androidx.compose.ui.graphics.ColorMatrix
@@ -456,7 +455,7 @@ fun createParticles(imageBitmap: ImageBitmap, particleSize: Int): List<TestParti
456455
fun InversePixelsSample() {
457456
Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
458457

459-
androidx.compose.material3.Text(
458+
Text(
460459
text = "Original Colors",
461460
fontSize = 34.sp,
462461
modifier = Modifier.padding(vertical = 16.dp)
@@ -475,8 +474,8 @@ fun InversePixelsSample() {
475474
)
476475
}
477476

478-
androidx.compose.material3.Text(
479-
text = "Inverted Colors",
477+
Text(
478+
text = "Color Filtered",
480479
fontSize = 34.sp,
481480
modifier = Modifier.padding(vertical = 16.dp)
482481
)
@@ -486,19 +485,31 @@ fun InversePixelsSample() {
486485
.drawWithCache {
487486
val graphicsLayer = obtainGraphicsLayer()
488487

489-
val values = floatArrayOf(
488+
val invertedColorMatrix = floatArrayOf(
490489
-1f, 0f, 0f, 0f, 255f,
491490
0f, -1f, 0f, 0f, 255f,
492491
0f, 0f, -1f, 0f, 255f,
493492
0f, 0f, 0f, 1f, 0f
494493
)
495494

495+
val sepiaMatrix = floatArrayOf(
496+
1f, 0f, 0f, 0f, 0f,
497+
0f, 1f, 0f, 0f, 0f,
498+
0f, 0f, 0.85f, 0f, 0f,
499+
0f, 0f, 0f, 1f, 0f
500+
)
501+
496502
graphicsLayer.apply {
497503
record {
498504
drawContent()
499505
}
500-
blendMode = BlendMode.Difference
501-
colorFilter = ColorFilter.colorMatrix(ColorMatrix(values))
506+
// blendMode = BlendMode.Difference
507+
// Sepia or inverted Matrices
508+
// colorFilter = ColorFilter.colorMatrix(ColorMatrix(sepiaMatrix))
509+
// Black-White
510+
colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply {
511+
this.setToSaturation(0f)
512+
})
502513
}
503514

504515
onDrawWithContent {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /