HarmonyOS鸿蒙Next中如何给PixelMap设置圆角或生成圆形的PixelMap
HarmonyOS鸿蒙Next中如何给PixelMap设置圆角或生成圆形的PixelMap
需要设置地图定位点样式 let style: mapCommon.MyLocationStyle = { anchorU: 0.5, anchorV: 0.5, radiusFillColor: 0xffff0000, // icon为自定义图标资源，使用时需要替换，图标存放在resources/rawfile icon: '此处为网络获取的用户头像' }; mapController.setMyLocationStyle(style); MyLocationStyle 的icon样式就是图片的原始样式，所以需要将网络获取的PixelMap编辑为圆形
更多关于HarmonyOS鸿蒙Next中如何给PixelMap设置圆角或生成圆形的PixelMap的实战教程也可以访问 https://www.itying.com/category-93-b0.html
当前并不支持PixelMap的圆形裁剪操作。你可以尝试下三方组件CircleImageView可以将图片裁剪为圆形或者给图片设置边框。应该可以满足你的用户头像编辑修改的功能的诉求：
https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fcircleimageview
更多关于HarmonyOS鸿蒙Next中如何给PixelMap设置圆角或生成圆形的PixelMap的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
- 从PixelMap获取位图字节数组
const readBuffer = new ArrayBuffer(pixelBytesNumber);
pixelMap.readPixelsToBuffer(readBuffer).then(() => {
console.info('Succeeded in reading image pixel data.');
}).catch((error : BusinessError) => {
console.error('Failed to read image pixel data. And the error is: ' + error);
})
- 从文档中了解到ArrayBuffer中像素的数据格式
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5#readpixels7
当PixelMap的像素格式为RGB类型时，固定按照BGRA_8888格式从PixelMap读取。
- 故取出包含像素信息的ArrayBuffer后，对数据进行遍历，修改
const buffer: ArrayBuffer = ...; // 你的ArrayBuffer
const width: number = ...; // 图像的宽度
const height: number = ...; // 图像的高度
// 创建一个 Uint8ClampedArray 视图
const pixels = new Uint8ClampedArray(buffer);
// 打印像素数据
function printBGRA8888(pixels: Uint8ClampedArray, width: number, height: number): void {
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const offset = (y * width + x) * 4; // 计算当前像素的偏移量
const b = pixels[offset]; // 蓝色通道
const g = pixels[offset + 1]; // 绿色通道
const r = pixels[offset + 2]; // 红色通道
const a = pixels[offset + 3]; // alpha通道
// 打印像素的 BGRA 值
console.log(`Pixel at (${x},${y}): B=${b}, G=${g}, R=${r}, A=${a}`);
}
}
}
- 在对应像素点修改bgra数据，透明度改0，即可实现裁剪圆形的效果。（注意，修改后的ArrayBuffer需要通过深拷贝来创建新的PixelMap）
完整代码如下：
let info = img.getImageInfoSync()
let pixelBytesNumber = img.getPixelBytesNumber()
const readBuffer = new ArrayBuffer(pixelBytesNumber)
img.readPixelsToBufferSync(readBuffer)
let pixels = new Uint8ClampedArray(readBuffer)
let centerX = Math.floor(info.size.width / 2) // 圆心
let centerY = Math.floor(info.size.height / 2) // 圆心
let radius = Math.min(centerX) // 半径
let borderWidth = 1 // 描边
for (let y = 0; y < info.size.height; y++) {
for (let x = 0; x < info.size.width; x++) {
const dx = x - centerX
const dy = y - centerY
const distance = Math.sqrt(dx * dx + dy * dy)
const offset = (y * info.size.width + x) * 4
if (distance > radius + borderWidth) {
// 圆外
pixels[offset + 3] = 0
} else if (distance < radius - borderWidth) {
// 圆内
} else {
// 描边范围
pixels[offset] = 255
pixels[offset + 1] = 255
pixels[offset + 2] = 255
pixels[offset + 3] = 255
}
}
}
img.writeBufferToPixelsSync(pixels.buffer)
在HarmonyOS鸿蒙Next中，给PixelMap设置圆角或生成圆形的PixelMap可以通过PixelMapUtils类中的createCirclePixelMap方法实现。该方法接受一个PixelMap对象作为输入，并返回一个圆形的PixelMap。如果需要设置圆角，可以使用createRoundCornerPixelMap方法，该方法允许指定圆角的半径。以下是一个示例代码片段：
import image from '@ohos.multimedia.image';
import { PixelMapUtils } from '@ohos.multimedia.image';
let pixelMap: image.PixelMap; // 假设已经有一个PixelMap对象
// 生成圆形的PixelMap
let circlePixelMap = PixelMapUtils.createCirclePixelMap(pixelMap);
// 生成带有圆角的PixelMap
let roundCornerPixelMap = PixelMapUtils.createRoundCornerPixelMap(pixelMap, 50); // 50是圆角半径
这两个方法都返回一个新的PixelMap对象，原始PixelMap不会被修改。生成的PixelMap可以直接用于UI显示或其他图像处理操作。
