You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Korge引擎NinePatch宽高修改及侧边变形问题求助

解决Korge中NinePatch修改宽度时侧边变形的问题

我来帮你搞定这个NinePatch拉伸变形的问题,结合你使用的Korge 1.13.9.0版本和已经尝试过的方案,这里有几个针对性的解决思路:

1. 正确复用9-patch图的原始边距信息

你最初用的是兼容IntelliJ 9-patch格式的NinePatchBitmap32扩展,修改宽度时侧边变形,核心原因是直接改width属性时,没有正确沿用9-patch图定义的拉伸边距(cap insets)。试试提前保留原始NinePatch对象,修改尺寸时调用setSize方法确保拉伸逻辑正确:

// 提前读取9-patch资源,保留原始边距参数
val scoreBgNinePatch = resourcesVfs["gamescreen/scorebg.9.png"].readNinePatch()
val scoreBg = ninePatch(scoreBgNinePatch, 40.0, 30.0) {}.position(40.0, 40.0)

val scoreUpdateFun: (score: Int) -> Unit = {
    val text = "$it"
    val len = text.length
    // 使用setSize而非直接修改width,确保NinePatch重新计算拉伸区域
    scoreBg.setSize(30 + len * 10.0, scoreBg.height)
    score.text = text
}

2. 从9-patch图提取边距适配普通NinePatch

你切换到普通NinePatch后恢复正常,但手动计算边距太麻烦。可以从原始9-patch图中自动提取边距参数,不用手动算比例:

// 读取9-patch图获取原始边距数据
val ninePatchBitmap = resourcesVfs["gamescreen/scorebg.9.png"].readNinePatch()
val bitmapWidth = ninePatchBitmap.bitmap.width.toDouble()
val bitmapHeight = ninePatchBitmap.bitmap.height.toDouble()

// 转换为普通NinePatch需要的比例参数
val leftCap = ninePatchBitmap.leftCap / bitmapWidth
val topCap = ninePatchBitmap.topCap / bitmapHeight
val rightCap = ninePatchBitmap.rightCap / bitmapWidth
val bottomCap = ninePatchBitmap.bottomCap / bitmapHeight

// 使用提取的边距创建普通NinePatch(注意用不带9-patch标记的原图)
val scoreBg = ninePatch(
    atlas["scorebg2.png"],
    40.0, 30.0,
    leftCap, topCap, rightCap, bottomCap
).position(40.0, 40.0)

// 现在修改宽度就不会变形了
val scoreUpdateFun: (score: Int) -> Unit = {
    val text = "$it"
    val len = text.length
    scoreBg.width = 30 + len * 10.0
    score.text = text
}

3. 版本相关的修复建议

你用的Korge 1.13.9.0版本,NinePatchBitmap32的扩展可能存在尺寸修改时的拉伸bug:

  • 可以考虑升级到1.14.x及以上的新版本,官方大概率已经修复了这类9-patch的拉伸问题
  • 跟进你提到的公开issue,看看里面有没有官方提供的临时 workaround 或者修复进度

另外要注意:当NinePatch附加在FixedSizeContainer上时,要确保容器的尺寸修改和NinePatch的尺寸修改同步,避免容器的约束逻辑干扰NinePatch的拉伸计算。

内容的提问来源于stack exchange,提问作者resuser

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.08 13:12:37