设计之美circleImageView4cj 圆形图片裁剪指南——CircleImageModel 链式调用与构建者模式完整剖析【免费下载链接】circle-image-view-cj自定义圆形imageview主要实现圆形图片展示项目地址: https://gitcode.com/Cangjie-TPC/circle-image-view-cjcircleImageView4cjcircle-image-view-cj是一个面向 Cangjie 开发的轻量级图片处理库核心能力就两件事将图片裁剪为圆形、给图片设置圆形边框。它的核心类CircleImageModel采用经典的构建者模式Builder Pattern通过链式调用一行代码完成图片地址、直径、边框、缩放类型的全部配置——对新手来说这是学习优秀 API 设计的一个绝佳小样本。它解决了什么问题在日常开发中把一张头像裁成圆形、再套一圈白色边框是最高频的 UI 需求之一。原生Image组件虽然支持clip但边框宽度、圆形裁剪开关、缩放方式等参数要自己拼装代码容易散乱。circleImageView4cj 把这些参数收进一个数据模型CircleImageModel再由组件CircleImageView统一消费实现数据与视图分离角色类职责数据模型CircleImageModel保存图片地址、直径、边框、缩放类型等全部参数展示组件CircleImageView根据模型渲染圆形裁剪图片和边框上图为示例工程 entry/src/main/resources/base/media/hua.jpg 中的源图运行示例后它会被渲染成带白色圆边框的圆形头像构建者模式为什么说它优雅传统的多参数对象配置往往是这样创建对象一个属性一个属性地set容易漏参数、顺序混乱、可读性差而CircleImageModel的每个set*方法都返回this即CircleImageModel实例本身于是可以把配置串成一条链this.data this.data.setImageURI(r(app.media.hua)) .setDiameter(200.0) .setBorderWidth(5.0) .setBorderColor(Color.WHITE) .setScaleType(ImageFit.Fill) .setDisableCircularTransformation(false)这正是构建者模式的思想通过一系列方法构建出一个完整配置好的对象。它带来三个直观好处 ✨意图清晰一整条链从上往下读就是一个完整的配置清单不易遗漏链式写法让开发者清楚地看到每一步做了什么默认值兜底不链上的参数自动保留默认值如scaleType默认ImageFit.Contain完整用法可在示例源码 entry/src/main/cangjie/index.cj 中查看模型实现位于 circle_image_view.cj。快速上手3 步完成圆形图片展示第 1 步引入模块将circleimageview模块拷贝到应用项目按 README.md 的说明在oh-package.json5与cjpm.toml中声明依赖后用import circleimageview.*引入即可。第 2 步用链式调用构建模型在组件的aboutToAppear生命周期里配置数据示例来自 doc/feature_api.mdthis.data this.data.setImageURI(r(app.media.hua)).setDiameter(200.0) .setBorderWidth(5.0).setBorderColor(Color.WHITE) .setScaleType(ImageFit.Fill).setDisableCircularTransformation(false)第 3 步放置组件CircleImageView(model: data)组件内部用Link绑定模型见 circle_image_view.cj当disableCircularTransformation为false时图片通过CircleShape裁剪为圆形外层Column以borderRadius backgroundColor画出边框。CircleImageModel 核心 API 速查表 链式方法作用默认值setImageURI(src)设置图片地址空资源setDiameter(diameter)设置裁剪直径vp负值自动归 00.0setBorderWidth(width)设置边框宽度vp负值自动归 00.0setBorderColor(color)设置边框颜色Color.GRAYsetCircleBackgroundColor(color)设置圆形背景色白色setScaleType(type)设置缩放类型如ImageFit.FillImageFit.ContainsetDisableCircularTransformation(flag)关闭/开启圆形裁剪true不裁剪每个set*都有对应的get*读取方法详细接口说明参见官方特性文档 doc/feature_api.md。小细节setDiameter和setBorderWidth对负数做了防御性处理内部归零这种防呆设计让链式调用即使传错参数也不会崩溃。源码结构一览项目非常小巧核心代码一眼可读完文件说明circleimageview/src/main/cangjie/circle_image_view.cj组件CircleImageView与模型CircleImageModel的全部实现entry/src/main/cangjie/index.cj完整功能示例链式调用 双 List 布局展示doc/feature_api.mdAPI 特性文档circleimageview/CHANGELOG.md版本变更记录当前 v1.0.1总结从小库学到的设计经验构建者模式适合参数多、有合理默认值的对象——CircleImageModel的 8 个配置项全部可选链式调用让代码从逐行赋值变成一条流畅的配置链数据与视图分离CircleImageModel可以被任意组件复用CircleImageView只负责渲染小即是美整个库不到 200 行核心代码却完整覆盖了圆形裁剪 圆形边框的常见需求非常适合作为学习 Cangjie 组件开发的设计范例 掌握了这套模式再去阅读其他 UI 库的 API 设计你会发现链式调用几乎无处不在。【免费下载链接】circle-image-view-cj自定义圆形imageview主要实现圆形图片展示项目地址: https://gitcode.com/Cangjie-TPC/circle-image-view-cj创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考