2024年最新鸿蒙开发实例 ｜ 分布式涂鸦_鸿蒙开发大作业(2)

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

this.paintCanvas§
},
//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