哈喽大家好我是厚脸皮的小威

之前刚刚用华为的IDE跑通“HELLO,WORLD”

趁热又想去试试看跑一下基于TS拓展API接口的Slider组件,去实现图片的放大和缩小

凭借着大学时期最基础的编程基础挑战了一下,可能是个最基础的组件,但对我而言,步

子迈的有点大,挺难的,但最终还是实现了

回到正题!

那么既然这是一个具体的组件,就不能再是原子化服务,所以这里要勾选Application

语言是选择的是eTS

SDK没有多余选项,目前的IDE只能选择API 7

那么首先就是要去引入一张可以用来放大和缩小的图片,选择一张照片保存至本地,复制后选择左侧的resources,拷贝至rawfile中,就可以进行image调取,截图如下:

在官网中有提到如何使用,以及常规的调配代码,这里我们设置一下

Image($rawfile('shuijingqiu.jpeg'))
.objectFit(ImageFit.Contain)
.height(150)
.width(150)
.margin({top:50,bottom:150,right:16})
.rotate({x:0,y:0,z:1,angle:this.angle})
.scale({x:this.imageSize,y:this.imageSize})

这里旋转给一个初始值

@State private angle:number=5

canvs画布的缩放变换属性,以及后续的绘制操作,都需要给定一个初始值

@State private imageSize:number=1

配置好图片后我们新增控制模块,用文字+数显和slider组件实现

Text('速度:'+ this.speed.toFixed(0.1)).margin({top:30})

.fontSize(20)

.fontWeight(FontWeight.Bold)

也要给速度一个初始值,给一个速度的变量

@State private speed:number=5

文本设置好之后我们需要设置滑动组件

Slider({

value:this.speed,

min:1,

max:10,

step:1,

style:SliderStyle.OutSet//滑动模块风格类型,inSet不能在外部拖放

}).showTips(true)//设置滑动时是否显示气泡提示百分比

.blockColor(Color.Blue) //设置颜色

设置完滑动组件以后,需要将速度调整与图形转动做一个匹配,这里用到onChange显示事件,改变速度,所以要添加一个value,number类型

.onChange((value:number)=>{

this.speed = value//Tab页签切换后触发的事件,这里是当切换后将数字赋给speed当前速度值

])

以上就是第一个slider的事件,但是光有速度的赋值,滑动指变化以后还需要让角度有一个关联,这里可以用一个函数,当速度改变以后,角度也发生变化,这里要注意组件是同级的。

生成一个速度改变含量

speedChang() {

var that = this//这里要用到一个计时器,计时器返回的都是一个数值,这个数值都是用来标记

在这里需要在最上面声明一个值,用它表示计时器

@State private interval:number=0//写在最上面

然后给计时器赋值

this.interval = setInterval(function () {

that.angle += that.speed

}, 10)//为避免报错,这里要给定一个时间间隔,否则会报错,我这里设定的是10毫秒

这里的function把每改变一次的角度,进行一个累加,就可以实现一个旋转的效果

至此图像还是不能转的,我们需要声明一个生命周期函数,在页面起来的时候就去执行这个速度改变的这个函数,才能看到图形的旋转

onPageShow(){

this.speedChang()

引用刚刚的那个方法就可以了

至此我这个小风车就是可以旋转的了,第一次尝试这样发文,有错误的地方还希望大佬指正。最后附上全文代码,希望能够帮到和我一样的伙伴

@Entry
@Component
struct Index {
@State private angle:number=5//管理组件拥有的状态
@State private imageSize:number=1
@State private speed:number=5
@State private interval:number=0

build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Image($rawfile('shuijingqiu.jpeg'))//引用图片shuijingqiu
.objectFit(ImageFit.Contain)//设置图片的缩放类型
.height(100)//设置高
.width(100)//设置宽度
.margin({top:50,bottom:150,right:16})//设置上下左右边框属性,1-4条属性,1配4,2配4,3配4
.rotate({x:0,y:0,z:1,angle:this.angle})//针对当前坐标轴进行顺时针旋转
.scale({x:this.imageSize,y:this.imageSize})//设置canvas画布的缩放变换属性,后续的绘制操作将按照缩放比例进行缩放

Text('速度:'+ this.speed.toFixed(0.1)).margin({top:30})//键入速度和速度后字段
.fontSize(20)//表示字号已经发生变更
.fontWeight(FontWeight.Bold)//设置字体加粗

Slider({//滑行套件
value:this.speed,//当前进度赋值
min:1,
max:10,
step:1,
style:SliderStyle.OutSet//滑动模块风格类型,inSet不能在外部拖放
}).showTips(true)//设置滑动时是否显示气泡提示百分比
.blockColor(Color.Blue)//设置滑块颜色
.onChange((value:number)=>{
this.speed = value//Tab页签切换后触发的事件,这里是当切换后将数字赋给speed当前速度值
})

Text('缩放大小:' + this.imageSize).margin({top:30})
.fontSize(20)
.fontWeight(FontWeight.Bold)

Slider({
value:this.imageSize,
min:0.5,
max:2.5,
step:0.1,
style:SliderStyle.OutSet
}).showTips(true)
.blockColor(Color.Blue)
.onChange((value:number)=>{
this.imageSize = value
})

}
.width('100%')
.height('100%')
}
speedChang() {
var that = this
this.interval = setInterval(function () {
that.angle += that.speed
}, 15)
}

onPageShow(){
this.speedChang()
}

}

/*小威的技术试水*/
0 error(s),0 warning(s)

【HarmonyOS学习笔记】Slider组件实现图形可调旋转的更多相关文章

  1. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. Android学习笔记⑤——UI组件的学习TextView相关

    TextView是一个强大的视图组件,直接继承了View,同时也派生出了很多子类,TextView其作用说白了就是在布局中显示文本,有点像Swing编程中的JLabel标签,但是他比JLabel强大的 ...

  3. .net core学习笔记,组件篇:服务的注册与发现(Consul)初篇

    1.什么是服务注册中心? 在学习服务注册与发现时,我们要先搞明白到底什么是服务注册与发现. 在这里我举一个生活中非常普遍的例子——网购来简单说明,网购在我们日常生活中已经是非常普遍了,其实网购中的(商 ...

  4. OpenGL_Qt学习笔记之_03(平面图形的着色和旋转)(转)

    http://www.cnblogs.com/tornadomeet/archive/2012/08/23/2653305.html 在这一节中主要简单介绍下怎样给平面几何着色,以及怎样让绘制出来的几 ...

  5. Angular4.0从入门到实战打造在线竞拍网站学习笔记之一--组件

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 Angular4.0数据绑定&管道 最近搞到手了一部Angular4的视频教程,这几天正好 ...

  6. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  7. Swing学习笔记1-----Swing组件类的层次

    1.  从结构上划分 Swing 组件类分为两种,一种是JComponent类,一种是Windows类.其中windows类包含的是一些可以独立显示的组件,而JComponent类包含的是不可以独立显 ...

  8. Android学习笔记⑧——UI组件的学习AdapterView相关2

    前面都是用ListView控件来配合Adapter做的一些实例,这次我们来见识一下GridView与Adapter之间的爱恨情仇.... GridView是用于在界面上按行.列分布的方式来显示多个的组 ...

  9. Android学习笔记⑦——UI组件的学习AdapterView相关1

    AdapterView是一个非常重要的组件之一,他非常灵活,所以得好好学...AdapterView本身是一个抽象类,派生出来的子类用法也十分相似,只是界面有一定的区别,因此本节把他们归为一类 Ada ...

随机推荐

  1. 模拟web服务器http请求应答

    我们在浏览器打开网页,其实是向远端服务器提出页面发送请求,远端服务器在接到请求后,就开始执行请求页面的程序文件,然后将执行结果通过html格式,发送到你的浏览器,再显示出来.以下用百度(www.bai ...

  2. react、react-router、redux 也许是最佳小实践1

    小前言 这是一个小小的有关react的小例子,希望通过一个小例子,可以让新手更好的了解到react.react-router4.0.redux的集中使用方法. 这是基于create-react-app ...

  3. es6-Set与Map

    se5中的set与map 在est5中开发者使用对象属性来模拟.set多用于检查键的存在,map多用于提取数据. { let set = Object.create(null) set.foo = t ...

  4. 前端面试题整理——手写简易jquery

    class jQuery { constructor(selector) { const result = document.querySelectorAll(selector) console.lo ...

  5. 【weex开发】weex官方源码

    公司目前使用版本:weex_sdk:0.10.0 介绍地址:https://bintray.com/alibabaweex/maven/weex_sdk/0.18.0 weex最新版本:weex_sd ...

  6. hibernate 联合主键 composite-id

    如果表使用联合主键(一个表有两个以上的主键),你可以映射类的多个属性为标识符属性.如:<composite-id>元素接受<key-property> 属性映射(单表映射)和& ...

  7. Java自定义异常类的简单实现

    学习目标: 掌握自定义异常类 例题: 需求:自定义异常类,简单判断是否注册成功 代码如下: RegisterException类: /** * @author YanYang * @projectNa ...

  8. Wireshark捕获网易云音乐音频文件地址

    打开Wireshark,开始捕获. 打开网易云音乐,然后播放一首歌. Wireshark停时捕获,然后在不活的文件中搜索字符串"mp3".可以发现有如下信息: 将其中的内容:&qu ...

  9. Linux---远程连接、命令行基础、文件及目录管理

    远程连接管理Linux实践(centos) 连接小知识 IP地址:访问连接服务器,需要通过服务器的IP地址来实现,服务器的IP地址就相当于服务器的具体地址.一计算机都会有一个唯一的32位的IP地址,8 ...

  10. 网络协议之:socket协议详解之Unix domain Socket

    目录 简介 什么是Unix domain Socket 使用socat来创建Unix Domain Sockets 使用ss命令来查看Unix domain Socket 使用nc连接到Unix do ...