当前位置: 首页 > 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 概述 想将工…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...