HarmonyOS 鸿蒙Next CanvasRenderingContext2D.drawImage如何绘制成圆形

发布于 1周前 作者 phonegap100 来自 鸿蒙OS

HarmonyOS 鸿蒙Next CanvasRenderingContext2D.drawImage如何绘制成圆形

请问使用canvas CanvasRenderingContext2D.drawImage() 绘制自定义图片时，是否有api可以将图片截成圆形。文档中没有看到相关内容。

canvasContext.reset()
//左
let pixelMap1 = BlendIconGenerator.getPixelMap(1)
canvasContext.drawImage(pixelMap1, 0, 16, 25, 25)
//下
let pixelMap2 = BlendIconGenerator.getPixelMap(2)
canvasContext.drawImage(pixelMap2, 12, 28, 25, 25)
//右
let pixelMap3 = BlendIconGenerator.getPixelMap(3)
canvasContext.drawImage(pixelMap3, 24, 16, 25, 25)
//上
let pixelMap4 = BlendIconGenerator.getPixelMap(4)
canvasContext.drawImage(pixelMap4, 12, 2, 25, 25)
canvasContext.save()<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

Harmonyos Next教程
2 回复

1、不支持PixelMap的圆形裁剪操作

2、图片截取成圆形 可使用 borderRadius 设置边框的圆角 参考地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-border-V5#borderradius

Image($r('app.media.background')).backgroundColor(Color.Red).width(100).height(100).borderRadius(50)<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

在HarmonyOS的鸿蒙系统中，使用CanvasRenderingContext2D.drawImage方法将图像绘制成圆形，通常需要结合一些额外的步骤来实现，因为drawImage本身仅支持矩形绘制。你可以通过创建一个圆形路径，并使用clip方法将绘制区域裁剪为圆形，然后在此区域内绘制图像来实现。

具体步骤如下：

  1. 获取CanvasRenderingContext2D对象。
  2. 使用beginPath和arc方法创建一个圆形路径。
  3. 调用clip方法将绘制区域裁剪为圆形。
  4. 调用drawImage方法将图像绘制到Canvas上，此时图像将被裁剪为圆形显示。

示例代码（伪代码，需根据实际环境调整）：

let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(cx, cy, radius, 0, Math.PI * 2, true); // cx, cy为圆心坐标，radius为半径
ctx.clip();
ctx.drawImage(image, dx, dy, dw, dh); // dx, dy为目标位置，dw, dh为目标尺寸

请注意，drawImage的参数dx, dy, dw, dh应确保图像在圆形区域内完全可见，否则会被裁剪。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部