请教一个问题,如何在图片上写数字,使用arkts?

我有个问题,把一个大图片分隔成小图片后,我想在每个图片上写一个数字,用ArkTS如何写程序完成。可以用什么API。

我原来是用Java写的程序,是从图片上创建一个canvas,然后可以写字。

现在改用ArkTS,应该如何做?


UI
示例代码
2023-12-26 13:22:09
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Joshun

可以用ArkTS的​OffscreenCanvasRenderingContext2D​离屏绘制的​fillText​方法来实现,最后用它的​getPixelMap​方法或者​transferToImageBitmap​方法拿到绘制完的图像,大概像这样:

async function drawTextToImage(img: image.PixelMap, text: string): Promise<PixelMap> {
  const imageInfo = await  img.getImageInfo()
  const width = imageInfo.size.width
  const height = imageInfo.size.height
  const offC2d = new OffscreenCanvasRenderingContext2D(width, height, {
    antialias: true
  })
  // 配置 OffscreenCanvasRenderingContext2D
  offC2d.font = 'normal bolder 60px sans-serif'
  offC2d.fillStyle = 'rgb(255,0,0)'
  offC2d.textAlign = 'center'
  offC2d.textBaseline = 'middle'
  // 绘制图像
  offC2d.drawImage(img, 0, 0, width, height, 0, 0, width, height)
  // 绘制文字
  offC2d.fillText(text, width / 2, height / 2)
  return offC2d.getPixelMap(0, 0, width, height)
}
分享
微博
QQ
微信
回复
2023-12-26 14:48:04
相关问题
请教一个mysql问题有知道的吗?
796浏览 • 1回复 待解决
如果一个多级的获取数据的问题
1537浏览 • 1回复 待解决
请教一个sql查询需求?
850浏览 • 1回复 待解决
如何一个Component画到Pixelmap
91浏览 • 1回复 待解决
鸿蒙 如何实现一个渐变的圆形图片
10309浏览 • 2回复 已解决
如何一个Component画到Pixelmap呢?
565浏览 • 1回复 待解决
求教一个sql语句里传参怎么
1468浏览 • 1回复 待解决
mysql左连接的一个问题
565浏览 • 1回复 待解决
ArkTS中math库是哪一个?
514浏览 • 2回复 待解决
mysql的一个问题有懂的吗?
541浏览 • 1回复 待解决