github
/
compose-jb
mirror of https://gitee.com/github-sync-mirror/compose-jb.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Svg circles to compare with

with_mpp_example
Shagen Ogandzhanian 3 years ago
parent
02f19daba9
commit
cdb71afe0f
2 changed files with 106 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      examples/web-skia/build.gradle.kts
  2. 110
      examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt

1
examples/web-skia/build.gradle.kts
Unescape View File

@ -45,6 +45,7 @@ kotlin {
dependencies {
implementation(compose.web.core)
implementation(compose.web.svg)
implementation(compose.runtime)
}
}

110
examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt
Unescape View File

@ -12,8 +12,10 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.web.ExperimentalComposeWebSvgApi
import org.jetbrains.compose.web.css.JustifyContent
import org.jetbrains.compose.web.css.justifyContent
import org.jetbrains.compose.web.dom.Canvas
@ -21,27 +23,108 @@ import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.dom.Span
import org.jetbrains.compose.web.renderComposable
import org.jetbrains.compose.web.skiko.skiko
import org.jetbrains.compose.web.svg.Circle
import org.jetbrains.compose.web.svg.Svg
import org.jetbrains.skiko.wasm.onWasmReady
fun Color.Companion.random(): Color {
return Color((0..255).random(), (0..255).random(), (0..255).random())
}
@OptIn(ExperimentalComposeWebSvgApi::class)
@Composable
fun SomeSvg() {
Svg(viewBox = "0 0 400 400", attrs = {
attr("width", "400")
attr("height", "400")
}) {
val radius = remember { Animatable(10f) }
LaunchedEffect(radius) {
radius.animateTo(
targetValue = 200f,
animationSpec = infiniteRepeatable(
tween(durationMillis = 1000, easing = FastOutSlowInEasing),
repeatMode = RepeatMode.Reverse
)
)
}
Circle(200f, 200f, radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.95f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.9f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.85f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.8f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.75f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.7f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.65f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.6f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.55f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.5f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.45f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.4f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.35f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.3f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.25f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.2f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.15f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
Circle(200f, 200f, 0.1f * radius.value, attrs = {
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})")
})
}
}
@Composable
fun SomeCanvas() {
Canvas({
attr("width", "360")
attr("height", "360")
attr("width", "400")
attr("height", "400")
style {
// property("outline", "1px solid black")
// property("margin", "0 auto")
}
}) {
skiko {
val radius = remember { Animatable(20f) }
val radius = remember { Animatable(10f) }
LaunchedEffect(radius) {
radius.animateTo(
targetValue = 180f,
targetValue = 200f,
animationSpec = infiniteRepeatable(
tween(durationMillis = 1000, easing = FastOutSlowInEasing),
repeatMode = RepeatMode.Reverse
@ -51,7 +134,7 @@ fun SomeCanvas() {
Canvas(
modifier = Modifier
.size(360.dp)
.size(400.dp)
.fillMaxSize()
) {
drawCircle(color = Color.random(), radius = radius.value)
@ -97,6 +180,23 @@ fun App() {
SomeCanvas()
}
}
Div({
style {
property("width", "100%")
property("display", "flex")
justifyContent(JustifyContent.SpaceEvenly)
}
}) {
Span {
SomeSvg()
}
Span {
SomeSvg()
}
Span {
SomeSvg()
}
}
}
fun main() {

Write Preview
Loading…
Cancel
Save