https://kotlinlang.org logo
#compose-web
Title
# compose-web
u

정세현

02/28/2023, 8:21 AM
Hi everyone! I'm using compose web with skiko canvas I want to solve the following some problems. 1. Display Image -> I solved it using the svg to compose plugin. Is there any other general-purpose method? 2. Change Font 3. Change the mouse cursor icon according to the over of the button in the skiko canvas. what should I do?
o

Oleksandr Karpovich [JB]

02/28/2023, 8:28 AM
1. https://github.com/JetBrains/compose-jb/pull/2614 this could help a bit. 2. Font support is a TODO item. 3. Cursor Icon is rather a TODO item too (if I remember correctly). Although it's possible to add some hacks to make it work: to add Modifier.pointerInput on your button to listen to when the cursor enters and exits it. And then one can change the cursor as needed: document.body.style.cursor = 'wait';
d

darkmoon_uk

02/28/2023, 8:49 AM
2 is working for me, see chrishatton.org
As you can see this is very much just a scratch-pad project so don't take anything as best practice; but the Font Loading concept is at least proven. Most relevant snippet:
Copy code
@Composable
fun FontTestView(provideFontBytes: suspend () -> ByteArray) {
    var fontBytes by remember { mutableStateOf<ByteArray?>(null) }
    LaunchedEffect(Unit) {
        fontBytes = provideFontBytes()
    }
    fontBytes?.let { bytes ->
        val skTypeface: Typeface = Typeface.makeFromData(Data.makeFromBytes(bytes))
        val typeface = Typeface(skTypeface)
        val fontFamily = FontFamily(typeface)
        Text("Hello, this is a test of font loading", fontFamily = fontFamily, fontSize = 24.sp)
    }
}
The font is a standard TTF, included in
resources
so that it ends up being copied as a file to the web-server - just hosted as a regular file alongside
index.html
.
Ktor Multiplatform Client for JS is used to load the bytes with an HTTP request.
u

정세현

02/28/2023, 10:10 AM
thank you all!
18 Views