|
|
@@ -1,816 +0,0 @@
|
|
|
-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
|
|
|
-function BigWheelViewBuilder(){
|
|
|
- NavDestination(){
|
|
|
- BigWheelView()
|
|
|
- }.title("大转盘")
|
|
|
- .hideTitleBar(true)
|
|
|
-}
|
|
|
-
|
|
|
-@Component
|
|
|
-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')
|
|
|
- @State changeCanvas:number=0
|
|
|
- @State wheelWidth: number = 400; // 转盘的宽度
|
|
|
- @State currentAngle: number = 0; // 当前转盘的角度
|
|
|
- @State selectedName: string = ""; // 选中的名称
|
|
|
- @State isRepeat:boolean=false
|
|
|
- @Watch('filter')
|
|
|
- @State selected:Cell[]=[]
|
|
|
- @State UnSelected:Cell[]=[]
|
|
|
- @State randomAngle:number=0
|
|
|
- isAnimating: boolean = false; // 动画状态
|
|
|
- colorIndex: number = 0; // 颜色索引
|
|
|
- spinDuration:number=5000
|
|
|
- @State spinDurationTime:number=this.spinDuration/1000
|
|
|
- //是否显示设置界面
|
|
|
- @State isShow:boolean=false
|
|
|
- private settings: RenderingContextSettings = new RenderingContextSettings(true)
|
|
|
- private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
|
|
|
-
|
|
|
- //转盘选中判断
|
|
|
- @State currSelectNumber:number=1
|
|
|
- @State number:number=4 //转盘数量
|
|
|
-
|
|
|
- //打开半模态命名模态
|
|
|
- @State isshowRename:boolean=false
|
|
|
-
|
|
|
- colorPalette: string[] = [ // 颜色调色板
|
|
|
- // "#26c2ff",
|
|
|
- // "#978efe",
|
|
|
- // "#c389fe",
|
|
|
- // "#ff85bd",
|
|
|
- // "#ff7051",
|
|
|
- // "#fea800",
|
|
|
- // "#ffcf18",
|
|
|
- // "#a9c92a",
|
|
|
- // "#fea800",
|
|
|
- // "#ffcf18",
|
|
|
- // "#a9c92a"
|
|
|
-
|
|
|
- "#fff",
|
|
|
- "#fff",
|
|
|
- "#fff",
|
|
|
- "#fff",
|
|
|
- "#fff",
|
|
|
- "#fff",
|
|
|
- ];
|
|
|
- filter(){
|
|
|
- //每次选中的数组有变化,那就要重新过滤,就要移除没选中的数组里面的数据
|
|
|
- this.UnSelected = this.cells.filter(item => !this.selected.includes(item));
|
|
|
-
|
|
|
-
|
|
|
- // promptAction.showToast({
|
|
|
- // message:JSON.stringify(this.UnSelected)
|
|
|
- // })
|
|
|
- //要把选的变成灰色
|
|
|
- // this.cells.map((item)=>{
|
|
|
- //
|
|
|
- // })
|
|
|
- this.DBUnselectCell=this.UnSelected
|
|
|
- this.DBSelectCell=this.selected
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- 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() {
|
|
|
- // 根据比例计算总比例
|
|
|
- const totalProportion = this.cells.reduce((sum, cell) => sum + cell.proportion, 0);
|
|
|
- this.cells.forEach(cell => {
|
|
|
- cell.angle = (cell.proportion * 360) / totalProportion; // 计算每个单元格的角度
|
|
|
- });
|
|
|
-
|
|
|
- let cumulativeAngle = 0; // 累计角度
|
|
|
- this.cells.forEach(cell => {
|
|
|
- cell.angleStart = cumulativeAngle; // 设置起始角度
|
|
|
- cumulativeAngle += cell.angle; // 更新累计角度
|
|
|
- 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) {
|
|
|
- //随机选取一个没有选中的角度范围扇形
|
|
|
- const currangle=this.currentAngle%360
|
|
|
- const randomIndex = Math.floor(Math.random() * this.UnSelected.length) as number
|
|
|
- const ranNumStart = 360-this.UnSelected[randomIndex].angleEnd
|
|
|
- const ranNumEnd = 360-this.UnSelected[randomIndex].angleStart
|
|
|
- this.randomAngle =Math.floor(Math.random() * (ranNumEnd - ranNumStart) + ranNumStart)-currangle
|
|
|
- }
|
|
|
- // else{
|
|
|
- // this.randomAngle=Math.floor(Math.random()*360)
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- private drawCircleWithCustomRadii() {
|
|
|
- // this.context.clearRect(0,0,0,0)
|
|
|
- this.context.clearRect(0, 0, 220, 220); // 清空Canvas的内容
|
|
|
- const centerX = 110 // 圆心x坐标
|
|
|
- const centerY = 110 // 圆心y坐标
|
|
|
- const radius = 110 // 圆半径
|
|
|
- // 根据自定义角度数组绘制半径线
|
|
|
- this.cells.forEach(angle => {
|
|
|
- // 将角度转换为弧度(Canvas使用弧度制)
|
|
|
- const radians = (angle.angleEnd-90) * Math.PI / 180
|
|
|
-
|
|
|
- // 计算半径线终点坐标
|
|
|
- const endX = centerX + radius * Math.cos(radians)
|
|
|
- const endY = centerY + radius * Math.sin(radians)
|
|
|
-
|
|
|
- // 绘制半径线
|
|
|
- this.context.beginPath()
|
|
|
- this.context.moveTo(centerX, centerY)
|
|
|
- this.context.lineTo(endX, endY)
|
|
|
- this.context.strokeStyle = '#efd4f9' // 红色半径线
|
|
|
- this.context.lineWidth = 1.5
|
|
|
- this.context.stroke()
|
|
|
-
|
|
|
- // // 标注角度值(修正后的文本绘制方式)
|
|
|
- // this.context.font = '12px sans-serif'
|
|
|
- // this.context.fillStyle = '#000000'
|
|
|
- // this.context.textAlign = 'center'
|
|
|
- // this.context.textBaseline = 'middle'
|
|
|
-
|
|
|
- // // 文本位置稍微向外偏移
|
|
|
- // const textRadius = radius + 15
|
|
|
- // const textX = centerX + textRadius * Math.cos(radians)
|
|
|
- // const textY = centerY + textRadius * Math.sin(radians)
|
|
|
-
|
|
|
- // 使用fillText绘制文本
|
|
|
- // this.context.fillText(`${angle}°`, textX, textY)
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // aboutToDisappear(): void {
|
|
|
- // //组件销毁保存数据
|
|
|
- // this.DBCells=this.cells
|
|
|
- // this.DBUnselectCell=this.UnSelected
|
|
|
- // promptAction.showToast({
|
|
|
- // message:"xxx"
|
|
|
- // })
|
|
|
- //
|
|
|
- // }
|
|
|
-
|
|
|
- build() {
|
|
|
- Stack({alignContent:Alignment.Center}){
|
|
|
- Stack({alignContent:Alignment.Top}){
|
|
|
- Column() {
|
|
|
- // YTHeader({ title: '大转盘', })
|
|
|
- Row(){
|
|
|
- Image($r('[basic].media.ic_back'))
|
|
|
- .width(24)
|
|
|
- .margin({ left: 16 })
|
|
|
- .onClick(()=>{
|
|
|
- yTRouter.routerBack()
|
|
|
- })
|
|
|
- Text('大转盘')
|
|
|
- .fontSize(18)
|
|
|
- .fontWeight(700)
|
|
|
- .fontColor(Color.Black)
|
|
|
-
|
|
|
- Image($r('[basic].media.Subtract'))
|
|
|
- .width(24)
|
|
|
- .margin({right: 16 })
|
|
|
- .onClick(()=>{
|
|
|
- this.isShow=true
|
|
|
- })
|
|
|
- }.width('100%')
|
|
|
- .height(84)
|
|
|
- .justifyContent(FlexAlign.SpaceBetween)
|
|
|
- .padding({ top: 44 })
|
|
|
- .margin({bottom:20})
|
|
|
-
|
|
|
- Row(){
|
|
|
- Column(){}.width(24).height(24)
|
|
|
- // Image($r('[basic].media.voicemuisc')).width(24)
|
|
|
- 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})
|
|
|
-
|
|
|
- // 显示当前状态
|
|
|
- Text(this.isAnimating ? '旋转中' : `${this.selectedName}`)
|
|
|
- .fontSize(20)
|
|
|
- .fontColor("#0b0e15")
|
|
|
- .height(40)
|
|
|
- .margin({top:100})
|
|
|
-
|
|
|
- Stack() {
|
|
|
- Stack() {
|
|
|
- // 遍历每个单元格并绘制扇形
|
|
|
- ForEach(this.cells, (cell: Cell) => {
|
|
|
- Stack() {
|
|
|
- Sector({ radius: lpx2px(this.wheelWidth) / 2, angle: cell.angle, color: cell.color }); // 创建扇形
|
|
|
- Text(cell.title).fontColor(Color.Black).fontWeight(700).margin({ bottom: `${this.wheelWidth / 1.4}lpx` }); // 显示单元格标题
|
|
|
- }.width('100%').height('100%').rotate({ angle: cell.rotate }); // 设置宽度和高度,并旋转
|
|
|
- });
|
|
|
- }
|
|
|
- .borderRadius('50%') // 设置圆角
|
|
|
- // .backgroundColor(Color.Gray) // 设置背景颜色
|
|
|
- .width(`${this.wheelWidth}lpx`) // 设置转盘宽度
|
|
|
- .height(`${this.wheelWidth}lpx`) // 设置转盘高度
|
|
|
- .rotate({ angle: this.currentAngle }); // 旋转转盘
|
|
|
-
|
|
|
- // 创建指针
|
|
|
- // Image({ width: 20, height: 10 })
|
|
|
- // .points([[0, 0], [10, -20], [20, 0]]) // 设置指针的点
|
|
|
- // .fill("#d72b0b") // 设置指针颜色
|
|
|
- // .height(20) // 设置指针高度
|
|
|
- // .margin({ bottom: '140lpx' }); // 设置指针底部边距
|
|
|
-
|
|
|
- Column() {
|
|
|
- Canvas(this.context)
|
|
|
- .width(220)
|
|
|
- .height(220)
|
|
|
- .borderRadius('50%')
|
|
|
- .backgroundColor(Color.Transparent)
|
|
|
- .onReady(() => {
|
|
|
- this.drawCircleWithCustomRadii()
|
|
|
- })
|
|
|
- } .width(`${this.wheelWidth}lpx`) // 设置转盘宽度
|
|
|
- .height(`${this.wheelWidth}lpx`) // 设置转盘高度
|
|
|
- .justifyContent(FlexAlign.Center)
|
|
|
- .rotate({ angle: this.currentAngle }) // 旋转转盘
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // 创建开始按钮
|
|
|
- // Button('开始')
|
|
|
- // .fontColor("#c53a2c") // 设置按钮字体颜色
|
|
|
- // .borderWidth(10) // 设置按钮边框宽度
|
|
|
- // .borderColor("#dd2218") // 设置按钮边框颜色
|
|
|
- // .backgroundColor("#fde427") // 设置按钮背景颜色
|
|
|
- // .width('200lpx') // 设置按钮宽度
|
|
|
- // .height('200lpx') // 设置按钮高度
|
|
|
- // .borderRadius('50%') // 设置按钮为圆形
|
|
|
- // .clickEffect({ level: ClickEffectLevel.LIGHT }) // 设置点击效果
|
|
|
- Image($r('[basic].media.zhizheng'))
|
|
|
- .width('70lpx') // 设置按钮宽度
|
|
|
- .height('70lpx') // 设置按钮高度
|
|
|
- .objectFit(ImageFit.Contain)
|
|
|
- .clickEffect({ level: ClickEffectLevel.LIGHT }) // 设置点击效果
|
|
|
- // .onClick(() => { // 点击按钮时的回调函数
|
|
|
- //
|
|
|
- // });
|
|
|
- }
|
|
|
- .width(`${this.wheelWidth+26}lpx`)
|
|
|
- .height(`${this.wheelWidth+26}lpx`)
|
|
|
- .backgroundImage($r('[basic].media.xuanzhuankuang'))
|
|
|
- .backgroundImageSize({width:'100%',height:'100%'})
|
|
|
- .backgroundImagePosition(Alignment.Center)
|
|
|
-
|
|
|
- // // 创建滚动区域
|
|
|
- // Scroll() {
|
|
|
- // Column() {
|
|
|
- // // 遍历每个单元格,创建输入框和计数器
|
|
|
- // ForEach(this.cells, (item: Cell, index: number) => {
|
|
|
- // Row() {
|
|
|
- // // 创建文本输入框,显示单元格标题
|
|
|
- // TextInput({ text: item.title })
|
|
|
- // .layoutWeight(1) // 设置输入框占据剩余空间
|
|
|
- // .onChange((value) => { // 输入框内容变化时的回调
|
|
|
- // item.title = value; // 更新单元格标题
|
|
|
- // });
|
|
|
- // // 创建计数器组件
|
|
|
- // CounterComponent({
|
|
|
- // options: {
|
|
|
- // type: CounterType.COMPACT, // 设置计数器类型为紧凑型
|
|
|
- // numberOptions: {
|
|
|
- // label: `当前占比`, // 设置计数器标签
|
|
|
- // value: item.proportion, // 设置计数器初始值
|
|
|
- // min: 1, // 设置最小值
|
|
|
- // max: 100, // 设置最大值
|
|
|
- // step: 1, // 设置步长
|
|
|
- // onChange: (value: number) => { // 计数器值变化时的回调
|
|
|
- // item.proportion = value; // 更新单元格的比例
|
|
|
- // this.calculateAngles(); // 重新计算角度
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // });
|
|
|
- // // 创建删除按钮
|
|
|
- // Button('删除').onClick(() => {
|
|
|
- // this.cells.splice(index, 1); // 从单元格数组中删除当前单元格
|
|
|
- // this.calculateAngles(); // 重新计算角度
|
|
|
- // });
|
|
|
- // }.width('100%').justifyContent(FlexAlign.SpaceBetween) // 设置行的宽度和内容对齐方式
|
|
|
- // .padding({ left: 40, right: 40 }); // 设置左右内边距
|
|
|
- // });
|
|
|
- // }.layoutWeight(1); // 设置滚动区域占据剩余空间
|
|
|
- // }.layoutWeight(1) // 设置滚动区域占据剩余空间
|
|
|
- // .margin({ top: 20, bottom: 20 }) // 设置上下外边距
|
|
|
- // .align(Alignment.Top); // 设置对齐方式为顶部对齐
|
|
|
-
|
|
|
- Button('转一转').fontColor(Color.White)
|
|
|
- .backgroundColor('#fd54e3').width('70%')
|
|
|
- .height(44).borderRadius(20)
|
|
|
- .margin({top:107,bottom:48})
|
|
|
- .onClick(()=>{
|
|
|
- this.startAnimation()
|
|
|
- })
|
|
|
- Row({space:15}) {
|
|
|
- ForEach([2,3,4,5],(item:number,index:number)=>{
|
|
|
- Text((item+1).toString())
|
|
|
- .width(40)
|
|
|
- .height(40)
|
|
|
- .textAlign(TextAlign.Center)
|
|
|
- .border({width:1,color:'#000000'})
|
|
|
- .borderRadius('50%')
|
|
|
- .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=[]
|
|
|
- //如果选中的长度比之前要长
|
|
|
- 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
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- Row(){
|
|
|
- Image($r('[basic].media.zidingyi')).width(16)
|
|
|
- Text('命名').fontSize(12).fontColor(Color.White)
|
|
|
- }.width(64)
|
|
|
- .height(40)
|
|
|
- .borderRadius(20)
|
|
|
- .backgroundColor('rgba(255, 157, 240, 1)')
|
|
|
- .justifyContent(FlexAlign.Center)
|
|
|
- .onClick(()=>{
|
|
|
- this.isshowRename=true
|
|
|
- })
|
|
|
- // .bindSheet($$this.isshowRename,this.reNameBuilder,{
|
|
|
- // width:300,
|
|
|
- // height:318,
|
|
|
- // showClose:false,
|
|
|
- // preferType:SheetType.POPUP
|
|
|
- // }).onClick(()=>{
|
|
|
- // //打开半模态
|
|
|
- // this.isshowRename=true
|
|
|
- // //
|
|
|
- // })
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- // Row(){
|
|
|
- // ForEach([2,3,4,5,6],(item:number,index)=>{
|
|
|
- // Text((item).toString()).width(20).fontColor(Color.Red).onClick(()=>{
|
|
|
- // this.cells=[]
|
|
|
- // for(let i=0;i<item;i++){
|
|
|
- // this.cells.push(new Cell(i+1,1, "转盘"+(i+1), this.colorPalette[i]));
|
|
|
- // }
|
|
|
- // this.calculateAngles(); // 重新计算角度
|
|
|
- //
|
|
|
- // })
|
|
|
- // })
|
|
|
- // }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // 创建添加新内容按钮
|
|
|
- // Button('添加新内容').onClick(() => {
|
|
|
- // // 向单元格数组中添加新单元格
|
|
|
- // // this.cells.push(new Cell(1, "新内容", this.colorPalette[this.colorIndex++ % this.colorPalette.length]));
|
|
|
- // this.calculateAngles(); // 重新计算角度
|
|
|
- // }).margin({ top: 20, bottom: 20 }); // 设置按钮的上下外边距
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }.width('100%').padding({ bottom: this.safeBottom })
|
|
|
- .justifyContent(FlexAlign.Center).onClick(()=>{
|
|
|
- this.isShow=false
|
|
|
- })
|
|
|
- if(this.isShow) {
|
|
|
- Column() {
|
|
|
-
|
|
|
- //允许结果是否重复
|
|
|
- Row() {
|
|
|
- Row({ space: 10 }) {
|
|
|
- Image($r('[basic].media.qiehuan')).width(24)
|
|
|
- Text('允许结果重复').fontWeight(700)
|
|
|
- }
|
|
|
-
|
|
|
- Row() {
|
|
|
- Toggle({ type: ToggleType.Switch ,isOn:$$this.isRepeat})
|
|
|
- .width(38)
|
|
|
- .height(20)
|
|
|
- .selectedColor('rgba(253, 84, 227, 1)') //打开状态下的背景颜色
|
|
|
- .switchStyle({
|
|
|
- pointRadius: 8, //圆形滑块半径
|
|
|
- trackBorderRadius: 14, //滑轨的圆角
|
|
|
- pointColor: Color.White, //圆形滑块颜色 switchPointColor不生效
|
|
|
- unselectedColor: 'rgba(233, 233, 234, 1)' //关闭状态的背景颜色
|
|
|
- })
|
|
|
- .onClick(() => {
|
|
|
- this.isRepeat=!this.isRepeat
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .width('100%')
|
|
|
- .height(40)
|
|
|
- .backgroundColor(Color.White)
|
|
|
- .borderRadius(8)
|
|
|
- .justifyContent(FlexAlign.SpaceBetween)
|
|
|
- .padding({ left: 12, right: 12 })
|
|
|
- .alignItems(VerticalAlign.Center)
|
|
|
-
|
|
|
- Row() {
|
|
|
- Text('每次转动轮盘可能会随机选中相同的选项').fontSize(12).fontColor('rgba(0, 0, 0, 0.45)')
|
|
|
-
|
|
|
- }.width('100%')
|
|
|
- .justifyContent(FlexAlign.Start)
|
|
|
- .padding({ left: 22 })
|
|
|
- .margin({ bottom: 25, top: 10 })
|
|
|
-
|
|
|
- Row() {
|
|
|
- Row({ space: 10 }) {
|
|
|
- Image($r('[basic].media.xuanzhuantime')).width(24)
|
|
|
- Text('旋转时长').fontWeight(700)
|
|
|
- }
|
|
|
-
|
|
|
- Row() {
|
|
|
-
|
|
|
- Counter() {
|
|
|
- Text(this.spinDurationTime.toString() + 's').border({ width: 0 })
|
|
|
- }
|
|
|
- .onInc(() => {
|
|
|
- this.spinDurationTime++
|
|
|
- this.spinDuration = this.spinDurationTime * 1000
|
|
|
- })
|
|
|
- .onDec(() => {
|
|
|
- this.spinDurationTime--
|
|
|
- this.spinDuration = this.spinDurationTime * 1000
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .width('100%')
|
|
|
- .height(40)
|
|
|
- .backgroundColor(Color.White)
|
|
|
- .borderRadius(8)
|
|
|
- .justifyContent(FlexAlign.SpaceBetween)
|
|
|
- .padding({ left: 12, right: 12 })
|
|
|
- .alignItems(VerticalAlign.Center)
|
|
|
-
|
|
|
- }
|
|
|
- .width('100%')
|
|
|
- .height(214)
|
|
|
- .padding({ left: 22, top: 56, right: 22 })
|
|
|
- .borderRadius({ bottomLeft: 20, bottomRight: 20 })
|
|
|
- .linearGradient({
|
|
|
- angle: 135,
|
|
|
- colors: [
|
|
|
- ['rgba(239, 144, 237, 1)', 0.2],
|
|
|
- ['rgba(191, 242, 255, 1)', 1]
|
|
|
- ]
|
|
|
- })
|
|
|
- }
|
|
|
- }.height('100%')
|
|
|
- .backgroundImage($r('[basic].media.backimgNumber'))
|
|
|
- .backgroundImageSize({width:'100%',height:'100%'})
|
|
|
- if(this.isshowRename) {
|
|
|
-
|
|
|
- Column() {
|
|
|
- Column() {
|
|
|
- Row() {
|
|
|
- Text('转盘命名').fontSize(20).fontWeight(500).fontColor('#FF1C1C1C').margin({left:110,right:64,top:24})
|
|
|
- Column() {
|
|
|
- Image($r('[basic].media.quxiaocl')).width(10)
|
|
|
- }.width(24)
|
|
|
- .height(24)
|
|
|
- .backgroundColor(Color.White)
|
|
|
- .justifyContent(FlexAlign.Center)
|
|
|
- .borderRadius('50%')
|
|
|
- .onClick(() => {
|
|
|
- this.isshowRename = false
|
|
|
- })
|
|
|
-
|
|
|
- }.width('100%')
|
|
|
- Column({space:10}){
|
|
|
- ForEach(this.cells,(item:Cell,index:number)=>{
|
|
|
-
|
|
|
- reNameInput({
|
|
|
- text:item.title,
|
|
|
- num:index+1,
|
|
|
- inputChange:(value:string)=>{
|
|
|
- item.title=value
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- }.width(300).height(318)
|
|
|
- .justifyContent(FlexAlign.Start)
|
|
|
- .borderRadius(20)
|
|
|
- .padding({left:16,right:16})
|
|
|
- .linearGradient({
|
|
|
- angle:135,
|
|
|
- colors:[
|
|
|
- ['rgba(248, 211, 249, 1)',0.2],
|
|
|
- ['rgba(192, 242, 255, 1)',1]
|
|
|
- ]
|
|
|
- })
|
|
|
-
|
|
|
- }.width('100%').height('100%').justifyContent(FlexAlign.Center).backgroundColor('rgba(30, 30, 30,0.5)')
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-}
|
|
|
-@Component
|
|
|
-struct reNameInput{
|
|
|
- @Prop text:string=""
|
|
|
- @Prop num:number=1
|
|
|
- inputChange=(value:string)=>{
|
|
|
-
|
|
|
- }
|
|
|
- build() {
|
|
|
- Row({space:10}){
|
|
|
- Text(`转盘${this.num}`)
|
|
|
- TextInput({text:this.text})
|
|
|
- .width(194)
|
|
|
- .height(30)
|
|
|
- .padding(0)
|
|
|
- .border({width:{bottom:1,left:0,right:0,top:0},color:Color.Black})
|
|
|
- .borderRadius(0)
|
|
|
- .backgroundColor(Color.Transparent)
|
|
|
- .onChange((value:string)=>{
|
|
|
- this.inputChange(value)
|
|
|
- })
|
|
|
- }.width('100%')
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// Text('旋转秒数').fontColor(Color.Black)
|
|
|
-// CounterComponent({
|
|
|
-// options: {
|
|
|
-// type: CounterType.COMPACT, // 设置计数器类型为紧凑型
|
|
|
-// numberOptions: {
|
|
|
-// value: this.spinDuration/1000, // 设置计数器初始值 5
|
|
|
-// min: 1, // 设置最小值
|
|
|
-// max: 100, // 设置最大值
|
|
|
-// step: 1, // 设置步长
|
|
|
-// onChange: (value: number) => { // 计数器值变化时的回调
|
|
|
-// this.spinDuration = value*1000;
|
|
|
-// // this.calculateAngles(); // 重新计算角度
|
|
|
-// }
|
|
|
-// }
|
|
|
-// }
|
|
|
-// }).backgroundColor(Color.White)
|
|
|
-
|
|
|
-
|
|
|
-// Row(){
|
|
|
-// Column(){
|
|
|
-// //是否允许结果重复
|
|
|
-// Button('是否允许结果重复').onClick(()=>{
|
|
|
-// this.isRepeat=!this.isRepeat
|
|
|
-// })
|
|
|
-// Text(this.isRepeat+"")
|
|
|
-// }
|
|
|
-//
|
|
|
-// }
|