本篇文章介绍分布式设备间如何共享涂鸦画板的核心功能。
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.c this.cxt.lineWidth = this.lineHeight this.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); //初始化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); }}
复制代码
步骤 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; @Override protected 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(); @Override protected 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"); } @Override public 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; }//取消订阅，置空对端的remoteHandler case 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(); } @Override public 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; //code private 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发送需要同步的Point sendPoint(p) {gameAbility.callAbility({ code: 2000, point: p}).then(result=>{})}
复制代码
(2) 实现多设备共享绘制效果,如代码示例 8 所示,需要通过鸿蒙操作系统的软总线实现,在页面中,需要在 onInit 中订阅 Service Ability 中的回调事件以便获取共享的坐标信息。
代码示例 8
onInit() { //订阅PA事件 this.subscribeRemoteService(); },//订阅PA subscribeRemoteService() { 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 鸿蒙多设备共享涂鸦画板同步
评论