|
|
@@ -1,6 +1,8 @@
|
|
|
-import { YTAvoid, YTHeader, yTRouter } from 'basic'
|
|
|
-import { Cell, Sector } from '../utils/Sector';
|
|
|
+import { BigWheel, bigWheelDB, YTAvoid, YTHeader, yTRouter } from 'basic'
|
|
|
+import { Cell, CellStorage, Sector } from '../utils/Sector';
|
|
|
import { CounterComponent, CounterType, promptAction } from '@kit.ArkUI';
|
|
|
+import { it } from '@ohos/hypium';
|
|
|
+import { JSON } from '@kit.ArkTS';
|
|
|
|
|
|
|
|
|
@Builder
|
|
|
@@ -15,7 +17,15 @@ function BigWheelViewBuilder(){
|
|
|
struct BigWheelView{
|
|
|
@StorageProp(YTAvoid.SAFE_TOP_KEY) safeBottom: number = 0
|
|
|
|
|
|
+ //持久化的数组,方便下次打开应用直接承接上一次的数据
|
|
|
+ @StorageLink('bigwheel')
|
|
|
+ DBCells:CellStorage[]=[]
|
|
|
+ @StorageLink('unselectbigwheel')
|
|
|
+ DBUnselectCell:Cell[]=[]
|
|
|
+ @StorageLink('selectbigwheel')
|
|
|
+ DBSelectCell:Cell[]=[]
|
|
|
|
|
|
+ //转盘操作数组
|
|
|
@State cells: Cell[] = []; // 存储单元格的数组
|
|
|
//随着每次操作,需要触发画布重新画
|
|
|
@Watch('drawCircleWithCustomRadii')
|
|
|
@@ -38,7 +48,7 @@ struct BigWheelView{
|
|
|
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
|
|
|
|
|
|
//转盘选中判断
|
|
|
- @State currSelectNumber:number=3
|
|
|
+ @State currSelectNumber:number=1
|
|
|
@State number:number=4 //转盘数量
|
|
|
|
|
|
//打开半模态命名模态
|
|
|
@@ -65,9 +75,10 @@ struct BigWheelView{
|
|
|
"#fff",
|
|
|
];
|
|
|
filter(){
|
|
|
- //每次选中的数组有变化,那就要重新过滤
|
|
|
- this.UnSelected = this.cells.filter(item =>
|
|
|
- !this.selected.some(selected => selected.id === item.id));
|
|
|
+ //每次选中的数组有变化,那就要重新过滤,就要移除没选中的数组里面的数据
|
|
|
+ this.UnSelected = this.cells.filter(item => !this.selected.includes(item));
|
|
|
+
|
|
|
+
|
|
|
// promptAction.showToast({
|
|
|
// message:JSON.stringify(this.UnSelected)
|
|
|
// })
|
|
|
@@ -75,20 +86,105 @@ struct BigWheelView{
|
|
|
// this.cells.map((item)=>{
|
|
|
//
|
|
|
// })
|
|
|
+ this.DBUnselectCell=this.UnSelected
|
|
|
+ this.DBSelectCell=this.selected
|
|
|
|
|
|
}
|
|
|
|
|
|
- // 组件即将出现时调用
|
|
|
- aboutToAppear(): void {
|
|
|
- // 初始化单元格
|
|
|
- this.cells.push(new Cell(1,1, "转盘1", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
|
|
|
- this.cells.push(new Cell(2,1, "转盘2", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
|
|
|
- this.cells.push(new Cell(3,1, "转盘3", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
|
|
|
- this.cells.push(new Cell(4,1, "转盘4", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
|
|
|
- this.UnSelected=this.cells
|
|
|
+ async selectCount(){
|
|
|
+ return await bigWheelDB.queryCount()
|
|
|
+ }
|
|
|
|
|
|
+ // this.cells.push(new Cell(1, 1, "转盘1", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
|
|
|
+ // 组件即将出现时调用
|
|
|
+ aboutToAppear() {
|
|
|
+ if(this.DBCells.length==0) {
|
|
|
+ this.cells.push(new Cell(1, 1, "转盘1",'#fff' ));
|
|
|
+ this.cells.push(new Cell(2, 1, "转盘2", '#fff' ));
|
|
|
+ this.cells.push(new Cell(3, 1, "转盘3",'#fff' ));
|
|
|
+ this.cells.push(new Cell(4, 1, "转盘4", '#fff' ));
|
|
|
+
|
|
|
+ this.UnSelected=this.cells
|
|
|
+ }else{
|
|
|
+ this.DBCells.forEach((item)=>{
|
|
|
+ this.cells.push(new Cell(item.id,item.proportion,item.title,item.color))
|
|
|
+ })
|
|
|
+ this.number=this.cells.length
|
|
|
+ this.UnSelected=this.DBUnselectCell
|
|
|
+ this.selected=this.DBSelectCell
|
|
|
+
|
|
|
+ // this.DBSelectCell.forEach((item)=>{
|
|
|
+ // this.selected.push(new Cell(item.id,item.proportion,item.title,item.color))
|
|
|
+ // })
|
|
|
+ this.currSelectNumber=this.number-3
|
|
|
+ }
|
|
|
+ // this.UnSelected=this.cells
|
|
|
this.calculateAngles(); // 计算角度
|
|
|
}
|
|
|
+ //动画
|
|
|
+ private startAnimation(){
|
|
|
+
|
|
|
+ if (this.isAnimating) { // 如果正在动画中,返回
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.selected.length==this.cells.length){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //如果都已经被选了,则不能再转了
|
|
|
+ this.calculateNoSelectedAngles()
|
|
|
+ this.selectedName = ""; // 清空选中的名称
|
|
|
+ this.isAnimating = true; // 设置动画状态为正在动画
|
|
|
+ animateTo({ // 开始动画
|
|
|
+ duration: this.spinDuration, // 动画持续时间为5000毫秒
|
|
|
+ curve: Curve.EaseInOut, // 动画曲线为缓入缓出
|
|
|
+ onFinish: () => { // 动画完成后的回调
|
|
|
+ this.currentAngle %= 360; // 保持当前角度在0到360之间
|
|
|
+ for (const cell of this.cells) {
|
|
|
+ // 遍历每个单元格
|
|
|
+ // 检查当前角度是否在单元格的角度范围内
|
|
|
+ if (360 - this.currentAngle >= cell.angleStart && 360 - this.currentAngle <= cell.angleEnd) {
|
|
|
+ if(!this.isRepeat) {
|
|
|
+ this.selected.push(cell)
|
|
|
+ //这里需要下次点击的时候
|
|
|
+ cell.color = '#e5e7ea'
|
|
|
+ }else{
|
|
|
+ this.selected=[]
|
|
|
+ }
|
|
|
+ this.selectedName = cell.title; // 设置选中的名称为当前单元格的标题
|
|
|
+ //每次转弯要保存
|
|
|
+
|
|
|
+
|
|
|
+ break; // 找到后退出循环
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.DBCells=this.cells.map((item)=>{
|
|
|
+ return {
|
|
|
+ id:item.id,
|
|
|
+ title:item.title,
|
|
|
+ proportion:item.proportion,
|
|
|
+ color:item.color
|
|
|
+ } as CellStorage
|
|
|
+ })
|
|
|
+ this.isAnimating = false; // 设置动画状态为未动画
|
|
|
+ },
|
|
|
+ }, () => { // 动画进行中的回调
|
|
|
+ //在这里判断
|
|
|
+ // this.randomAngle=Math.floor(Math.random()*360)
|
|
|
+ // this.currentAngle += (360 * this.spinDuration/1000 + Math.floor(Math.random() * 360)); // 更新当前角度,增加随机旋转
|
|
|
+ //在这里算已经选过的,不能在指了
|
|
|
+
|
|
|
+ // this.currentAngle += (360 * this.spinDuration/1000 + Math.floor(Math.random() * 360)); // 更新当前角度,增加随机旋转
|
|
|
+
|
|
|
+ // promptAction.showToast({
|
|
|
+ // message:this.randomAngle.toString()
|
|
|
+ // })
|
|
|
+ this.currentAngle += (360 * this.spinDuration/1000)+this.randomAngle
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
// 计算每个单元格的角度
|
|
|
private calculateAngles() {
|
|
|
@@ -105,12 +201,30 @@ struct BigWheelView{
|
|
|
cell.angleEnd = cumulativeAngle; // 设置结束角度
|
|
|
cell.rotate = cumulativeAngle - (cell.angle / 2); // 计算旋转角度
|
|
|
});
|
|
|
+
|
|
|
+
|
|
|
+ // bigWheelDB.batchDelete(this.cells.map(item=>item.id))
|
|
|
+ // bigWheelDB.batchInsert(this.cells.map((item)=>{
|
|
|
+ // return {
|
|
|
+ // id:item.id,
|
|
|
+ // title:item.title,
|
|
|
+ // angle:item.angle,
|
|
|
+ // proportion:item.proportion,
|
|
|
+ // color:item.color,
|
|
|
+ // angleEnd:item.angleEnd,
|
|
|
+ // angleStart:item.angleStart,
|
|
|
+ // rotate:item.rotate
|
|
|
+ // } as BigWheel
|
|
|
+ // }))
|
|
|
//触发画布
|
|
|
this.changeCanvas++
|
|
|
}
|
|
|
|
|
|
private calculateNoSelectedAngles(){
|
|
|
//在这里计算
|
|
|
+ if(this.isRepeat){
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
if(this.UnSelected.length!=0) {
|
|
|
//随机选取一个没有选中的角度范围扇形
|
|
|
@@ -165,6 +279,16 @@ struct BigWheelView{
|
|
|
|
|
|
}
|
|
|
|
|
|
+ // aboutToDisappear(): void {
|
|
|
+ // //组件销毁保存数据
|
|
|
+ // this.DBCells=this.cells
|
|
|
+ // this.DBUnselectCell=this.UnSelected
|
|
|
+ // promptAction.showToast({
|
|
|
+ // message:"xxx"
|
|
|
+ // })
|
|
|
+ //
|
|
|
+ // }
|
|
|
+
|
|
|
build() {
|
|
|
Stack({alignContent:Alignment.Center}){
|
|
|
Stack({alignContent:Alignment.Top}){
|
|
|
@@ -197,7 +321,39 @@ struct BigWheelView{
|
|
|
Row(){
|
|
|
Column(){}.width(24).height(24)
|
|
|
// Image($r('[basic].media.voicemuisc')).width(24)
|
|
|
- Text('重置').fontColor('rgba(0, 0, 0, 0.65)')
|
|
|
+ Text('重置').fontColor('rgba(0, 0, 0, 0.65)').onClick(()=>{
|
|
|
+
|
|
|
+ if(!this.isRepeat){
|
|
|
+ //背景色变成白色
|
|
|
+ this.cells.forEach((item)=>{
|
|
|
+ item.color='#fff'
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ //重置,所有的转盘重新开始
|
|
|
+ // this.DBCells.forEach((item)=>{
|
|
|
+ // this.cells.push(new Cell(item.id,item.proportion,item.title,item.color))
|
|
|
+ // })
|
|
|
+ this.selected=[]
|
|
|
+ this.UnSelected=[]
|
|
|
+ this.UnSelected=this.cells
|
|
|
+
|
|
|
+ this.DBUnselectCell=this.UnSelected
|
|
|
+ this.DBSelectCell=this.selected
|
|
|
+ this.DBCells=this.cells.map((item)=>{
|
|
|
+ return {
|
|
|
+ id:item.id,
|
|
|
+ title:item.title,
|
|
|
+ proportion:item.proportion,
|
|
|
+ color:item.color
|
|
|
+ } as CellStorage
|
|
|
+ })
|
|
|
+ // this.DBCells=this.cells
|
|
|
+ // this.UnSelected=this.DBUnselectCell
|
|
|
+ // this.selected=this.DBSelectCell
|
|
|
+
|
|
|
+ })
|
|
|
}.width('100%')
|
|
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
|
.padding({left:30,right:30})
|
|
|
@@ -263,51 +419,9 @@ struct BigWheelView{
|
|
|
.height('70lpx') // 设置按钮高度
|
|
|
.objectFit(ImageFit.Contain)
|
|
|
.clickEffect({ level: ClickEffectLevel.LIGHT }) // 设置点击效果
|
|
|
- .onClick(() => { // 点击按钮时的回调函数
|
|
|
- if (this.isAnimating) { // 如果正在动画中,返回
|
|
|
- return;
|
|
|
- }
|
|
|
- if(this.selected.length==this.cells.length){
|
|
|
- return
|
|
|
- }
|
|
|
- //如果都已经被选了,则不能再转了
|
|
|
- this.calculateNoSelectedAngles()
|
|
|
- this.selectedName = ""; // 清空选中的名称
|
|
|
- this.isAnimating = true; // 设置动画状态为正在动画
|
|
|
- animateTo({ // 开始动画
|
|
|
- duration: this.spinDuration, // 动画持续时间为5000毫秒
|
|
|
- curve: Curve.EaseInOut, // 动画曲线为缓入缓出
|
|
|
- onFinish: () => { // 动画完成后的回调
|
|
|
- this.currentAngle %= 360; // 保持当前角度在0到360之间
|
|
|
- for (const cell of this.cells) { // 遍历每个单元格
|
|
|
- // 检查当前角度是否在单元格的角度范围内
|
|
|
- if (360 - this.currentAngle >= cell.angleStart && 360 - this.currentAngle <= cell.angleEnd) {
|
|
|
- this.selected.push(cell)
|
|
|
- //这里需要下次点击的时候
|
|
|
- cell.color='#202020'
|
|
|
- this.selectedName = cell.title; // 设置选中的名称为当前单元格的标题
|
|
|
- break; // 找到后退出循环
|
|
|
- }
|
|
|
- }
|
|
|
- this.isAnimating = false; // 设置动画状态为未动画
|
|
|
- },
|
|
|
- }, () => { // 动画进行中的回调
|
|
|
- //在这里判断
|
|
|
- // this.randomAngle=Math.floor(Math.random()*360)
|
|
|
- // this.currentAngle += (360 * this.spinDuration/1000 + Math.floor(Math.random() * 360)); // 更新当前角度,增加随机旋转
|
|
|
- //在这里算已经选过的,不能在指了
|
|
|
-
|
|
|
- // this.currentAngle += (360 * this.spinDuration/1000 + Math.floor(Math.random() * 360)); // 更新当前角度,增加随机旋转
|
|
|
-
|
|
|
- // promptAction.showToast({
|
|
|
- // message:this.randomAngle.toString()
|
|
|
- // })
|
|
|
- this.currentAngle += (360 * this.spinDuration/1000)+this.randomAngle
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- });
|
|
|
- });
|
|
|
+ // .onClick(() => { // 点击按钮时的回调函数
|
|
|
+ //
|
|
|
+ // });
|
|
|
}
|
|
|
.width(`${this.wheelWidth+26}lpx`)
|
|
|
.height(`${this.wheelWidth+26}lpx`)
|
|
|
@@ -362,6 +476,7 @@ struct BigWheelView{
|
|
|
.height(44).borderRadius(20)
|
|
|
.margin({top:107,bottom:48})
|
|
|
.onClick(()=>{
|
|
|
+ this.startAnimation()
|
|
|
})
|
|
|
Row({space:15}) {
|
|
|
ForEach([2,3,4,5],(item:number,index:number)=>{
|
|
|
@@ -371,17 +486,82 @@ struct BigWheelView{
|
|
|
.textAlign(TextAlign.Center)
|
|
|
.border({width:1,color:'#000000'})
|
|
|
.borderRadius('50%')
|
|
|
- .backgroundColor(this.currSelectNumber==index+2?'#bff2ff':'#f2f2f2')
|
|
|
+ .backgroundColor(this.currSelectNumber==index?'#bff2ff':'#f2f2f2')
|
|
|
.onClick(()=>{
|
|
|
+ promptAction.showToast({
|
|
|
+ message:JSON.stringify(this.selected)
|
|
|
+ })
|
|
|
+
|
|
|
this.currSelectNumber=index
|
|
|
this.number=item+1
|
|
|
+ const arr=this.cells
|
|
|
this.cells=[]
|
|
|
- for(let i=0;i<this.number;i++){
|
|
|
- this.cells.push(new Cell(i+1,1, "转盘"+(i+1), this.colorPalette[i]));
|
|
|
+ //如果选中的长度比之前要长
|
|
|
+ if(this.number>arr.length) {
|
|
|
+ for (let i = 0; i < this.number; i++) {
|
|
|
+ if (i < arr.length) {
|
|
|
+ this.cells.push(arr[i])
|
|
|
+ }else{
|
|
|
+ this.cells.push(new Cell(i + 1, 1, "转盘" + (i + 1), '#fff'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ //短
|
|
|
+ for (let i = 0; i < this.number; i++) {
|
|
|
+ this.cells.push(arr[i])
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
+ //要继承之前没选中的,选中的数组根据id
|
|
|
+ // this.UnSelected=this.cells
|
|
|
+ // this.selected=[]
|
|
|
this.calculateAngles(); // 重新计算角度
|
|
|
+ //选中的和没选中的也要重新计算角度
|
|
|
+ let selId=[] as number[]
|
|
|
+ let unselId=[] as number[]
|
|
|
+ //找到id重新过滤
|
|
|
+ this.selected.forEach((selItem)=>{
|
|
|
+ selId.push(selItem.id)
|
|
|
+ })
|
|
|
+ this.UnSelected.forEach((unselItem)=>{
|
|
|
+ unselId.push(unselItem.id)
|
|
|
+ })
|
|
|
+ this.selected=[]
|
|
|
+ this.UnSelected=[]
|
|
|
|
|
|
+ this.cells.forEach((selItem)=>{
|
|
|
+ selId.forEach((i)=>{
|
|
|
+ if(i==selItem.id){
|
|
|
+ this.selected.push(selItem)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
|
|
|
+ this.cells.forEach((unselItem)=>{
|
|
|
+ unselId.forEach((i)=>{
|
|
|
+ if(i==unselItem.id){
|
|
|
+ this.UnSelected.push(unselItem)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ this.DBUnselectCell=this.UnSelected
|
|
|
+ this.DBSelectCell=this.selected
|
|
|
+ // promptAction.showToast({
|
|
|
+ // message:JSON.stringify(this.cells)
|
|
|
+ // })
|
|
|
+ this.DBCells=[]
|
|
|
+ this.DBCells=this.cells.map((item)=>{
|
|
|
+ return {
|
|
|
+ id:item.id,
|
|
|
+ title:item.title,
|
|
|
+ proportion:item.proportion,
|
|
|
+ color:item.color
|
|
|
+ } as CellStorage
|
|
|
+ })
|
|
|
+ // this.UnSelected=this.DBUnselectCell
|
|
|
+ // this.selected=this.DBSelectCell
|
|
|
})
|
|
|
})
|
|
|
|