鸿蒙中的自定义绘制效果（一）

一、场景场景说明ArkUI组件可直接绘制想要的元素或效果但有局限性自定义图形有些自定义图形或效果无法用ArkUI组件满足Drawing实现灵活的自定义绘制效果Drawing vs ArkUI组件对比项ArkUI组件Drawing使用方式直接使用组件需自定义绘制灵活性有限高上屏显示直接上屏需依靠其他模块显示二、绘制能力范围及实现流程ArkGraphics 2D基于2D图像渲染引擎提供三大核心能力能力说明画布操作裁剪、旋转、缩放等绘制效果画刷Brush、画笔Pen实现填充和描边图元绘制基础图元的绘制矩形、圆形、路径等图形绘制的过程与实际作画的过程相似主要分为4个步骤步骤1创建画布必选 ↓ 步骤2进行画布操作可选 ↓ 步骤3设置绘制效果可选 ↓ 步骤4绘制图元必选各步骤详解步骤名称必选说明1创建画布必选图形绘制的承载最基本最关键的步骤2画布操作可选裁剪、旋转、缩放等操作3绘制效果可选画刷(Brush)填充内部区域画笔(Pen)描边轮廓4绘制图元必选绘制基础图元矩形、圆形、路径等说明不论多么复杂的图形都是基础图元的不同组合。三、显示绘制结果基于画布完成绘制后还需要将绘制结果上屏显示才能完整实现屏幕上可见的图形UI内容。两种显示方式方式语言说明RenderNodeArkTS通过RenderNode获取Canvas绘制结果由RenderNode上屏显示XComponentC/C创建Canvas绘制将结果拷贝到buffer由XComponent上屏显示四、与Canvas画布组件的关系Canvas组件也具有自绘制的能力目前有两套APIAPI说明CanvasRenderingContext2D按照W3C标准封装可快速复用Web应用绘制逻辑OffscreenCanvasRenderingContext2D离屏Canvas绘制DrawingRenderingContext另一套绘制API两套API的适用场景API适用场景CanvasRenderingContext2DWeb应用和游戏、快速原型设计、数据可视化、在线绘图板、教学工具、创意应用等Native Drawing专业图形处理软件、桌面或移动应用等对性能要求较高的场景性能对比对比项Canvas组件Native Drawing Canvas绘制能力本质相同本质相同性能可能存在卡顿、掉帧性能更优硬件接近性较低更高适用场景通用场景高性能、复杂绘制场景说明Canvas组件的底层也使用了Native Drawing接口来实现绘制功能在绘制能力上两者没有本质的区别。但因为多层封装的实现过程使得Canvas组件在硬件接近性方面不如Native Drawing Canvas。五、其他限制项说明单位图形绘制过程中使用的单位为像素px鸿蒙图形绘制通过ArkGraphics 2D提供画布操作、绘制效果、图元绘制三大能力流程为创建画布→画布操作→设置绘制效果→绘制图元绘制结果可通过RenderNodeArkTS或XComponentC/C上屏显示Canvas组件底层使用Native Drawing但多层封装可能影响性能高性能场景推荐直接使用Native Drawing Canvas。