1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157
| import { ArrayList } from '@kit.ArkTS' import { Rect } from '@ohos.UiTest'
@Preview @ComponentV2 export struct AirVelocity { @Param @Once minLevel: number = 0 @Param @Once maxLevel: number = 6 @Param @Once currentLevel: number = 3 @Param normalColor: string | number = '#f5f5f5' @Param selectedColor: string | number = '#005eff' @Param backGroundColor: string | number = Color.White @Local private itemHeightRate: number = 0.150 @Local private itemHeight: number = 22 @Local private itemWidth: number = 0 @Local private blankHeightRate: number = 0.019 @Local private blankHeight: number = 3 @Param paddingAll: number = 5 @Param radiusAll: number = 5 @Local private settings: RenderingContextSettings = new RenderingContextSettings(true) @Local private canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) @Local private path: Path2D = new Path2D() @Local private edgeRects: ArrayList<Rect> = new ArrayList() @Event onChange: (oldValue: number, newValue: number) => void = (oldValue, newValue) => {
}
aboutToAppear(): void { if (this.minLevel < 0) { this.minLevel = 0 } if (this.maxLevel < this.minLevel) { this.maxLevel = this.minLevel this.currentLevel = this.maxLevel } }
build() { Column() { Canvas(this.canvasContext) .width('100%') .height('100%') .onReady(() => { this.drawRects() }) .gesture(GestureGroup(GestureMode.Exclusive, TapGesture() .onAction((event: GestureEvent) => { if (event.fingerList?.length) { console.debug('AirVelocity TapGesture', JSON.stringify(event)) let x = event.fingerList[0].localX let y = event.fingerList[0].localY this.drawRoundRectByTouch(x, y) } }), PanGesture() .onActionUpdate((event: GestureEvent) => { if (event.fingerList?.length) { console.debug('AirVelocity PanGesture onActionUpdate', JSON.stringify(event)) let x = event.fingerList[0].localX let y = event.fingerList[0].localY this.drawRoundRectByTouch(x, y) } }) .onActionEnd((event: GestureEvent) => { console.debug('AirVelocity PanGesture onActionEnd', JSON.stringify(event)) }) , )) } .width('100%') .height('100%') .padding(this.paddingAll) .borderRadius(this.radiusAll) .backgroundColor(this.backGroundColor) }
drawRoundRectByTouch(touchX: number, touchY: number) { if (touchY > this.canvasContext.height) { this.onRedrawRects(this.maxLevel) return } let rect: Rect for (let i = 0; i < this.edgeRects.length; i++) { rect = this.edgeRects[i] if (rect && touchX >= rect.left && touchX <= rect.right && touchY >= rect.top && touchY <= rect.bottom) { this.onRedrawRects(i) break } } }
private onRedrawRects(destIndex: number) { let old = this.currentLevel this.currentLevel = this.maxLevel - destIndex this.drawRects() this.onChange(old, this.currentLevel) }
private drawRects() { this.itemWidth = this.canvasContext.width let height = this.canvasContext.height * 6 / this.maxLevel this.itemHeight = height * this.itemHeightRate this.blankHeight = height * this.blankHeightRate this.edgeRects.clear() this.canvasContext.reset() let itemX: number = 0, itemY: number for (let index = 0; index < this.maxLevel; index++) { itemY = (this.itemHeight + this.blankHeight) * index this.drawRoundRect(index, itemX, itemY, this.itemWidth, this.itemHeight) } }
private drawRoundRect(index: number, x: number, y: number, width: number, height: number) { if (this.maxLevel - index > this.currentLevel) { this.canvasContext.strokeStyle = this.normalColor this.canvasContext.fillStyle = this.normalColor } else { this.canvasContext.strokeStyle = this.selectedColor this.canvasContext.fillStyle = this.selectedColor } this.path = new Path2D() this.path.moveTo(x + this.radiusAll, y) this.path.quadraticCurveTo(x, y, x, y + this.radiusAll)
let bottomLeftStartY = y + height - this.radiusAll this.path.lineTo(x, bottomLeftStartY) this.path.quadraticCurveTo(x, bottomLeftStartY + this.radiusAll, x + this.radiusAll, y + height)
let bottomRightStartX = x + width - this.radiusAll this.path.lineTo(bottomRightStartX, y + height) this.path.quadraticCurveTo(x + width, y + height, x + width, y + height - this.radiusAll)
this.path.lineTo(x + width, y + this.radiusAll) this.path.quadraticCurveTo(x + width, y, x + width - this.radiusAll, y) this.path.lineTo(x + this.radiusAll, y)
this.path.closePath() this.canvasContext.fill(this.path)
let rect: Rect = { left: x, top: y, right: x + width, bottom: y + height } if (!this.edgeRects.has(rect)) { this.edgeRects.add(rect) } } }
|