1# 图片绘制（ArkTS） 2 3<!--Kit: ArkGraphics 2D--> 4<!--Subsystem: Graphics--> 5<!--Owner: @hangmengxin--> 6<!--Designer: @wangyanglan--> 7<!--Tester: @nobuggers--> 8<!--Adviser: @ge-yafang--> 9 10位图是一种用于在内存中存储和表示图像的数据结构，它是一个未经过压缩的像素集合，而JPEG或PNG等格式的图片是压缩格式的，两者并不相同。如果需要将JPEG或PNG绘制到屏幕上，需要先解码成位图格式，具体可参考[图片处理服务（Image Kit）](../media/image/image-overview.md)图片解码相关章节。 11 12 13目前Drawing（ArkTS）中位图绘制需要依赖PixelMap，它可以用于读取或写入图像数据以及获取图像信息。详细的API介绍请参考[PixelMap](../reference/apis-image-kit/arkts-apis-image-PixelMap.md)。 14 15 161. 创建PixelMap。 17 18 有多个API接口可以创建PixelMap，下文以createPixelMapSync()为例。更多创建方式和接口请见[@ohos.multimedia.image (图片处理)](../reference/apis-image-kit/arkts-apis-image.md)模块。 19 20 createPixelMapSync()函数接受两个参数，第一个参数为图像像素数据的缓冲区，用于初始化PixelMap的像素。第二个参数为创建像素的属性，包括透明度、尺寸、缩略值、像素格式和是否可编辑。 21 22 ```ts 23 // 图片宽高 24 let width = 600; 25 let height = 400; 26 // 字节长度，RGBA_8888每个像素占4字节 27 let byteLength = width * height * 4; 28 const color: ArrayBuffer = new ArrayBuffer(byteLength); 29 let bufferArr = new Uint8Array(color); 30 for (let i = 0; i < bufferArr.length; i += 4) { 31 // 遍历并编辑每个像素，从而形成红绿蓝相间的条纹 32 bufferArr[i] = 0x00; 33 bufferArr[i+1] = 0x00; 34 bufferArr[i+2] = 0x00; 35 bufferArr[i+3] = 0xFF; 36 let n = Math.floor(i / 80) % 3; 37 if (n == 0) { 38 bufferArr[i] = 0xFF; 39 } else if (n == 1) { 40 bufferArr[i+1] = 0xFF; 41 } else { 42 bufferArr[i+2] = 0xFF; 43 } 44 } 45 // 设置像素属性 46 let opts: image.InitializationOptions = { editable: true, pixelFormat: image.PixelMapFormat.RGBA_8888, size: { height: height, width: width }}; 47 // 创建PixelMap 48 let pixelMap : image.PixelMap = image.createPixelMapSync(color, opts); 49 ``` 50 512. （可选）编辑PixelMap中的像素。如果没有编辑像素的需求，此步骤可以省略。 52 53 有多个API接口可以编辑PixelMap中的像素，下文以writePixelsSync()为例。更多方式和接口的使用可见[PixelMap](../reference/apis-image-kit/arkts-apis-image-PixelMap.md)。 54 55 ```ts 56 // 设置编辑区域的宽高 57 let innerWidth = 400; 58 let innerHeight = 200; 59 // 编辑区域的字节长度，RGBA_8888每个像素占4字节 60 let innerByteLength = innerWidth * innerHeight * 4; 61 const innerColor: ArrayBuffer = new ArrayBuffer(innerByteLength); 62 let innerBufferArr = new Uint8Array(innerColor); 63 for (let i = 0; i < innerBufferArr.length; i += 4) { 64 // 编辑区域的像素都设置为黑白相间条纹 65 let n = Math.floor(i / 80) % 2; 66 if (n == 0) { 67 innerBufferArr[i] = 0x00; 68 innerBufferArr[i+1] = 0x00; 69 innerBufferArr[i+2] = 0x00; 70 } else { 71 innerBufferArr[i] = 0xFF; 72 innerBufferArr[i+1] = 0xFF; 73 innerBufferArr[i+2] = 0xFF; 74 } 75 innerBufferArr[i+3] = 0xFF; 76 } 77 // 设置编辑区域的像素、宽高、偏移量等 78 const area: image.PositionArea = { 79 pixels: innerColor, 80 offset: 0, 81 stride: innerWidth * 4, 82 region: { size: { height: innerHeight, width: innerWidth }, x: 100, y: 100 } 83 }; 84 // 编辑位图，形成中间的黑白相间条纹 85 pixelMap.writePixelsSync(area); 86 ``` 87 883. 绘制PixelMap。 89 90 绘制PixelMap时需要通过Canva相关接口绘制位图，下文以drawImage()为例。更多方式和接口的使用请见[drawing.Canvas](../reference/apis-arkgraphics2d/arkts-apis-graphics-drawing-Canvas.md)。 91 92 drawImage()函数接受4个参数，第一个就是上文中创建的PixelMap，第二个是绘制图片位置的左上角x轴坐标，第三个是左上角y轴坐标，第四个为采样选项对象，默认为不使用任何参数构造的原始采样选项对象。 93 94 ```ts 95 canvas.drawImage(pixelMap, 0, 0); 96 ``` 97 98 绘制效果如下： 99 100  101 102<!--RP1--> 103## 相关实例 104 105针对Drawing(ArkTS)的开发，有以下相关实例可供参考： 106 107- [ArkTSGraphicsDraw (API14)](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/DocsSample/Drawing/ArkTSGraphicsDraw) 108<!--RP1End-->
