如何在React Native Skia离屏渲染中为图片应用缩放与旋转？

因为drawImage()本身不支持直接传入缩放和旋转参数，你可以通过Canvas的变换矩阵来实现这类效果，具体操作如下：

• 保存Canvas初始状态
  在执行变换前调用canvas.save()，避免后续的变换操作影响其他绘制内容。

• 应用旋转与缩放变换
  先通过canvas.translate()把坐标原点移到图片中心（作为旋转的锚点），接着用canvas.rotate()设置旋转角度，再用canvas.scale()设置缩放比例，最后把坐标原点移回初始位置。

• 绘制图片
  调用drawImage()绘制图片，此时图片会自动应用之前设置的变换效果。

• 恢复Canvas状态
  调用canvas.restore()回到之前保存的状态，确保后续绘制不受当前变换的影响。

示例代码：

const offscreen = Skia.Surface.MakeOffscreen(ctx.width, ctx.height);
const canvas = offscreen.getCanvas();
const image = // 你的图片对象
const imgWidth = image.width();
const imgHeight = image.height();
const left = 50; // 图片初始x坐标
const top = 50; // 图片初始y坐标

// 保存Canvas初始状态
canvas.save();

// 执行变换：平移到图片中心 → 旋转45度 → 缩放1.5倍 → 平移回原锚点
canvas.translate(left + imgWidth/2, top + imgHeight/2);
canvas.rotate(45); // 旋转角度，单位为度
canvas.scale(1.5, 1.5); // x和y方向的缩放比例
canvas.translate(-imgWidth/2, -imgHeight/2);

// 绘制图片
canvas.drawImage(image, 0, 0);

// 恢复Canvas状态
canvas.restore();

offscreen.flush();
const finalImage = offscreen.makeImageSnapshot();

另外，你也可以通过创建自定义Paint对象，利用Paint.setMatrix()设置变换矩阵来实现，原理和Canvas变换一致，只是把变换逻辑转移到Paint中：

示例代码：

const offscreen = Skia.Surface.MakeOffscreen(ctx.width, ctx.height);
const canvas = offscreen.getCanvas();
const image = // 你的图片对象
const imgWidth = image.width();
const imgHeight = image.height();
const left = 50;
const top = 50;

const paint = Skia.Paint();
const matrix = Skia.Matrix();

// 构建变换矩阵：平移 → 旋转 → 缩放
matrix.setTranslate(left, top);
matrix.preRotate(45, left + imgWidth/2, top + imgHeight/2);
matrix.preScale(1.5, 1.5, left + imgWidth/2, top + imgHeight/2);

paint.setMatrix(matrix);
canvas.drawImage(image, 0, 0, paint);

offscreen.flush();
const finalImage = offscreen.makeImageSnapshot();

两种方法都能实现图片的缩放与旋转效果，你可以根据实际场景选择合适的方式。

内容的提问来源于stack exchange，提问作者Jemzzzz