想画圆角卡片和按钮RoundRect 让你轻松搞定在 APP 开发中圆角矩形可能是最常见的 UI 元素了——卡片、按钮、输入框、头像框几乎到处都是圆角。在 HarmonyOS 的 drawing 模块里RoundRect类就是专门用来创建和操作圆角矩形的。RoundRect 是什么简单说RoundRect 就是一个圆角矩形对象。它在普通矩形的基础上给四个角加上了圆角效果。你可以控制每个角的圆角半径甚至让四个角的半径都不一样。打个比方普通矩形就像一块方方正正的砖头RoundRect 就像一块被磨圆了角的鹅卵石。磨多大、磨哪个角都由你来定。创建一个圆角矩形下面的流程图展示了 RoundRect 的创建和绘制完整流程否是定义矩形区域Rect创建RoundRect对象是否需要不同圆角?使用统一圆角半径用setCorner设置各角半径左上角: TOP_LEFT_POS右上角: TOP_RIGHT_POS左下角: BOTTOM_LEFT_POS右下角: BOTTOM_RIGHT_POS创建Brush填充Canvas.drawRoundRect绘制填充创建Pen描边Canvas.drawRoundRect绘制边框最基本的创建方式是传入一个矩形区域和圆角半径import{common2D,drawing}fromkit.ArkGraphics2D;letrect:common2D.Rect{left:100,top:100,right:500,bottom:300};letroundRectnewdrawing.RoundRect(rect,50,50);这里有两个圆角半径参数xRadiiX 轴方向的圆角半径。值越大圆角越圆。yRadiiY 轴方向的圆角半径。为什么要分 X 和 Y 两个方向呢因为你可以做出椭圆形的圆角效果。如果 xRadii 和 yRadii 相等就是标准的圆角如果不等圆角就会变成椭圆弧。有个重要规则只有当 xRadii 和 yRadii 都大于 0 的时候圆角才会生效。如果你传了 0 或负数那创建出来的就是一个普通的直角矩形。复制一个圆角矩形从 API version 20 开始你可以用拷贝构造函数来复制一个已有的圆角矩形import{common2D,drawing}fromkit.ArkGraphics2D;letrect:common2D.Rect{left:100,top:100,right:500,bottom:300};letroundRectnewdrawing.RoundRect(rect,50,50);letroundRect2newdrawing.RoundRect(roundRect);roundRect2是roundRect的一个副本修改其中一个不会影响另一个。这在你需要基于一个基础样式创建多个变体时很有用。给每个角设置不同的半径setCorner这是 RoundRect 最灵活的功能。你可以单独给四个角设置不同的圆角半径import{drawing}fromkit.ArkGraphics2D;letroundRect:drawing.RoundRectnewdrawing.RoundRect({left:0,top:0,right:300,bottom:300},50,50);roundRect.setCorner(drawing.CornerPos.TOP_LEFT_POS,150,150);setCorner的第一个参数是角的位置用CornerPos枚举来指定TOP_LEFT_POS左上角TOP_RIGHT_POS右上角BOTTOM_LEFT_POS左下角BOTTOM_RIGHT_POS右下角后面两个参数是这个角在 X 和 Y 方向上的圆角半径。实际用途举例想做一个对话气泡效果只有左上角是尖的其他三个角是圆的letroundRectnewdrawing.RoundRect({left:0,top:0,right:200,bottom:100},10,10);roundRect.setCorner(drawing.CornerPos.TOP_LEFT_POS,0,0);// 左上角不要圆角想做一个标签页效果只有上面两个角是圆的letroundRectnewdrawing.RoundRect({left:0,top:0,right:200,bottom:50},10,10);roundRect.setCorner(drawing.CornerPos.BOTTOM_LEFT_POS,0,0);roundRect.setCorner(drawing.CornerPos.BOTTOM_RIGHT_POS,0,0);读取某个角的半径getCorner想知道某个角当前的圆角半径是多少用getCornerimport{drawing}fromkit.ArkGraphics2D;letroundRect:drawing.RoundRectnewdrawing.RoundRect({left:0,top:0,right:300,bottom:300},50,50);letcornerRadiusroundRect.getCorner(drawing.CornerPos.BOTTOM_LEFT_POS);console.info(getCorner---cornerRadius.x)console.info(getCorner---cornerRadius.y)返回的是一个Point对象x是 X 方向的半径y是 Y 方向的半径。移动圆角矩形offsetoffset方法可以让整个圆角矩形在画布上平移import{drawing}fromkit.ArkGraphics2D;letroundRect:drawing.RoundRectnewdrawing.RoundRect({left:0,top:0,right:300,bottom:300},50,50);roundRect.offset(100,100);offset(100, 100)表示向右移动 100px向下移动 100px。传负数就是往反方向移动。这个方法直接修改的是 RoundRect 对象本身的位置不会改变它的大小和圆角半径。怎么把 RoundRect 画出来创建好 RoundRect 之后你需要用 Canvas 来绘制它。基本流程是创建 RoundRect 对象创建 Brush 或 Pen用 Canvas 的drawRoundRect方法绘制import{RenderNode}fromkit.ArkUI;import{common2D,drawing}fromkit.ArkGraphics2D;classDrawingRenderNodeextendsRenderNode{draw(context:DrawContext){constcanvascontext.canvas;// 创建圆角矩形letroundRectnewdrawing.RoundRect({left:50,top:50,right:350,bottom:200},20,20);// 创建画刷letbrushnewdrawing.Brush();brush.setColor({alpha:255,red:100,green:150,blue:255});canvas.attachBrush(brush);// 绘制填充的圆角矩形canvas.drawRoundRect(roundRect);// 创建画笔画边框letpennewdrawing.Pen();pen.setColor({alpha:255,red:0,green:0,blue:0});pen.setStrokeWidth(2);canvas.attachPen(pen);canvas.drawRoundRect(roundRect);}}这段代码先用蓝色 Brush 填充圆角矩形再用黑色 Pen 描边做出了一个带边框的蓝色圆角卡片效果。实际应用场景下面的流程图展示了不同场景下圆角半径的选择策略小按钮/输入框卡片/对话框突出卡片/模态框头像/标签对话气泡标签页选择圆角半径UI元素类型4-8px轻微圆角12-16px标准圆角20-30px大圆角宽高一半: 圆形/胶囊形三圆角一直角setCorner设置一个角半径为0上两角圆下两角直setCorner设置下两角半径为0场景一卡片式布局现在几乎所有 APP 都用卡片式设计。用 RoundRect 可以轻松创建各种卡片// 标准圆角卡片letcardnewdrawing.RoundRect({left:20,top:20,right:380,bottom:200},12,12);// 大圆角卡片更胖的感觉letbigCardnewdrawing.RoundRect({left:20,top:20,right:380,bottom:200},24,24);// 胶囊按钮圆角半径等于高度的一半letcapsulenewdrawing.RoundRect({left:20,top:20,right:180,bottom:70},25,25);场景二头像框圆形头像框其实就是圆角半径足够大的正方形// 100x100 的正方形圆角半径 50就是圆形letavatarFramenewdrawing.RoundRect({left:0,top:0,right:100,bottom:100},50,50);场景三对话气泡微信风格的对话气泡一边是圆角一边有个小尖角letbubblenewdrawing.RoundRect({left:0,top:0,right:200,bottom:80},10,10);bubble.setCorner(drawing.CornerPos.TOP_LEFT_POS,0,0);// 左上角不圆场景四进度条背景圆角进度条的背景letprogressBgnewdrawing.RoundRect({left:20,top:100,right:380,bottom:120},10,10);圆角半径的选择建议4-8px轻微圆角适合小按钮、输入框12-16px标准圆角适合卡片、对话框20-30px大圆角适合突出的卡片、模态框等于宽高的一半圆形/胶囊形适合头像、标签注意事项API 版本RoundRect 从 API version 12 开始支持拷贝构造函数从 API version 20 开始。半径必须大于 0如果 xRadii 或 yRadii 小于等于 0圆角不会生效会变成普通矩形。物理像素所有尺寸单位都是物理像素 px。线程安全和其他 drawing 对象一样是单线程模型。半径不能超过短边的一半如果圆角半径超过了矩形短边长度的一半实际效果会被限制在短边的一半。小结RoundRect 是 drawing 模块里专门处理圆角矩形的工具类。它的核心功能就是创建圆角矩形然后你可以用setCorner给每个角设置不同的半径用offset来移动位置。虽然功能看起来简单但在实际 APP 开发中圆角矩形的使用频率非常高。掌握了 RoundRect你就能轻松实现各种卡片、按钮、对话框的绘制了。