HarmonyOS Next开发----k线图滑动问题

前言

最近做股票软件鸿蒙版本的适配，K线趋势图的手势交互上遇到了问题，这里记录下~

功能需求：

实现k线趋势图滑动及fling的效果

思路：

1. 借鉴Flutter版本的思路，在K线趋势图上面叠加一个Scroll布局，使用系统提供给我们的Scroller来计算手势滑动及fling效果。
2. 监听滑动手势PanGesture来处理，fling的惯性滑动效果需要自己模拟计算。

 Scroll(this.mScroller) {Text('').width('100%')}.onAreaChange((oldValue: Area, newValue: Area)=>{this.mScroller.scrollEdge(Edge.End)}).height('100%').width(this.getTotalKLineWidth() + 200).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.On).friction(0.5).onScroll((xOffset, yOffset)=>{let result: boolean = this.mGestureHelper.scroll(this.mScroller.currentOffset().xOffset, this.getTotalKLineWidth());if (result) {this.onDraw();}}).gesture(GestureGroup(GestureMode.Parallel,LongPressGesture().onAction((event?: GestureEvent) => {if (!this.mCanHorizontalScroll) {this.mCanHorizontalScroll = true;}this.setCrossState(UPMarketUIGestureHelper.CROSS_STATE_SHOW);this.mGestureHelper.updateCrossPoint(event?.fingerList[0].localX, event?.fingerList[0].localY);this.onDraw();}).onActionEnd((event?: GestureEvent) => {this.setCrossState(UPMarketUIGestureHelper.CROSS_STATE_NORMAL);this.onDraw();}).onActionCancel((event?: GestureEvent) => {this.setCrossState(UPMarketUIGestureHelper.CROSS_STATE_NORMAL);this.onDraw();})), GestureMask.Normal)

由于k线趋势图初始位置是展示最新的k线，然而Scroller不能设置初始位置，尝试在onAreaChange中滑动到最后，但是会有动画效果，所以这个思路实现不了。

使用平移手势接口：

.gesture(GestureGroup(GestureMode.Parallel,PanGesture({ direction: this.mCanHorizontalScroll ? PanDirection.All : PanDirection.Horizontal, distance: 1}).onActionStart(() => {if (!this.mIsLongPressed) {this.mGestureHelper.startScroll();}}).onActionEnd(() => {this.mGestureHelper.stopScroll();this.onDraw();}).onActionUpdate((event?: GestureEvent) => {if (event) {if (this.mIsLongPressed) {let reallyOffsetX: number = event.offsetX - this.mLastOffsetX;let reallyOffsetY: number = event.offsetY - this.mLastOffsetY;this.mLastOffsetX = event.offsetX;this.mLastOffsetY = event.offsetY;this.mCrossTouchPoint.offset(reallyOffsetX, reallyOffsetY);this.mCrossTouchPoint.y = Math.max(this.mMainRenderTitleHeight + 1, this.mCrossTouchPoint.y);this.mCrossTouchPoint.y = Math.min(this.totalHeight - 1, this.mCrossTouchPoint.y);this.mGestureHelper.updateCrossPoint(this.mCrossTouchPoint.x, this.mCrossTouchPoint.y);this.onDraw();} else {if (this.mGestureHelper.scroll(event.offsetX, this.totalWidth)) {this.onDraw();}}}}),LongPressGesture().onAction((event?: GestureEvent) => {if (!this.mCanHorizontalScroll) {this.mCanHorizontalScroll = true;}this.setCrossState(UPMarketUIGestureHelper.CROSS_STATE_SHOW);this.mCrossTouchPoint.set(event?.fingerList[0].localX, event?.fingerList[0].localY);this.mGestureHelper.updateCrossPoint(this.mCrossTouchPoint.x, this.mCrossTouchPoint.y);this.onDraw();}).onActionEnd((event?: GestureEvent) => {this.setCrossState(UPMarketUIGestureHelper.CROSS_STATE_NORMAL);this.onDraw();}).onActionCancel((event?: GestureEvent) => {this.setCrossState(UPMarketUIGestureHelper.CROSS_STATE_NORMAL);this.onDraw();}),PinchGesture().onActionStart(() => {this.mGestureHelper.startScale();}).onActionUpdate((event) => {console.log("UPMarketUISDK  PinchGesture scale: " + event.scale);if(this.mGestureHelper.scale(event.scale)) {this.onDraw();}})), GestureMask.Normal)