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

Dirty DOM implementation of circles

with_mpp_example
Shagen Ogandzhanian 3 years ago
parent
cdb71afe0f
commit
12d9ce0c8e
1 changed files with 313 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 354
      examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt

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

@ -16,32 +16,33 @@ import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import org.jetbrains.compose.web.ExperimentalComposeWebSvgApi import org.jetbrains.compose.web.ExperimentalComposeWebSvgApi
import org.jetbrains.compose.web.css.AlignItems
import org.jetbrains.compose.web.css.JustifyContent import org.jetbrains.compose.web.css.JustifyContent
import org.jetbrains.compose.web.css.alignItems
import org.jetbrains.compose.web.css.justifyContent import org.jetbrains.compose.web.css.justifyContent
import org.jetbrains.compose.web.css.width
import org.jetbrains.compose.web.dom.Canvas import org.jetbrains.compose.web.dom.Canvas
import org.jetbrains.compose.web.dom.Div import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.dom.Span import org.jetbrains.compose.web.dom.Span
import org.jetbrains.compose.web.dom.Text
import org.jetbrains.compose.web.renderComposable import org.jetbrains.compose.web.renderComposable
import org.jetbrains.compose.web.skiko.skiko import org.jetbrains.compose.web.skiko.skiko
import org.jetbrains.compose.web.svg.Circle import org.jetbrains.compose.web.svg.Circle
import org.jetbrains.compose.web.svg.Svg import org.jetbrains.compose.web.svg.Svg
import org.jetbrains.skiko.wasm.onWasmReady import org.jetbrains.skiko.wasm.onWasmReady
fun Color.Companion.random(): Color { private fun Color.Companion.random(): Color {
return Color((0..255).random(), (0..255).random(), (0..255).random()) return Color((0..255).random(), (0..255).random(), (0..255).random())
} }
@OptIn(ExperimentalComposeWebSvgApi::class) private fun rgbColor(): String = "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})"
@Composable @Composable
fun SomeSvg() { fun SomeHtml() {
Svg(viewBox = "0 0 400 400", attrs = { val radius = remember { Animatable(20f) }
attr("width", "400")
attr("height", "400")
}) {
val radius = remember { Animatable(10f) }
LaunchedEffect(radius) { LaunchedEffect(radius) {
radius.animateTo( radius.animateTo(
targetValue = 200f, targetValue = 400f,
animationSpec = infiniteRepeatable( animationSpec = infiniteRepeatable(
tween(durationMillis = 1000, easing = FastOutSlowInEasing), tween(durationMillis = 1000, easing = FastOutSlowInEasing),
repeatMode = RepeatMode.Reverse repeatMode = RepeatMode.Reverse
@ -49,63 +50,304 @@ fun SomeSvg() {
) )
} }
Circle(200f, 200f, radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") style {
property("width", "400px")
property("height", "400px")
property("position", "relative")
//property("display", "flex")
justifyContent(JustifyContent.Center)
alignItems(AlignItems.Center)
}
}) {
Div({
val r = radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.95f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.95 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.9f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.9 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.85f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.85 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.8f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.8 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.75f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.75 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.7f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.7 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.65f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.65 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.6f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.6 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.55f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.55 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.5f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.5 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.45f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.45 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.4f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.4 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.35f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.35 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.3f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.3 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.25f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.25 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.2f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.2 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.15f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.15 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
Circle(200f, 200f, 0.1f * radius.value, attrs = { Div({
attr("fill", "rgb(${(0..255).random()}, ${(0..255).random()}, ${(0..255).random()})") val r = 0.1 * radius.value
style {
property("border-radius", "50%")
property("background-color", rgbColor())
property("width", "${r}px")
property("height", "${r}px")
property("position", "absolute")
property("left", "calc(50% - ${r / 2}px)")
property("top", "calc(50% - ${r / 2}px)")
}
}) })
}
}
@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", rgbColor()) })
Circle(200f, 200f, 0.95f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.9f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.85f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.8f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.75f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.7f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.65f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.6f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.55f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.5f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.45f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.4f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.35f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.3f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.25f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.2f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.15f * radius.value, attrs = { attr("fill", rgbColor()) })
Circle(200f, 200f, 0.1f * radius.value, attrs = { attr("fill", rgbColor()) })
} }
} }
@ -197,6 +439,24 @@ fun App() {
SomeSvg() SomeSvg()
} }
} }
Div({
style {
property("width", "100%")
property("display", "flex")
justifyContent(JustifyContent.SpaceEvenly)
}
}) {
Div {
SomeHtml()
}
Div {
SomeHtml()
}
Div {
SomeHtml()
}
}
} }
fun main() { fun main() {

Write Preview
Loading…
Cancel
Save