更新记录

1.0.0（2025-06-07）

点9图，图片拉伸中间部分,四周保持不变的控件,常用来制作漂亮的聊天文本的背景气泡效果

平台兼容性

uni-app

uni-app x

点9图拉伸中间部分，四周保持不变的控件

集成步骤

1. 集成插件步骤请参考 https://www.cnblogs.com/wenrisheng/p/18323027
2. 页面要使用nvue或uvue

    <wrs-uts-resizeimage v-for="(item, index) in dataArray" :url="item.url" :text="item.text"
    :textAlign="item.textAlign" :textFontSize="item.textFontSize" :textColor="item.textColor"
    :textMarginLeft="textMarginLeft" :textMarginTop="textMarginTop" :textMarginRight="textMarginRight"
    :textMarginBottom="textMarginBottom" :style="'width:'+width+'px;height:'+height+'px;'" :index="index"
    @onLoadView="onLoadView"></wrs-uts-resizeimage>

组件属性

• url: 背景图，Android是点9图，iOS是png，Android采用点9图点原理拉伸，iOS采用平铺中间一个像素，四周不变的原理，支持本地图片或远程服务器图片
• text: 文本
• textAlign: 文本对其方式，支持left、center、right
• textFontSize: 文本大小，类型是字符串，即数字字符串
• textColor: 文字颜色，例如#ff00ff
• textMarginLeft: 文本左边距
• textMarginTop:文本上边距
• textMarginRight: 文本右边距
• textMarginBottom: 文本下边距

组件回调

• @onLoadView：组件加载完成

接口

    import {
    UTSResizeImage
} from "@/uni_modules/wrs-uts-resizeimage"

加载的图片会缓存到内存里，缓存是为了加载下次更快的加载，如果要删除内存图片，可以调用下面接口删除：

• 删除某个url的图片缓存

let url = "xxx"
UTSResizeImage.clear()

• 删除所有图片缓存

UTSResizeImage.clearAll()

android的图片处理步骤：

1. 由UI设计师根据业务需求设计点9图
2. 使用Android build-tools工具里的aapt命令把点9图转换为可使用的图 C:\Users\xxxx\Android\Sdk\build-tools\28.0.3>aapt

转换单张图片：

aapt s -i /xxxx/static/resizable.9.png -o /xxxx/static/resizable_android0.png

转换这个文件夹图片：

aapt c -v -S  /xxxxx/static -C /xxx/out