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

本文涉及的产品
无影云电脑个人版,1个月黄金款+200核时
轻量应用服务器 2vCPU 4GiB,适用于搭建容器环境
资源编排,不限时长
简介: 本文介绍了基于鸿蒙系统开发的一款个人字典与创作辅助应用,重点实现海报生成功能。通过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
分享
相关文章
iOS App 上架流程图文教学
在上架App 之前必须先准备好开发者帐号,但申请开发者帐号因法兰克早在之前已经申请好了,故就跳过此步骤,直接从产生凭证到上传App开始讲起。首先,要将自己辛苦写好的App 送审的话,则要依序做完下列几件事情即可。
|
1月前
|
flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
基于最新版flutter3.27+dart3.x+Getx+mediaKit原创实战研发抖音app带货商城项目。集成了直播+短视频+聊天三大功能模块。实现了类似抖音app首页全屏沉浸式联动左右滑动页面模块、上下滑动短视频。
65 1
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP(附带源码)
本项目基于HarmonyOS NEXT 5.0开发了一款影院应用程序,主要实现了电影和影院信息的展示功能。应用包括首页、电影列表、影院列表等模块。首页包含轮播图与正在热映及即将上映的电影切换显示;电影列表模块通过API获取电影数据并以网格形式展示,用户可以查看电影详情;影院列表则允许用户选择城市后查看对应影院信息,并支持城市选择弹窗。此外,项目中还集成了Axios用于网络请求,并进行了二次封装以简化接口调用流程,同时添加了请求和响应拦截器来处理通用逻辑。整体代码结构清晰,使用了组件化开发方式,便于维护和扩展。 该简介概括了提供的内容,但请注意实际开发中还需考虑UI优化、性能提升等方面的工作。
147 11
【Android App】实战项目之仿抖音的短视频分享App(附源码和演示视频 超详细必看)
【Android App】实战项目之仿抖音的短视频分享App(附源码和演示视频 超详细必看)
470 1
【Android App】实战项目之仿微信的视频通话(附源码和演示 超详细必看)
【Android App】实战项目之仿微信的视频通话(附源码和演示 超详细必看)
763 2
用swift开发ios移动端app应用初体验
直接跟着 apple 官方的 SwiftUI 教程跑的,写惯了 javascript 奔放的代码,很多语法理解起来还是有点费劲
127 1

相关实验场景

更多