用arkts写鸿蒙app:简单的海报生成

本文涉及的产品
无影云电脑企业版,4核8GB 120小时 1个月
无影云电脑个人版,1个月黄金款+200核时
轻量应用服务器 4vCPU 16GiB,适用于搭建游戏自建服
简介: 本文介绍了基于鸿蒙系统开发的一款个人字典与创作辅助应用,重点实现海报生成功能。通过Canvas画布组件完成图片绘制、文字填充等操作,并利用鸿蒙的沙盒机制和权限管理将生成的海报保存至本地。文中详细展示了代码实现步骤,包括渲染逻辑、数据导出及文件存储过程,同时提供了相关API文档链接以便参考。此项目不仅满足了作者个人兴趣需求,还体现了鸿蒙系统的独特特性和开发潜力。

鸿蒙应用开发的sdk 现在已经来到了5.0.2(api:14).离我上次写鸿蒙应用(那时候还是9、10)已经过去一段时间不到一年版本已经大跃进里面大部分api已经陌生


现在因为个人兴趣驱动想要开发一个方便自己查找字典创作app市面上app只有一个《西窗烛》做了鸿蒙兼容预计这个app涉及一些功能 列出来

           1.     下载网络资料(涉及网络请求下载文件权限

           2.     个人作品本地化存储涉及数据库操作sqlite3

           3.     作品海报生成 涉及画布渲染生成以及图片存储

           4.     作品AI朗读 涉及语言播放,AI朗读服务


等等细想其实预想的一些功能可以充分利用鸿蒙的很酷的特性不过现在只想方便一下自己兴趣所以那么多话不多说开始第一个功能海报生成


海报生成功能根据查阅文档下来需要以下功能实现首先canvas画布类似htmlcanvas这是一个UI组件海报编辑器页面肯定这个组件为主

代码如下

let settings: RenderingContextSettings = new RenderingContextSettings(true);
this.context = new CanvasRenderingContext2D(settings)
build() {
    Canvas(this.context)
      .width('100%').height('100%')
      .backgroundColor(Color.White)
      .onReady(() => {
          let bi = this.context
          //...code
      })
  }

 

接下来考虑下如何画布上加东西这些逻辑应该onready事件完成

画布写法html差别不大没学过可以html练手高级画布应用也是建议先在html文件实现逻辑渲染逻辑稳定下来翻译ets去。在预览器(previewer)中是可以预览canvas渲染后的效果。

填充背景

bi.fillStyle = '#CDCDCD'
bi.fillRect(0, 0, camvas.width, canvas.height)

画几何图形:

bi.fillStyle = '#CDCDCD'
bi.fillRect(0, 0, 200, 150)

填写文字

//简单渲染hello world
bi.font = '30px sans-serif'
bi.fillStyle ='#333';
bi.fillText("Hello World!", 20, 100)

canvas api链接https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V14/ts-canvasrenderingcontext2d-V14

 

涉及一些注意事项

渲染图片的代码要需要注意单位转换(有内置函数px2vp)。px => vp)

单位转换文档链接点击这里https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V14/ts-pixel-units-V14?catalogVersion=V14

 

 

接下来关键地方就是画完画布数据如何保存手机上

安卓图片保存需要加入图片操作权限鸿蒙一环节的细度上做出不同创新创建沙盒机制最小化权限影响

canvas画布数据可以导出几个不同数据抽象类imagedatadataurlimage pixelmap)

首先海报编辑器一块加个按钮(这个按钮不同于普通的按钮),加个点击事件

SaveButton({ text: SaveDescription.SAVE_IMAGE
          ,icon: SaveIconStyle.FULL_FILLED }).onClick(async (e:ClickEvent,result:SaveButtonOnClickResult) => {
            // console.log( `${JSON.stringify(result)}`)
            if(result == SaveButtonOnClickResult.SUCCESS){
                let imgdata = this.content.getImageData()
                //await saveToFile(  imgdata,getContext(this))
            }
          }).offset({x:0,y:-100})

点击事件触发就会弹出权限请求一定的时间内再次操作不会反复请求拿到用户同意结果 可以进行下一步代码saveToFile函数自己封装下面介绍函数具体代码

最后一步就是文件权限有关操作鸿蒙系统文件存储的机制我们需要认真了解具体文档链接https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V14/core-file-kit-intro-V14内容比较多需要耐心浏览


获得用户权限这个自定义的函数saveToFile保存图片到文件的逻辑

这个逻辑一次性用到3核心一个图片访问辅助二是文件读写包最后是图片压缩处理

//引用的包
import { fileIo as fs, ReadOptions} from '@kit.CoreFileKit';
import { image } from '@kit.ImageKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
// 请求授权图片保存到本地
export async function saveToFile(pixelMap: image.PixelMap, context: Context): Promise<void> {
  try {
    const phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
    const filePath = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png');
    const imagePacker = image.createImagePacker();
    /* api版本13 以上用这个API */
    const imageBuffer = await imagePacker.packToData(pixelMap, {
      format: 'image/png',
      quality: 100
    });
    const mode = fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE;
    fd = (await fs.open(filePath, mode)).fd;
    await fs.truncate(fd);
    await fs.write(fd, imageBuffer);
    console.log(`image buffer length as ${imageBuffer.byteLength}`)
    console.log( `save path as ${filePath}`);
  } catch (err) {
    hilog.error(0x0000, "utils", 'saveToFile error:', JSON.stringify(err) ?? '');
  } finally {
    if (fd) {
      fs.close(fd);
    }
  }
}

 

就可以大功告成完善下其他细节run一下电脑的手机模拟器看到运行效果如自己所料成就满满。


最后想说例子只是简单借用画布组件生成数据保存本地逻辑实际中代码这个精深些,比如画布编辑器抽象封装(包括支持印章图片拖曳),还有渲染性能不足可以借用离线画布放在worker线程上跑,读取相册图片作为画布背景再二次加工等等更多代码其实官方代码案例其实有一个api在最新版本不能用了更新不算及时

,参考链接:https://gitee.com/harmonyos_samples/watermark


其他功能后续的开发中将我的开发体验感受同步文章这个还蛮考验自律。希望大家有机会跟我一样持着“干中学学中干”的理念,

目录
打赏
0
1
4
0
1
分享
相关文章
Harmony OS开发-ArkTS三
本文介绍了ArkTS的基础语法,包括常量、命名规则、数组及其常用函数,以及函数的定义与使用,涵盖匿名函数和箭头函数的区别。通过具体示例,帮助读者快速掌握ArkTS编程技巧,踏上Harmony OS开发之旅。君志所向,一往无前!
39 1
Harmony OS开发-ArkTS三
【HarmonyOS——ArkTS语言】面向对象【合集】
【ArkTS语言-HarmonyOS】面向对象【合集】本次实验,我们在utils目录中创建了MyClass.ets和MyConfig.ets文件,在此过程中定义了Config接口和Color枚举。同时,我们实现了Auth类及其子类WechatAuth和AlipayAuth,从而深入了解了面向对象编程在HarmonyOS开发中的应用。在实验中,我们学会了如何遵循接口规范来实现类的功能,并通过继承机制来扩展类的行为。通过这些实践,我们完成了用户创建、密码设置以及登录操作。
69 3
|
2月前
|
UED
【HarmonyOS——ArkTS语言】计算器的实现【合集】
【ArkTS语言-HarmonyOS】计算器的实现【合集】组件,点击等号后计算函数高效解析表达式并给出准确结果,达成核心功能要求。错误提示不够详尽,难以助力用户快速定位输入错误;响应式设计不足,在不同屏幕规格下适配性差。总体而言,本次实验已成功构建起基本功能框架,后续将针对上述问题深入探究优化方案,不断打磨细节,在完善计算器功能与提升用户体验的道路上持续精进,进而提升自身编程与应用开发的综合能力水平。利用按钮组件顺利完成布局设计,数字、运算符及功能按钮排列有序,操作逻辑清晰直观。
108 2
原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
原生鸿蒙版小艺APP成功接入DeepSeek-R1,为HarmonyOS用户带来更智能高效的交互体验。通过此次升级,用户在编程、学习和工作中的问题可迅速获得专业解答。同时,此举为HarmonyOS应用开发者提供了新的技术参考,激发了更多创新应用场景的开发,助力打造差异化竞争优势,推动HarmonyOS生态繁荣发展。
226 68
原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
鸿蒙开发:ArkTs语言注释
关于注释,有一点需要注意,那就是,注释,不会被编译器或解释器执行,而本小节的重点并不是简单的教大家注释如何去写,而是在实际的项目中,我们能够真正的把注释投入到实际的开发中。
40 18
鸿蒙开发:ArkTs语言注释
鸿蒙开发:ArkTs语言变量和常量
变量是一种用于存储数据的容器,并且其存储的数据值可以在程序执行过程中被改变,变量通常有一个名字(标识符),用于在程序中引用它。
HarmonyOS NEXT 实战系列01-ArkTS基础
ArkTS是HarmonyOS应用开发的首选语言,基于TypeScript扩展而成,保留了TS风格并强化静态检查与分析能力,提升程序稳定性和性能。它支持声明式UI开发、状态管理等功能,简化应用构建。语法涵盖变量、常量、数组、对象、语句(如if、switch)、函数(含箭头函数与泛型)、类和模块等特性,同时提供联合类型、字面量联合类型及枚举类型等丰富类型支持,助力开发者高效编写高质量代码。
HarmonyOS ArkTS声明式UI开发实战教程
本文深入探讨了ArkTS作为HarmonyOS生态中新一代声明式UI开发框架的优势与应用。首先对比了声明式与命令式开发的区别,展示了ArkTS如何通过直观高效的代码提升可维护性。接着分析了其核心三要素:数据驱动、组件化和状态管理,并通过具体案例解析布局体系、交互组件开发技巧及复杂状态管理方案。最后,通过构建完整TODO应用实战,结合调试优化指南,帮助开发者掌握声明式UI设计精髓,感受ArkTS的独特魅力。文章鼓励读者通过“破坏性实验”建立声明式编程思维,共同推动HarmonyOS生态发展。
19 3
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
60 2
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
92 11
APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作