2D 绘图的积木块Point、Rect、Color 这些基础类型如果你要做任何 2D 绘制相关的功能——画图表、画图标、做自定义 UI 组件——你一定会用到一些最基础的数据类型坐标点、矩形区域、颜色值。HarmonyOS 把这些基础类型统一放在了ohos.graphics.common2D这个模块里。它们就像乐高积木一样单独看很简单但组合起来能搭出各种复杂的东西。今天我们就来认识一下这些积木块看看它们在实际开发中怎么用。导入模块import{common2D}fromkit.ArkGraphics2D;所有 2D 绘图相关的基础类型都从这里导入。common2D 基础类型总览下面是 common2D 模块提供的基础类型及其用途common2D 模块颜色类型区域类型坐标类型Color 整数颜色Color4f 浮点颜色Rect 矩形区域Point 二维坐标Point3d 三维坐标ARGB 0-255ARGB 0.0-1.0left, top, right, bottomx, yx, y, zColorARGB 颜色描述Color是最常用的类型之一用来描述一个颜色。它用的是 ARGB 格式也就是透明度Alpha、红色Red、绿色Green、蓝色Blue四个分量。interfaceColor{alpha:number;// 透明度0~255 的整数red:number;// 红色分量0~255 的整数green:number;// 绿色分量0~255 的整数blue:number;// 蓝色分量0~255 的整数}每个分量都是 0~255 的整数。比如纯红色{ alpha: 255, red: 255, green: 0, blue: 0 }半透明蓝色{ alpha: 128, red: 0, green: 0, blue: 255 }完全透明{ alpha: 0, red: 0, green: 0, blue: 0 }在实际使用中你经常会把Color传给画笔Brush或者画布Canvas来设置绘制颜色。比如你要在一个矩形区域画一个半透明的红色遮罩letmaskColor:common2D.Color{alpha:100,red:255,green:0,blue:0};然后把这个颜色设置给 Brush再用 Canvas 画出来就行了。Color4f浮点数版本的颜色从 API version 20 开始还多了一个Color4f类型interfaceColor4f{alpha:number;// 透明度0.0~1.0 的浮点数red:number;// 红色分量0.0~1.0 的浮点数green:number;// 绿色分量0.0~1.0 的浮点数blue:number;// 蓝色分量0.0~1.0 的浮点数}跟Color的区别是Color4f用的是 0.0~1.0 的浮点数而不是 0~255 的整数。你可能会问为什么要有两种颜色表示方式简单说整数版本更直观、更常用适合 UI 开发浮点数版本精度更高适合图像处理和颜色计算。比如做颜色混合、渐变插值时浮点数计算更方便。举个例子纯红色用Color表示是{ alpha: 255, red: 255, green: 0, blue: 0 }用Color4f表示就是{ alpha: 1.0, red: 1.0, green: 0.0, blue: 0.0 }。半透明的话Color用alpha: 128Color4f用alpha: 0.5。Rect矩形区域Rect用来描述一个矩形区域通过左上角和右下角两个点来定义interfaceRect{left:number;// 左上角横坐标浮点数top:number;// 左上角纵坐标浮点数right:number;// 右下角横坐标浮点数bottom:number;// 右下角纵坐标浮点数}注意这里用的是屏幕物理像素单位 px不是 dp。在做自定义绘制时坐标系的原点 (0, 0) 在左上角x 轴向右增大y 轴向下增大。Rect在实际开发中的使用场景非常多裁剪区域告诉 Canvas 只在某个矩形区域内绘制绘制矩形画一个矩形、圆角矩形碰撞检测判断一个点是否在某个区域内图片绘制区域指定图片的绘制位置和大小比如你要在画布上画一个 200x100 的矩形左上角在 (50, 50)letrect:common2D.Rect{left:50,top:50,right:250,// 50 200bottom:150// 50 100};这里有个小细节right和bottom是矩形区域外边界的坐标不是矩形的宽高。所以right left 宽度bottom top 高度。这个跟某些 UI 框架的Rect定义不一样别搞混了。Point二维坐标点Point表示一个二维平面上的坐标点interfacePoint{x:number;// 横坐标浮点数y:number;// 纵坐标浮点数}很简单就是 x 和 y 两个浮点数。用在很多地方路径绘制的起点、触摸事件的坐标、图形变换的锚点等。比如你要从 (100, 200) 画一条线到 (300, 400)letstartPoint:common2D.Point{x:100,y:200};letendPoint:common2D.Point{x:300,y:400};然后把这两个点传给 Path 的moveTo和lineTo方法就行了。Point3d三维坐标点Point3d继承自Point多了一个 z 轴坐标interfacePoint3dextendsPoint{z:number;// z 轴坐标浮点数}这个在 3D 场景里用得比较多比如空间坐标、3D 变换等。在纯 2D 绘制中一般用不到。基础类型组合应用示例下面是使用这些基础类型绘制自定义进度条的流程定义 Rect 区域背景矩形 bgRect填充矩形 fillRect定义 Color 颜色背景颜色 灰色填充颜色 蓝色创建 Brush 画笔设置画笔颜色绑定到 Canvas绘制背景矩形绘制填充矩形完成进度条坐标系说明原点 0,0 在左上角X 轴向右增大Y 轴向下增大实际场景画一个自定义进度条让我们把这些类型组合起来看看在实际开发中怎么用。假设你要画一个带背景的进度条import{common2D}fromkit.ArkGraphics2D;// 进度条的背景区域letbgRect:common2D.Rect{left:50,top:300,right:750,bottom:340};// 进度条的填充区域假设进度 60%letprogress:number0.6;letfillRect:common2D.Rect{left:50,top:300,right:50(750-50)*progress,// 50 700 * 0.6 470bottom:340};// 背景颜色灰色letbgColor:common2D.Color{alpha:255,red:200,green:200,blue:200};// 填充颜色蓝色letfillColor:common2D.Color{alpha:255,red:66,green:135,blue:245};你看就是用Rect定义两个矩形区域用Color定义两种颜色然后交给 Canvas 去绘制。这些基础类型虽然简单但它们是所有 2D 绘制操作的基础。使用注意事项单位是物理像素 pxcommon2D 里的所有坐标和尺寸都是 px 单位不是 dp。如果你要适配不同屏幕密度需要自己做转换。Color 的值范围是 0~255不是 0~1。如果你习惯 CSS 的 rgba(255, 0, 0, 1.0) 写法记得转换一下 alpha 值。Rect 的 right/bottom 是边界坐标不是宽高。right - left才是宽度bottom - top才是高度。Color4f 是 API 20 才有的如果你的 APP 需要支持较老的系统版本就用Color。小结common2D模块提供了 2D 绘图最基础的数据类型Color颜色、Color4f浮点颜色、Rect矩形区域、Point坐标点、Point3d三维坐标点。它们本身很简单但在实际开发中会被大量使用。把这些类型搞清楚后面学 Canvas、Path、Brush、Pen 这些绘制 API 时就会顺畅很多因为它们的方法参数基本都是这些类型。