直播平台源代码，分布式涂鸦

 直播平台源代码，分布式涂鸦

 

 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
    }
}

 

 以上就是直播平台源代码，分布式涂鸦的全部代码，更多内容请关注之后的文章