ACE框架特性调研—手势事件流程分析

系统 OpenHarmony
ACE全称是Ability Cross-platform Environment (元能力跨平台执行环境),是应用在OpenHarmony上的UI框架。

​想了解更多内容,请访问:​

​51CTO OpenHarmony技术社区​

​https://ost.51cto.com​

前言:

ACE全称是Ability Cross-platform Environment (元能力跨平台执行环境),是应用在OpenHarmony上的UI框架。作为一个UI框架,需要提供视图布局,UI组件,事件响应机制等的支持,并且当前主流的应用终端都为触摸屏,UI的操作大都通过手势完成,我们这里就对ACE框架的手势事件流程做一个简单的分析。

事件手势分类:

从鸿蒙开发者网站提供的API上我们可以看到,在基于TS扩展的开发范式说明里,单独对手势做了一个类别,而在基于JS扩展的开发范式说明里,则是归类到通用事件里,名称也略有不同:

代码结构与简单类图:

代码结构:

./ace/ace_engine/core
|-- event #event主文件夹,定义了Event的Trigger,Maker,Handler,convertor等处理类
| |-- include
| |-- src
|-- gesture #gesture主文件夹,定义了各种手势的具体实现类与对应的Recognizer
| |-- include
| |-- src
|-- components #组件文件夹
| |-- gesture_listenser #对触摸目标对象做一些处理,注册Recognizer等。

gesture文件夹下的类图:

这里仅对gesture文件下的文件做一个类图梳理,可以很清晰的看到Gesture类和Recognizer类的对应关系,其中Gesture类会创建一个对应的Recognizer,并set对应相关的OnActionID,priority和Mask,而Recognizer类则是处理手势相关的事件逻辑等。

手势事件流程:

我们仅观测手势事件在ACE框架中的流程,ACE框架中,AceAbility类是运行起始点,一切都从这里开始:

手势事件时序图:

手势事件在ACE框架中的入口是OnPointerEvent,AceAbility里面获取到Container容器和FlutterAceView后就开始对这个pointer事件做一系列的处理:

手势事件示例代码流程:

我们以Pinch为例,对整个手势事件的流程的关键代码做一个分析。

当应用调用相关接口后,JS的Binding操作创建Gesture,然后Gesture里面会创建对应的Recognizer:

JSClass<JSPinchGesture>::Declare("PinchGesture");
JSClass<JSPinchGesture>::StaticMethod("create", &JSPinchGesture::Create, opt);
JSClass<JSPinchGesture>::StaticMethod("pop", &JSGesture::Pop);
JSClass<JSPinchGesture>::StaticMethod("onActionStart", &JSGesture::JsHandlerOnActionStart);
JSClass<JSPinchGesture>::StaticMethod("onActionUpdate", &JSGesture::JsHandlerOnActionUpdate);
JSClass<JSPinchGesture>::StaticMethod("onActionEnd", &JSGesture::JsHandlerOnActionEnd);
JSClass<JSPinchGesture>::StaticMethod("onActionCancel", &JSGesture::JsHandlerOnActionCancel);
JSClass<JSPinchGesture>::Bind(globalObj);

Create函数里面会创建一个Gesture实例,并将其push到gestureComponent中:

void JSPinchGesture::Create(const JSCallbackInfo& args)
{
int32_t fingersNum = DEFAULT_PINCH_FINGER;
double distanceNum = DEFAULT_PINCH_DISTANCE;
if (args.Length() > 0 && args[0]->IsObject()) {
JSRef<JSObject> obj = JSRef<JSObject>::Cast(args[0]);
JSRef<JSVal> fingers = obj->GetProperty(GESTURE_FINGERS);
JSRef<JSVal> distance = obj->GetProperty(GESTURE_DISTANCE);
if (fingers->IsNumber()) {
int32_t fingersNumber = fingers->ToNumber<int32_t>();
fingersNum = fingersNumber <= DEFAULT_PINCH_FINGER ? DEFAULT_PINCH_FINGER : fingersNumber;
}
if (distance->IsNumber()) {
double distanceNumber = distance->ToNumber<double>();
distanceNum = LessNotEqual(distanceNumber, 0.0) ? DEFAULT_PINCH_DISTANCE : distanceNumber;
}
}
auto gestureComponent = ViewStackProcessor::GetInstance()->GetGestureComponent();
auto gesture = AceType::MakeRefPtr<OHOS::Ace::PinchGesture>(fingersNum, distanceNum);
gestureComponent->PushGesture(gesture);
}

Gesutre创建对应的Reconizer,来添加对应的事件回调以及设置priority和gestureMask

GestureMask枚举说明:

RefPtr<GestureRecognizer> PinchGesture::CreateRecognizer(WeakPtr<PipelineContext> context)
{
auto newContext = context.Upgrade();
if (!newContext) {
LOGE("fail to create pinch recognizer due to context is nullptr");
return nullptr;
}
double distance = newContext->NormalizeToPx(Dimension(distance_, DimensionUnit::VP));
auto pinchRecognizer = AceType::MakeRefPtr<OHOS::Ace::PinchRecognizer>(fingers_, distance);
//JS支持什么回调事件pinchRecognizer就需要添加对应的事件
if (onActionStartId_) {
pinchRecognizer->SetOnActionStart(*onActionStartId_);
}
if (onActionUpdateId_) {
pinchRecognizer->SetOnActionUpdate(*onActionUpdateId_);
}
if (onActionEndId_) {
pinchRecognizer->SetOnActionEnd(*onActionEndId_);
}
if (onActionCancelId_) {
pinchRecognizer->SetOnActionCancel(*onActionCancelId_);
}
pinchRecognizer->SetPriority(priority_);//设置优先级
pinchRecognizer->SetPriorityMask(gestureMask_);//设置GestureMask

return pinchRecognizer;
}

事件流程中,Ace起始触发:

void AceAbility::OnPointerEvent(std::shared_ptr<MMI::PointerEvent>& pointerEvent)
{
auto container = Platform::AceContainer::GetContainer(abilityId_);//获取Container
if (!container) {
return;
}
auto flutterAceView = static_cast<Platform::FlutterAceView*>(container->GetView());//获取View
if (!flutterAceView) {
return;
}
flutterAceView->DispatchTouchEvent(flutterAceView, pointerEvent);//分发事件
}

Container里面初始化CallBack,context进行PostTask操作,aceView注册回调:

    auto&& touchEventCallback = [context = pipelineContext_, id = instanceId_](const TouchEvent& event) {
ContainerScope scope(id);
context->GetTaskExecutor()->PostTask(
[context, event]() {
context->OnTouchEvent(event);
context->NotifyDispatchTouchEventDismiss(event);
},
TaskExecutor::TaskType::UI);
};
aceView_->RegisterTouchEventCallback(touchEventCallback);

PipelineContext的OnTouchEvent进行处理,里面EventManager的TouchTest进行触摸测试获取触摸事件目标列表touchTestResults_,具体实现在RenderNode函数TouchTest里,TouchTest类似前端的事件冒泡机制,它先从顶部节点开始对所有RenderNode进行深度遍历,然后从最底层的节点开始向上将每个节点收集到一个为TouchTestResult类型的result变量中,最后根据该result进行事件分发。

bool RenderNode::TouchTest(const Point& globalPoint, const Point& parentLocalPoint, const TouchRestrict& touchRestrict,
TouchTestResult& result)
{
if (disableTouchEvent_ || disabled_) {
return false;
}
Point transformPoint = GetTransformPoint(parentLocalPoint);
//判断触摸是否在组件区域
if (!InTouchRectList(transformPoint, GetTouchRectList())) {
return false;
}
const auto localPoint = transformPoint - GetPaintRect().GetOffset();
bool dispatchSuccess = false;
const auto& sortedChildren = SortChildrenByZIndex(GetChildren());
//进行深度遍历
if (IsChildrenTouchEnable()) {
for (auto iter = sortedChildren.rbegin(); iter != sortedChildren.rend(); ++iter) {
auto& child = *iter;
if (!child->GetVisible() || child->disabled_ || child->disableTouchEvent_) {
continue;
}
if (child->TouchTest(globalPoint, localPoint, touchRestrict, result)) {
dispatchSuccess = true;
break;
}
if (child->IsTouchable() && (child->InterceptTouchEvent() || IsExclusiveEventForChild())) {
auto localTransformPoint = child->GetTransformPoint(localPoint);
for (auto& rect : child->GetTouchRectList()) {
if (rect.IsInRegion(localTransformPoint)) {
dispatchSuccess = true;
break;
}
}
}
}
}
auto beforeSize = result.size();
for (auto& rect : GetTouchRectList()) {
if (touchable_ && rect.IsInRegion(transformPoint)) {
// Calculates the coordinate offset in this node.
globalPoint_ = globalPoint;
const auto coordinateOffset = globalPoint - localPoint;
coordinatePoint_ = Point(coordinateOffset.GetX(), coordinateOffset.GetY());
OnTouchTestHit(coordinateOffset, touchRestrict, result);
break;
}
}
auto endSize = result.size();
return (dispatchSuccess || beforeSize != endSize) && IsNotSiblingAddRecognizerToResult();
}

事件的分发,touchTestResults_是上面代码TouchTest里面获取:

bool EventManager::DispatchTouchEvent(const TouchEvent& point)
{
ACE_FUNCTION_TRACE();
const auto iter = touchTestResults_.find(point.id);
if (iter != touchTestResults_.end()) {
bool dispatchSuccess = true;
for (auto entry = iter->second.rbegin(); entry != iter->second.rend(); ++entry) {
if (!(*entry)->DispatchEvent(point)) {//Recognizer处理
dispatchSuccess = false;
break;
}
}
//如果有一个手势识别器已经获胜,其他手势识别器仍然会受到事件影响,每个识别器需要自己过滤额外的事件。
if (dispatchSuccess) {
for (const auto& entry : iter->second) {
if (!entry->HandleEvent(point)) {///Recognizer处理
break;
}
}
}
//如果事件类型为UP(结束)或者CANCEL(被打断),则移除该事件
if (point.type == TouchType::UP || point.type == TouchType::CANCEL) {
GestureReferee::GetInstance().CleanGestureScope(point.id);
touchTestResults_.erase(point.id);
}
return true;
}
return false;
}

RenderGestureListener继承RenderProxy类,RenderProxy继承自RenderNode类,RenderGestureListener重新实现了OnTouchTestHit函数,以返回用于接收触摸事件的触摸目标对象,coordinateOffset作为recognizer来计算触摸点的局部位置。这里面注册pinchRecognizer,这样在接收到pinch事件时即可触发创建pinchRecognizer时添加的事件回调:

void RenderGestureListener::OnTouchTestHit(const Offset& coordinateOffset, const TouchRestrict& touchRestrict, TouchTestResult& result)
{
/***省略一些的Recognizer注册代码**/
if (clickRecognizer_) {
clickRecognizer_->SetCoordinateOffset(coordinateOffset);
result.emplace_back(clickRecognizer_);
}
if (pinchRecognizer_) {
pinchRecognizer_->SetCoordinateOffset(coordinateOffset);
result.emplace_back(pinchRecognizer_);
}
}

此外,每个Recognizer类都重新实现ReconcileFrom函数将给定recognizer的状态转换为this。 实现必须检查给定的recognizer类型是否与当前的类型匹配。 如果匹配失败,返回值应该为false 如果成功则为true

bool PinchRecognizer::ReconcileFrom(const RefPtr<GestureRecognizer>& recognizer)
{
RefPtr<PinchRecognizer> curr = AceType::DynamicCast<PinchRecognizer>(recognizer);
if (!curr) {
Reset();
return false;
}
if (curr->fingers_ != fingers_ || curr->distance_ != distance_ || curr->priorityMask_ != priorityMask_) {
Reset();
return false;
}
onActionStart_ = std::move(curr->onActionStart_);
onActionUpdate_ = std::move(curr->onActionUpdate_);
onActionEnd_ = std::move(curr->onActionEnd_);
onActionCancel_ = std::move(curr->onActionCancel_);

return true;
}

最后每个Recognizer类里都有相应事件的具体处理逻辑函数HandleXXXEVENT对事件做处理,调用SendCallbackMsg函数将信息传递到GestureEvent里:

void HandleTouchDownEvent(const TouchEvent& event) override;
void HandleTouchUpEvent(const TouchEvent& event) override;
void HandleTouchMoveEvent(const TouchEvent& event) override;
void HandleTouchCancelEvent(const TouchEvent& event) override;
void PinchRecognizer::SendCallbackMsg(const std::unique_ptr<GestureEventFunc>& callback)
{
if (callback && *callback) {
GestureEvent info;
info.SetTimeStamp(time_);
info.SetScale(scale_);
info.SetPinchCenter(pinchCenter_);
info.SetDeviceId(deviceId_);
info.SetSourceDevice(deviceType_);
(*callback)(info);
}
}

GestureEvent给上层JS调用,如:JsGestureFunction::Execute(const GestureEvent& info)

手势事件代码流程总结:

我们再用文字流程的方式对时序图和代码流程做一个总结:

总结:

在ACE框架中,手势和事件都是相对复杂的板块,一篇文章无法涵盖全部信息,本文仅对手势事件的流程做一个简单阐述,难免有些疏漏,欢迎指正补充,有兴趣的读者也可以考虑对其进一步研究。

引用:

通用事件与通用手势说明:

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md。

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md。

​想了解更多内容,请访问:​

​51CTO OpenHarmony技术社区​

​https://ost.51cto.com​

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-08-09 14:32:34

鸿蒙HarmonyOS应用

2023-01-04 15:24:46

ACE组件UI布局

2023-02-17 18:06:33

微服务架构

2021-05-07 09:35:30

鸿蒙HarmonyOS应用

2021-10-19 08:33:10

Android手势检测

2010-01-04 16:07:35

Office市场分析

2022-11-30 07:49:49

交互事件屏幕手势识别

2010-08-09 11:14:36

Flex事件处理

2015-08-27 16:15:26

Windwos 10特性

2010-08-04 13:23:29

Flex事件

2020-10-22 10:58:23

Ryuk 勒索

2010-01-22 17:22:49

VB.NET事件访问器

2022-03-22 08:59:32

勒索软件网络安全网络攻击

2009-11-06 09:30:35

WCF服务框架

2021-08-16 15:49:31

开发框架单线程异步

2015-07-22 10:34:59

手势密码源码

2012-08-28 09:54:35

SilverlightRapidSLSilverlight

2011-05-28 14:25:57

设计技巧UIAndroid

2010-05-24 13:04:55

MySQL 事件调度器

2022-04-14 16:00:51

事件响应流程企业
点赞
收藏

51CTO技术栈公众号