本文详细描述了如何借用混合开发技术在鸿蒙中进行物理模拟实验,本文的app使用了matter.js库。下面是对这个库的详细描述:Matter.js是一个2D物理引擎库,用于在浏览器中实现物理仿真和交互效果。它提供了简单易用的API,帮助开发者快速构建具有真实物理行为的交互式应用程序。主要功能:1.刚体物理仿真:支持刚体物体的碰撞检测、弹性反弹、摩擦力、重力和惯性等物理特性。2.力与约束:可以施加力、设置约束条件(如弹簧连接)来影...
2024-07-31 17:16:55 4519浏览 0点赞 0回复 0收藏
本文会详细介绍如何借用混合开发的方式使用HarmonyOSNext和gif.js制作GIF动画,下图是App的主界面。下图是设置GIF属性:下图是预览添加的静态图片:下图是设置拉伸效果的窗口下面详细描述app的实现过程:首先看一下拉伸效果窗口的组件,代码如下:代码详解与中文注释这段代码实现了一个用于选择图片拉伸方式的用户界面。用户可以通过单选按钮选择不同的图片拉伸方式,并点击“确定”按钮将选择的拉伸方式应用。以下是对代码的逐...
2024-07-31 16:43:56 2606浏览 0点赞 0回复 0收藏
在前面几篇文章中,讲解了通过fabric完成各种处理图像的工作,当处理完图像后,就需要将我们的成果导出,“创意工坊”提供了强大的图像导出功能,允许导出为各种格式,如图所示:从图中可以看出,可以导出为SVG、PNG、JPG和WebP格式。下面是对这几种图像格式的详细解释:1.SVG(ScalableVectorGraphics)概述:SVG是一种基于XML(可扩展标记语言)的矢量图形格式。它主要用于展示二维图形,例如图标、插图、图表等。因为SVG是基于...
2024-07-31 15:49:57 2495浏览 0点赞 0回复 0收藏
本文会详细介绍如何在画布中为插入的外部图片添加特效,添加特效的界面如下图所示:特效可以叠加使用(可以多选)。这个窗口耨是使用Effects组件实现的,代码和详细解释如下:这段ArkTS代码实现了一个用于应用各种图像特效的用户界面。界面包含多个复选框供用户选择不同的特效,并通过点击“确定”按钮将选择的特效应用。效果如您提供的图片所示。代码的实现过程引入依赖:首先引入一些常量和实用函数,如面板背景颜色、按钮背...
2024-07-31 15:32:10 2318浏览 0点赞 0回复 0收藏
本文会详细介绍如何将矢量图(SVG)插入画布,矢量图需要被编码为base64,然后直接保存到js代码中。如显示动物列表的js代码如下图所示:每一个svg是一个数组元素。最终的SVG显示界面如下图所示。这个界面是使用InsertImages组件实现的。。InsertImages类实现的详细解释与注释代码解释这段代码实现了一个用于选择图像的组件InsertImages。该组件由一组按钮和一个Webview组成,按钮用于选择不同的图像类别,Webview用于显示图像列...
2024-07-31 15:10:24 3933浏览 0点赞 0回复 0收藏
本文会详细介绍如何向画布中插入外部图像。效果如下图所示:Web组件不支持直接访问鸿蒙本地目录,所以需要将利用arkts将图像转换为base64形式才可以插入图像到画布。首先需要用arkts实现一个InsertImage函数,用于选择本地图像,然后将其转换为base64编码,并调用js函数插入图像到画布,该函数的代码如下:insertImage(){leturis:Array[];constdocumentSelectOptionsnewpicker.DocumentSelectOptions();documentSelectOptions.f...
2024-07-30 23:13:18 1208浏览 0点赞 0回复 0收藏
在这篇文章中,我们会详细讲解如何实现《创意工坊》中的插入文字的功能,效果如下图所示:首先,插件文本需要弹出如下图的设置对话框。这个对话框需要使用InsertText组件完成,代码如下:导入背景颜色和按钮背景颜色常量import{PANELBACKGROUNDCOLOR,PANELBUTTONBACKGROUNDCOLOR}from'..commonconst'导入文档大小相关的类型import{DocumentSize,DocumentSizes}from'..dataDocuments'导入EntryAbility类importEntryAbilityfrom'....
2024-07-29 22:34:49 3736浏览 1点赞 0回复 0收藏
这一篇文章会实现一个比较有意思的场景,就是在画布上任意绘画。首先会用arkui实现如图的绘画设置窗口,如下图所示:这个窗口使用DrawingBoard组件完成,代码如下:import{PANELBACKGROUNDCOLOR,PANELBUTTONBACKGROUNDCOLOR,COMMONCOLORS,BASICGRAPHICS}from'..commonconst'import{WebColorPickerDialog}from'.WebColorPickerDialog';import{documentExists,createDocumentDir,getInverseColor,rgbaToHex}from'..commoncommon'E...
2024-07-29 16:21:14 3895浏览 2点赞 0回复 1收藏
在上一篇文章我们介绍了创意工坊的主要功能,以及整体UI的实现。在这篇文章中,会详细介绍如何创建新的绘画文档,并与fabric进行交互。点击“新建”按钮,会弹出如下图的窗口。输入文档名,选择尺寸,就可以创建一个带网格的文档,如下图所示:显示创建文档的窗口,需要使用arkts创建一个组件,代码如下:引入必要的常量和依赖import{PANELBACKGROUNDCOLOR,PANELBUTTONBACKGROUNDCOLOR}from'..commonconst'引入面板背景颜色和按...
2024-07-28 18:31:26 3509浏览 1点赞 0回复 0收藏
这是一系列文章,关于我的基于鸿蒙Next的App(创意工坊),这款App也是2024年鸿蒙创新大赛的入围作品(Top50),现在利用这一系列文章,详细介绍”创意工坊“App的详细制作过程,并附有核心的代码。创意工坊是一款全面且强大的创作工具,专为满足不同用户的创意需求而设计。应用程序集成了多个高级JavaScript库,如fabric.js和gif.js,提供了一系列丰富的功能。从新建画布到自动保存和会话管理,创意工坊覆盖了整个创作流程。用...
2024-07-24 21:33:28 7267浏览 3点赞 4回复 1收藏
2022年华为开发者大会(HDC.Together)于11月4日在东莞松山湖揭开帷幕,带来了鸿蒙生态的最新成果,展示了鸿蒙生态的全新格局。在大会主题演讲中,华为带来了多种令人震撼的技术成果,如分布式能力、原子化服务、AI、AR、地图、游戏、音视频、隐私安全、HarmonyOS座舱等。同时鸿蒙开发套件推出了升级的ArkTS、ArkUI、ArkCompiler等技术,通过这些技术的加持,让HarmonyOSApp从开发、到布局,再到性能,都得到了质的飞跃。从而全...
2022-11-11 11:59:58 15.0w浏览 15点赞 6回复 8收藏
本文会通过ETS实现一个购物车应用1.创建商品列表页面在这一节,我们将完成主页界面以及商品列表页签的设计,效果图如下:从上面效果图可以看出,主界面商品列表页签主要由下面三个部分组成:(1)顶部的Tabs组件。(2)中间TabContent组件内包含List组件。其中List组件的item是一个水平布局,由一个垂直布局和一个Image组件组成;item中的垂直布局由3个Text组件组成。(3)底部的页签导航。下面来一起创建第一个页面,第一个页...
2022-06-25 21:44:08 1.2w浏览 5点赞 1回复 2收藏
本文会学习如何设置OpenHarmony的转场动画,主要包括页面的转场动画和组件的转场动画。所谓转场动画,是指在两个页面之间切换或组件显示隐藏等操作时以动画效果展现。下图是本文案例的主界面。点击每一个按钮,会展示特定的转场动画。1.底部滑入动画这种动画效果可以让A页面切换到B页面时,B页面从底端往上展现。这是通过slide方法设置的动画效果,代码如下:pageTransition(){页面入场组件:SlideEffect.Bottom设置到入场时表...
2022-05-31 22:09:13 8987浏览 4点赞 1回复 2收藏
OpenHarmony3.1支持很多组件,这篇文章演示一下如何使用滑杆组件(Slider)控制另一个组件。这个案例通过两个Slider组件分别控制屏幕上方风车的旋转速度和大小。读者可以从中学到Slider组件的基本用法,以及在OpenHarmony中如何控制组件。OpenHarmony3.1目前支持ETS和JS。本文选用了ETS作为开发语言。要想测试本文的代码,有如下两种方式:1.使用HarmonyOSSDK7在远程模拟器中测试2.使用大禹200开发板(或其他支持OpenHarmony3.1...
2022-05-31 19:33:47 7640浏览 5点赞 0回复 4收藏
如果一个鸿蒙(HarmonyOS)App过于庞大,通常不会将所有的代码一股脑地放到一个工程中,最常用的方式是将HarmonyOSApp进行分解,分成不同的组件,然后分别开发,最后通过主模块将这些HarmonyOS组件集成在一起形成一个完整的HarmonyOSApp。如果是一个团队负责开发这个HarmonyOSApp,那么可以分别由不同的个人或更小的团队分别开发不同的组件,然后进行整合,这样做非常符合模块划分原则。HarmonyOSApp使用组件还有一个重要目的,...
2021-08-30 10:18:43 1.2w浏览 4点赞 3回复 5收藏
服务卡片是鸿蒙新推出的一项特性。可以在鸿蒙桌面上放置不同尺寸的矩形区域,在矩形区域中可以放置各种组件,可以与包含服务卡片的程序交互。这样一来,服务卡片除了UI受到限制以外,几乎可以做任何事情。包括在一个服务卡片中动态更新组件。例如,让一个图像组件每隔一定时间间隔,就显示一个图像,不断切换,让鸿蒙桌面动起来。鸿蒙的服务卡片还可以完成更多炫酷的功能,例如,多个服务卡片之间可以交互。下面再详细介绍鸿蒙...
2021-06-28 11:37:43 1.3w浏览 3点赞 1回复 2收藏
提问:老师,跟您确认一下,目前分布式模拟器是不是有Bug?好像并不能像文档中那么使用。回答:我不太清楚你指的具体是什么Bug。不过分布式模拟器目前只是一个实验产品,确实有一些Bug,例如,无法获取分布式目录等,在后期的迭代中会逐步修正这些Bug,敬请期待!提问:我现在其他android代码的apk能直接在昨天升级的鸿蒙机子上用吗?回答:鸿蒙手机可以运行apk,不过这些apk本质上是运行在Android上的,并不是用鸿蒙运行的。...
2021-06-03 22:32:27 1.2w浏览 1点赞 0回复 3收藏
公元2021年6月2日晚20:00,划时代的鸿蒙IDE(DevEcoStudio)迎来了划时代的版本。支持分布式模拟器。开发支持分布式特性的App,再也不需要使用真机了,直接上双模拟器。这下终于不用买两部鸿蒙手机了,怎么样,是不是很省呢!那么新版IDE还有什么新功能呢?不告诉你!要想知道,就来明晚7:00的李宁老师直播,将为你揭晓新版鸿蒙IDE的牛逼特性!直播报名地址:https:harmonyos.51cto.comactivity63直播概要:本节课程主要介绍Ha...
2021-06-02 23:04:10 1.6w浏览 6点赞 11回复 2收藏
1.Neptune开发板简介现在市面上支持OpenHarmony的开发板已经比较多了,比较常见的有HiSpark、小熊派系列。这些开发板都是基于海思的Hi3861、Hi3516或Hi3518芯片的。尽管每一个芯片和对应开发板不是特别贵,也大量购买也需要不小的成本。例如,基于Hi3861的HiSpark开发板大概50元左右,与Arduino开发板的价格相当,所以购买大量Hi3861开发板,成本还是很大的。幸好现在有很多替代品,OpenHarmony也不仅仅只能在海思系列芯片上...
2021-05-24 18:22:06 1.8w浏览 5点赞 2回复 4收藏
最近收集了一些鸿蒙开发板,如Neptune,HiSpark系列、以及小熊派的开发板,现在就分别介绍一下这些开发板的基本功能,以及他们之间的区别和如何选购。在后期我会基于这些开发板做一些视频课程和写一些开发类的文章,敬请期待! 1.Neptune(海王星开发板) Neptune开发板是基于W800主控芯片的,是目前全网最便宜的鸿蒙开发板,只需9.9元。W800支持WiFi和蓝牙。 Neptune有一个套装(39元),除了带一块Neptune开发...
2021-05-24 18:21:23 1.6w浏览 4点赞 2回复 3收藏