鸿蒙开发实例 ｜ 分布式涂鸦

本篇文章介绍分布式设备间如何共享涂鸦画板的核心功能。

01、实现涂鸦作品发送至已连接手机在涂鸦画板中有 3 个核心功能:

(1) 涂鸦者选择好希望连接的设备后,可以直接把涂鸦成果流转给对应的设备。
(2) 其他设备接收流转的涂鸦后,可以在涂鸦的基础上添加涂鸦或者修改。
(3) 修改后的涂鸦可以继续流转给涂鸦者,或者流转到其他设备上,如电视上。

这 3 个功能都是在连接好附近的设备后才能实现的。鸿蒙操作系统中对于室内网络的通信提供了对软总线的支持,软总线通过屏蔽设备的连接方式,采用一种最优的方式进行多设备的发现、连接和通信,如图 1 所示。

■ 图 1 华为鸿蒙分布式软总线

在 JavaScript 框架中提供了 FeatureAbility.continueAbility 方法,这种方法实现了设备间应用流转的所有功能。在需要流转的时候,只需保持好设备流转前的数据,在设备流转后,在其他设备上即可恢复流转前缓存的数据。

首先在需要流转的页面添加 onStartContinuation 和 onSaveData 这两种方法。流转后还需要用到的方法是 onRestoreData 和 onCompleteContinuation,设备间流转触发的生命周期方法如图 2 所示,Ability 流转方法如代码示例 1 所示。

■ 图 2 鸿蒙 Ability 流转图

代码示例 1 Ability 流转方法

transforAbility: async function transfer() {try {await FeatureAbility.continueAbility(0,null)} catch (e) {console.error("迁移出错：" + JSON.stringify(e))}},onStartContinuation: function onStartContinuation() {//判断当前的状态是不是适合迁移 console.error("trigger onStartContinuation");return true;},onCompleteContinuation: function onCompleteContinuation(code) {//迁移操作完成，code 返回结果 console.error("trigger onCompleteContinuation: code = " + code);return true},onSaveData: function onSaveData(saveData) {//数据保存到 savedData 中进行迁移。saveData.points = this.sharePoints;return true},onRestoreData: function onRestoreData(restoreData) {//收到迁移数据，恢复。this.sharePoints = restoreData.points;return true}

这里需要注意,如果需要实现应用流转,则 onStartContinuation、onCompleteContinuation、onSaveData 和 onRestoreData 的返回值都必须为 true,否则无法流转和恢复数据。

Ability 在流转后,数据需要恢复过来,所以需要在绘制坐标的时候,把所有的坐标保存到一个数组中,sharePoints 是用来保存 touchMove 中的所有坐标信息的数组,如代码示例 2 所示。

代码示例 2 实现流转

export default {data: {cxt: {},sharePoints: [],lineHeight:3},onShow() {this.cxt = this.$element("board").getContext("2d");//恢复数据后，重新绘制 if (this.sharePoints.length > 0) {for (let index = 0; index < this.sharePoints.length; index++) {this.paintCanvas(this.sharePoints[index])}}},//Touch start 事件 painStart(e) {this.isShow = true;var p = {x: e.touches[0].localX,y: e.touches[0].localY,c: this.selColor,flag: "start"}this.sharePoints.push(p)//本地绘制 this.paintCanvas(p)},//Touch move 事件 paint(e) {

    //坐标    var p = {        x: e.touches[0].localX,        y: e.touches[0].localY,        c: this.selColor,        flag: "line"    }    this.sharePoints.push(p)

this.paintCanvas(p)},//Touch 事件结束 paintEnd(e) {this.cxt.closePath();},//本地绘制自由线条 paintCanvas(point) {if (point.flag == "start") {this.cxt.beginPath();this.cxt.strokeStyle = point.cthis.cxt.lineWidth = this.lineHeightthis.cxt.lineCap = "round"this.cxt.lineJoin = "round"this.cxt.moveTo(point.x,point.y);} else if (point.flag == "line") {this.cxt.lineTo(point.x,point.y);this.cxt.stroke()}},

//启动流转 setUpRemote: async function transfer() {try {await FeatureAbility.continueAbility(0,null)} catch (e) {console.error("迁移出错：" + JSON.stringify(e))}},onStartContinuation: function onStartContinuation() {//判断当前的状态是不是适合迁移 return true;},onCompleteContinuation: function onCompleteContinuation(code) {//迁移操作完成，code 返回结果 return true},onSaveData: function onSaveData(saveData) {//数据保存到 savedData 中进行迁移。saveData.points = this.sharePoints;return true},onRestoreData: function onRestoreData(restoreData) {//收到迁移数据，恢复。this.sharePoints = restoreData.points;return true}}

2、实现画板实时共享功能多设备间实现涂鸦画板数据同步,在鸿蒙操作系统中,需要通过分布式数据库来完成。同时需要 Service Ability 把分布式数据库中的数据推送给前端的 FA(JavaScript 页面)。

下面介绍如何为涂鸦画板添加实时共享功能,步骤如下。

步骤 1: 通过分布式数据库实现数据共享。定义一个 BoardServiceAbility 的 PA,如代码示例 3 所示,重写 onStart 方法,在 onStart 方法中引用和创建分布式数据服务,storeID 为数据库名称。

代码示例 3 创建分布式数据服务

public class BoardServiceAbility extends Ability {private KvManagerConfig config;private KvManager kvManager;private String storeID = "board";private SingleKvStore singleKvStore;

@Overrideprotected void onStart(Intent intent) {super.onStart(intent);//初始化 managerconfig = new KvManagerConfig(this);kvManager = KvManagerFactory.getInstance().createKvManager(config);

//创建数据库Options options = new Options();

options.setCreateIfMissing(true).setEncrypt(false).setKvStoreType(KvStoreType.SINGLE_VERSION);singleKvStore = kvManager.getKvStore(options, storeID);

}}

步骤 2: Service Ability 实现页面数据订阅与同步。把需要共享的数据保存到鸿蒙分布式数据库中,如果需要在页面中访问这些实时的数据,则需要通过创建 Service Ability 来推送分布式数据库中的数据。创建推送数据的逻辑如代码示例 4 所示。

代码示例 4 推送数据

package com.cangjie.jsabilitydemo.services;

import com.cangjie.jsabilitydemo.utils.DeviceUtils;import ohos.aafwk.ability.Ability;import ohos.aafwk.content.Intent;import ohos.data.distributed.common.;import ohos.data.distributed.user.SingleKvStore;import ohos.rpc.;import ohos.hiviewdfx.HiLog;import ohos.hiviewdfx.HiLogLabel;import ohos.utils.zson.ZSONObject;

import java.util.*;

public class BoardServiceAbility extends Ability {

private KvManagerConfig config;private KvManager kvManager;private String storeID = "board";private SingleKvStore singleKvStore;
@Overrideprotected void onStart(Intent intent) {    super.onStart(intent);    //初始化manager    config = new KvManagerConfig(this);    kvManager = KvManagerFactory.getInstance().createKvManager(config);
    //创建数据库    Options options = new Options();    options.setCreateIfMissing(true).setEncrypt(false).setKvStoreType(KvStoreType.SINGLE_VERSION);    singleKvStore = kvManager.getKvStore(options, storeID);
}

private static final String TAG = "BoardServiceAbility";private MyRemote remote = new MyRemote();
@Overrideprotected IRemoteObject onConnect(Intent intent) {    super.onConnect(intent);    return remote.asObject();}

}

步骤 3:在多个分布式设备中进行数据同步,创建一个 RPC 代理类 MyRemote,代理类用于远程通信连接。MyRemote 类可以是 BoardServiceAbility 这个 PA 的内部类。

实现远程数据调用,这里最关键的是 onRemoteRequest 方法,这种方法的 code 参数是客户端发送过来的编号,通过这个编号便可以处理不同的客户端请求,如代码示例 5 所示。

代码示例 5 远程代理

class MyRemote extends RemoteObject implements IRemoteBroker {

private static final int ERROR = -1;private static final int SUCCESS = 0;private static final int SUBSCRIBE = 3000;private static final int UNSUBSCRIBE = 3001;private static final int SAVEPOINTS= 2000; //保存绘制的坐标
private Set<IRemoteObject> remoteObjectHandlers = new HashSet<IRemoteObject>();
MyRemote() {    super("MyService_MyRemote");}
@Overridepublic boolean onRemoteRequest(int code, MessageParcel data, MessageParcel reply, MessageOption option) throws RemoteException {
    switch (code) {        case SAVEPOINTS:{            String zsonStr=data.readString();            BoardRequestParam param= ZSONObject.stringToClass(zsonStr,BoardRequestParam.class);            Map<String, Object> zsonResult = new HashMap<String, Object>();            zsonResult.put("data", param.getPoint());            try {                singleKvStore.putString("point", param.getPoint());            } catch (KvStoreException e) {                e.printStackTrace();            }            zsonResult.put("code", SUCCESS);            reply.writeString(ZSONObject.toZSONString(zsonResult));            break;        }

//开启订阅，保存对端的 remoteHandler，用于上报数据 case SUBSCRIBE: {remoteObjectHandlers.add(data.readRemoteObject());startNotify();Map<String, Object> zsonResult = new HashMap<String, Object>();zsonResult.put("code", SUCCESS);reply.writeString(ZSONObject.toZSONString(zsonResult));break;}//取消订阅，置空对端的 remoteHandlercase UNSUBSCRIBE: {remoteObjectHandlers.remove(data.readRemoteObject());Map<String, Object> zsonResult = new HashMap<String, Object>();zsonResult.put("code", SUCCESS);reply.writeString(ZSONObject.toZSONString(zsonResult));break;}default: {reply.writeString("service not defined");return false;}}return true;}

public void startNotify() {    new Thread(() -> {        while (true) {            try {                Thread.sleep(30); //每30ms发送一次

BoardReportEvent();

            } catch (RemoteException | InterruptedException e) {                break;            }        }    }).start();}
private void BoardReportEvent() throws RemoteException {    String points = "";    try {        points = singleKvStore.getString("point");        singleKvStore.delete("point");    } catch (KvStoreException e) {        e.printStackTrace();    }    MessageParcel data = MessageParcel.obtain();    MessageParcel reply = MessageParcel.obtain();    MessageOption option = new MessageOption();    Map<String, Object> zsonEvent = new HashMap<String, Object>();    zsonEvent.put("point", points);    data.writeString(ZSONObject.toZSONString(zsonEvent));    for (IRemoteObject item : remoteObjectHandlers) {        item.sendRequest(100, data, reply, option);    }    reply.reclaim();    data.reclaim();}
@Overridepublic IRemoteObject asObject() {    return this;}

}

这里需要向页面订阅的方法提供推送的数据,需要定义 startNotify 方法启动一个线程来推送数据,推送的数据是在 BoardReportEvent 中定义的,推送的数据是从分布式数据库中获取的,通过 singleKvStore.getString("point")方法获取共享的数据。

这里还需要创建 BoardRequestParam 类,用于序列化页面传过来的字符串,并将字符串转换成对象。Point 是坐标信息,如 {x:1,y:2,flag:"start"},是从前端的 FA 中传递过来的数据,如代码示例 6 所示。

代码示例 6 序列化页面传过来的字符串 BoardRequestParam.java

package com.cangjie.jsabilitydemo.services;

public class BoardRequestParam {private int code; //codeprivate String point; //坐标

public int getCode() {    return code;}
public void setCode(int code) {    this.code = code;}
public String getPoint() {    return point;}
public void setPoint(String point) {    this.point = point;}

}

这样就完成了画板的 Service Ability 的创建,接下来需要改造前面的 JavaScript 页面代码。

(1) 首先需要修改页面 canvas 的 touchStart、touchMove 和 touchEnd 事件中的绘制方法。要实现实时同步共享画板,就不能直接在 touch 事件中绘制线了。

需要在 touchStart 中将起点的坐标发送到上面定义的 Service Ability 中,PA 接收到请求后,把这个坐标点放到分布式数据服务中。同时页面可以订阅 PA,以便页面获取推送的坐标信息。

touchMove 将终点的坐标发送到上面定义的 Service Ability 中,PA 接收到请求后,把这个坐标点放到分布式数据服务中。同时页面可以订阅 PA,以便页面获取推送的坐标信息,如代码示例 7 所示。

代码示例 7 向 PA 发送需要同步的 Point

//起点 var p = {x: e.touches[0].localX,y: e.touches[0].localY,c: this.selColor,flag: "start"}//终点 var p = {x: e.touches[0].localX,y: e.touches[0].localY,c: this.selColor,flag: "line"}//向 PA 发送需要同步的 PointsendPoint(p) {gameAbility.callAbility({code: 2000,point: p}).then(result=>{})}

(2) 实现多设备共享绘制效果,如代码示例 8 所示,需要通过鸿蒙操作系统的软总线实现,在页面中,需要在 onInit 中订阅 Service Ability 中的回调事件以便获取共享的坐标信息。

代码示例 8

onInit() {//订阅 PA 事件 this.subscribeRemoteService();},//订阅 PAsubscribeRemoteService() {gameAbility.subAbility(3000,(data)=>{console.error(JSON.stringify(data));if (data.data.point != "") {var p = JSON.parse(data.data.point)this.paintCanvas(p)prompt.showToast({message: "POINTS：" + JSON.stringify(p)})}}).then(result=>{//订阅状态返回 if (result.code != 0)return console.warn("订阅失败");console.log("订阅成功");});},

这个订阅方法,只需在页面启动后调用一次就可以了,所以放在 onInit 方法中进行调用。

这里通过 subscribeRemoteService 方法来订阅从 Service Ability 中推送过来的数据,gameAbility.subAbility 方法就是订阅 Service Ability 推送的方法,3000 是调用 ServiceAbility 接收的编号。鸿蒙多设备共享涂鸦画板的效果如图 9 所示。

■ 图 9 鸿蒙多设备共享涂鸦画板同步