Hi everyone! I'm using compose web with skiko canv...

# compose-web

[정세현]

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?

[Oleksandr Karpovich [JB]]

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';

[darkmoon_uk]

2 is working for me, see chrishatton.org

[darkmoon_uk]

Code here: https://git.chrishatton.org/chris/homepage

[darkmoon_uk]

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:

@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)
    }
}

[darkmoon_uk]

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.

[darkmoon_uk]

Ktor Multiplatform Client for JS is used to load the bytes with an HTTP request.

[정세현]

thank you all!