当前位置: 首页 > news >正文

鸿蒙OpenHarmony开发实战:【MiniCanvas】

介绍

基于OpenHarmony的Cavas组件封装了一版极简操作的MiniCanvas,屏蔽了原有Canvas内部复杂的调用流程,支持一个API就可以实现相应的绘制能力,该库还在继续完善中,也欢迎PR。

使用说明
  1. 添加MiniCanvas依赖

    在项目entry目录执行如下命令安装MiniCanvas库:

    npm install git+https://gitee.com/ark-ui/MiniCanvas.git
  2. 引入MiniCanvas

    import { MiniCanvas, Paint, ICanvas } from '@ohos/mini_canvas'
  3. 使用MiniCanvas

    @Entry @Component struct TestMiniCanvas {build() {Column() {MiniCanvas({onDraw: (canvas) => {}})}.size({width: "100%", height: "100%"})}
    }
  4. MiniCanvas绘制

    // import { MiniCanvas, Paint, ICanvas } from '@ohos/mini_canvas'
    // 源码方式引入
    import { MiniCanvas, Paint } from "./mini_canvas"@Entry @Component struct TestMiniCanvas {build() {Column() {MiniCanvas({// 在onDraw()方法内执行绘制onDraw: (canvas) => {// 创建画笔let paint = new Paint()// 绘制直线paint.setColor("#FF0000");paint.setStrokeWidth(5);canvas.drawLine(10, 10, 280, 10, paint);// 绘制圆以及圆环canvas.drawCircle(50, 50, 25, paint);paint.setStroke(true);paint.setStrokeWidth(3);canvas.drawCircle(250, 50, 25, paint);// 绘制椭圆以及椭圆环paint.setStroke(false);canvas.drawOval(20, 100, 150, 50, paint)paint.setStroke(true);paint.setColor(Color.Pink.toString())canvas.drawOval(190, 100, 150, 50, paint)// 绘制矩形paint.setStroke(false)canvas.drawRect(20, 180, 150, 50, paint)paint.setStroke(true)paint.setStrokeWidth(5)canvas.drawRect(190, 180, 150, 50, paint)// 绘制圆角矩形paint.setStroke(false);canvas.drawRoundRect(20, 250, 150, 50, 10, paint)paint.setStroke(true);canvas.drawRoundRect(190, 250, 150, 50, 10, paint)// 绘制圆弧canvas.drawArc(80, 330, 40, 0, 135, paint);paint.setStroke(false);canvas.drawArc(250, 330, 40, 0, 135, paint);// 绘制图片let bitmap = new ImageBitmap("pages/test.jpg")canvas.drawImage(bitmap, 10, 10, 800, 600, 20, 400, 320, 160, paint)},// 设置画布的属性attribute: {id: "mini_canvas",width: "100%",height: "100%",background: "#ffffff",clickListener: (event) => {console.log("onClicked: " + JSON.stringify(event));},touchListener: (event) => {console.log("onTouched: " + JSON.stringify(event));}},})}.size({width: "100%", height: "100%"})}
    }

鸿蒙知识已更新gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md可前往参考学习。

鸿蒙OpenHarmony-ArkUI声明式UI开发.png

  1. 运行结果

    sample

鸿蒙值得开发者入行

为什么这么说?市场是决定人力需求的,数据说话最管用:

1、鸿蒙其全栈自研,头部大厂商都陆续加入合作开发鸿蒙原生应用——人才需求上涨

2、鸿蒙作为新系统、新技术,而现在市面上技术人才少——高薪招聘开启

3、鸿蒙1+8+N生态,不仅只有应用开发;还有车载、数码、智能家居、家电等——就业范围广

4、纯血鸿蒙,目前没有多少人熟悉。都处于0基础同一起跑线——无行业内卷

开发者最需要什么?岗位多、薪资高、不内卷、行业竞争低。而当下的鸿蒙恰恰符合要求。

那么这么好的鸿蒙岗位,应聘要求都很高吧?其实不然鸿蒙作为新出的独立系统,其源头上大家都处于同一水平线上,一开始的技术要求都不会很高,毕竟面试官也是刚起步学习。招聘要求示例:

从信息看出,几乎应职要求是对标有开发经验的人群。可以说鸿蒙对开发者非常友好,尽管上面没提鸿蒙要求,但是面试都会筛选具有鸿蒙开发技能的人。我们程序员都知道学习开发技术,最先是从语言学起,鸿蒙语言有TS、ArkTS等语法,那么除了这些基础知识之外,其核心技术点有那些呢?下面就用一张整理出的鸿蒙学习路线图表示:

从上面的OpenHarmony技术梳理来看,鸿蒙的学习内容也是很多的。现在全网的鸿蒙学习文档也是非常的少,下面推荐一些:完整内容可在头像页保存,或这qr23.cn/AKFP8k甲助力

内容包含:

  • ArkTS
  • 声明式ArkUI
  • 多媒体
  • 通信问题
  • 系统移植
  • 系统裁剪
  • FW层的原理
  • 各种开发调试工具
  • 智能设备开发
  • 分布式开发等等。

这些就是对往后开发者的前景分享,希望大家多多点赞关注喔!

相关文章:

鸿蒙OpenHarmony开发实战:【MiniCanvas】

介绍 基于OpenHarmony的Cavas组件封装了一版极简操作的MiniCanvas,屏蔽了原有Canvas内部复杂的调用流程,支持一个API就可以实现相应的绘制能力,该库还在继续完善中,也欢迎PR。 使用说明 添加MiniCanvas依赖 在项目entry目录执行…...

【JavaEE初阶系列】——单例模式 (“饿汉模式“和“懒汉模式“以及解决线程安全问题)

目录 🚩单例模式 🎈饿汉模式 🎈懒汉模式 ❗线程安全问题 📝加锁 📝执行效率提高 📝指令重排序 🍭总结 单例模式,非常经典的设计模式,也是一个重要的学科&#x…...

flutter-elinux的基本介绍及安装调试

搜集到两个很有用的网站: 1、flutter-elinux的基本介绍:https://juejin.cn/post/7257285697383612453 2、flutter-elinux的安装调试等:https://github.com/sony/flutter-elinux/wiki 其中,在flutter-elinux设置环境变量时&#…...

二分查找法总结

目录 1、思路讲解(LC704)2、代码思路讲解(循环不变量)(1) 左闭右闭(2)左闭右开(3)总结:左开右闭和左闭右开(4)复杂度分析 …...

Python工具-清理Unity(批量深度)清理U3D项目工程保留关键工程文件

前沿 1. Unity工程越来越多,很久不用的工程里存在了很多无用的大文件夹,极大的影响电脑容量。 2. 我电脑里面U3D工程只有17个,但容量就高达60GB,使用自己编写的工具清理后,减到了30GB多。清理了不是很重要的文件和文件…...

vue 安装脚手架报错 certificate has expired

vue 安装脚手架的时候报错,报错信息如下: 错误信息:npm ERR! request to https://registry.npm.taobao.org/vue%2fcli failed, reason: certificate has expired 翻译:npm ERR!请求到https://registry.npm.taobao.org…...

使用 Python 快速开始机器学习

🔗 快速开始 PyTorch|使用 Python 建立深度学习模型 认识 PyTorch 1.1 Torch 与 PyTorch 1.2 安装 PyTorch 1.3 验证安装并查看 PyTorch 版本PyTorch 深度学习模型的建立范式 2.1 准备数据 2.2 定义模型 2.3 训练模型 2.4 评估模型 2.5 做出预测为预测任…...

CCDP.02.OS正确部署后的Dashboard摘图说明

前言 在部署成功OpenStack后,应该可以在浏览器打开Dashboard,并对计算资源(这里主要是指VM)进行管理,也可以在Dashboard上面查看OpenStack是否存在错误,下面,已针对检查的关键点,用红…...

【计算机视觉】Gaussian Splatting源码解读补充(二)

第一部分 本文是对学习笔记之——3D Gaussian Splatting源码解读的补充,并订正了一些错误。 目录 三、相机相关scene/cameras.py:class Camera 四、前向传播(渲染):submodules/diff-gaussian-rasterization/cuda_rast…...

Java transient 关键字

Java字段不想序列化怎么办 在 Java 中,如果某个字段不想被序列化(即不希望被写入到序列化的数据流中),可以使用 transient 关键字进行标记。通过在字段前加上 transient 关键字,可以告诉 Java 序列化机制忽略该字段&am…...

前端工程化(三)邂逅Webpack和打包过程

目录 Vue项目加载Webpack 安装Webpack的默认打包创建局部的 webpack Vue项目加载 JavaScript的打包:  将ES6转换成ES5的语法;  TypeScript的处理,将其转换成JavaScript; Css的处理:  CSS文件模块的加载、提取&a…...

Gradle v8.5 笔记 - 从入门到进阶(基于 Kotlin DSL)

目录 一、前置说明 二、Gradle 启动! 2.1、安装 2.2、初始化项目 2.3、gradle 项目目录介绍 2.4、Gradle 项目下载慢?(万能解决办法) 2.5、Gradle 常用命令 2.6、项目构建流程 2.7、设置文件(settings.gradle…...

Jmeter-基础元件使用(二)-属性及对数据库简单操作

一、Jmeter属性 当我们想要在不同线程组中使用某变量,就需要使用属,此时Jmeter属性的设置需要函数来进行set和get操作 1.创建set函数 2.然后采用Beanshell取样器进行函数执行 3.调用全局变量pro_id 4.将上面生成的函数字符串粘贴到另一个线程组即可…...

docker 的八大技术架构(图解)

docker 的八大技术架构 单机架构 概念: 应用服务和数据库服务公用一台服务器 出现背景: 出现在互联网早期,访问量比较小,单机足以满足需求 架构优缺点: 优点:部署简单,成本低 缺点&#xff1…...

LeetCode-热题100:131. 分割回文串

题目描述 给你一个字符串 s,请你将 s 分割成一些子串,使每个子串都是 回文串 。返回 s 所有可能的分割方案。 示例 1: 输入: s “aab” 输出: [[“a”,“a”,“b”],[“aa”,“b”]] 示例 2: 输入&am…...

常用相似度计算方法总总结

一、欧几里得相似度 1、欧几里得相似度 公式如下所示: 2、自定义代码实现 import numpy as np def EuclideanDistance(x, y):import numpy as npx np.array(x)y np.array(y)return np.sqrt(np.sum(np.square(x-y)))# 示例数据 # 用户1 的A B C D E商品数据 [3.3…...

【漏洞复现】WordPress Plugin NotificationX 存在sql注入CVE-2024-1698

漏洞描述 WordPress和WordPress plugin都是WordPress基金会的产品。WordPress是一套使用PHP语言开发的博客平台。该平台支持在PHP和MySQL的服务器上架设个人博客网站。WordPress plugin是一个应用插件。 WordPress Plugin NotificationX 存在安全漏洞,该漏洞源于对用户提供的…...

AI新工具(20240322) 免费试用Gemini Pro 1.5;先进的AI软件工程师Devika;人形机器人Apptronik给你打果汁

✨ 1: Gemini Pro 1.5 免费试用Gemini Pro 1.5 Gemini 1.5 Pro是Gemini系列模型的最新版本,是一种计算高效的多模态混合专家(MoE)模型。它能够从数百万个上下文Token中提取和推理细粒度信息,包括多个长文档和数小时的视频、音频…...

鬼灭之刃-激情台词-02(解释来自文心一言)

愤怒吧,不共戴天的仇恨,强悍而纯粹的愤怒,将会化作坚不可摧的原动力,督促你变强 —— 吾峠呼世晴《鬼灭之刃》 愤怒和仇恨是一种强烈的情感,它们可以驱使人们去寻求改变,去变得更加强大。在故事中&#xff…...

openssl3.2 - exp - aes-128-cbc

文章目录 openssl3.2 - exp - aes-128-cbc概述笔记openssl 命令行实现简单直白的实现简单直白的实现 - 测试效果简单直白的实现 - 测试工程 周全灵活的实现周全灵活的实现 - 测试效果周全灵活的实现 - 测试工程 清晰一些的版本END openssl3.2 - exp - aes-128-cbc 概述 想将工…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好,总是藏在那些你咬牙坚持的日子里。 硬件:OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写,"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)

注&#xff1a;文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件&#xff1a;STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...