最近在写网页的时候,需要在一段文本或一块区域的周边显示 Android 的 9-Patch 图像。就像这样:
Google了一下,发现可以用 CSS3 的 border-image 来实现这样的效果。瞬间感觉又 get 到了新知识,然后兴冲冲地开始用 border-image 来做,而且网上还有不少 border-image 的生成工具,如 Mozilla 的,十分方便。
过了一会儿后,我发现 border-image 并没有 Android 的 9-Patch 那么强大。border-image 只能简单的把一张背景图分成 9 格,四个角的图片填到 border 的四个角,上下左右四个边的图片就只能整体拉伸或重复填充到 border 的四个边。而 Android 的 9-Patch 还能指定多个拉伸区域,就像这样:
上面这样的效果,用 border-image 无论如何也做不出来。惆怅了,难道要用 TABLE 把 border 拼出来?好麻烦的啊~~~
实在不想用 TABLE 来拼这样的效果,只有又去 Google。功夫不负有心人,终于让我找到了一个 Javascript:https://github.com/chrislondon/9-Patch-Image-for-Websites。其作者当初也是想在网页上渲染出 Android 的 9-Patch 图像,大概也是苦于没有现成的 lib 可以用,于是就自己写了一个。可惜这个项目 4 年前就已经停止维护了。我把代码下下来后,本地测试效果,确实有 bug,9-Patch 图像没有正常渲染出来(我用的是 Chrome 85.0.4183.102),developer tool 的 console 里报错了。
又 Google 了下错误信息,在 https://stackoverflow.com/a/19821523/8340533 找到了热心网友的 fix。于是很 happy 的把他的 fixing merge 进去,又发现了一些小 bug,干脆全都 fix 了。最后把原作者的仓库 fork 了,然后 commit 自己的 fix,全部甩到 Github 上。
现在这个 Javascript 已经可以用了,需要的同学可以 checkout https://github.com/blackmonkey/jQuery-9-Patch。下面贴一张效果图: