HarmonyOS 鸿蒙Next中pixelmap的旋转导致图片大小发生变化问题

HarmonyOS 鸿蒙Next中pixelmap的旋转导致图片大小发生变化问题 我有一个需求对pixelmap进行旋转，通过官方文档可知可以调用pixelmap.rotate或者rotateSync方法，当旋转角度=90的倍数时可以正常旋转，但是如果非90的倍数，比如30,45,20等角度时，展示效果上确实能够旋转，但是因为pixelmap旋转非90的倍数时图片会超出父元素或者屏幕的宽度，此时pixelmap会默认缩小宽高，导致旋转的同时宽高缩小。如何解决这样现象？也就是旋转的同时不缩小。

目前我尝试采用的方案有：1采用UI层面的转换，调整Image的rotate属性，但是这种方式只做到了视觉效果，进行组件截图时仍然会导致截图不全

请问还有其他更好解决方案吗？我需要对旋转之后的pixelmap进行截图


更多关于HarmonyOS 鸿蒙Next中pixelmap的旋转导致图片大小发生变化问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

如果希望大小不发生变化的话，可以在旋转后再对旋转后的图片执行一次缩放操作

更多关于HarmonyOS 鸿蒙Next中pixelmap的旋转导致图片大小发生变化问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用pixelmap进行旋转操作时，图片的宽高尺寸会随旋转角度变化。例如90°或270°旋转会交换宽高值，导致像素数据重新排列，存储大小可能改变。这是由于旋转后图像矩阵变换，像素分布调整所致。可通过获取旋转后的ImageInfo检查尺寸变化，使用PixelMap的createRotation方法处理。

在HarmonyOS Next中，PixelMap旋转非90度倍数时确实会因边界适配自动缩放。针对你的截图需求，建议采用以下方案：

  1. 手动计算旋转后尺寸并预分配缓冲区
    使用Matrix2D计算旋转后的实际边界尺寸，通过Image.createPixelMap()创建对应大小的空白PixelMap，再利用Canvas绘制旋转后的图像。示例：

    let matrix = new Matrix2D();
matrix.rotate(angle); // 非90倍数的角度
let rotatedWidth = Math.abs(width * matrix[0]) + Math.abs(height * matrix[1]);
let rotatedHeight = Math.abs(width * matrix[3]) + Math.abs(height * matrix[4]);

// 创建目标PixelMap
let rotatedPixelMap = await Image.createPixelMap(initializationOptions);
// 通过Canvas绘制旋转图像
let canvasRenderingContext = canvas.getContext('2d');
canvasRenderingContext.drawPixelMap(originalPixelMap, matrix);

  2. 结合离屏渲染与尺寸补偿
    在旋转前先将原图放置于足够大的离屏画布（例如2倍原图尺寸），旋转后裁剪有效区域，避免自动缩放：

    // 创建扩展画布
let offscreenCanvas = new OffscreenCanvas(width * 2, height * 2);
let ctx = offscreenCanvas.getContext('2d');
// 将图像绘制在画布中心后旋转
ctx.translate(width, height);
ctx.rotate(angle * Math.PI / 180);
ctx.drawImage(originalPixelMap, -width/2, -height/2);
// 提取旋转后有效区域
let rotatedData = ctx.getImageData(0, 0, rotatedWidth, rotatedHeight);

此方案能保持原始分辨率，且截图时可完整捕获旋转后内容。注意计算尺寸时需包含所有像素，避免裁剪丢失。

回到顶部