【HarmonyOS學習筆記】Slider元件實現圖形可調旋轉
哈嘍大家好我是厚臉皮的小威
之前剛剛用華為的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)