Cocos Creator 实现画板（你画我猜）

前言

本例是基于cocos官方推荐raphael实现的。其中画板与看板的同步处理我采用的是在画板画完一条线之后看板再同步数据来显示画线过程。

一、实现效果如下：

二、画板核心代码

1、初始化画板参数

 onLoad: function () {

        // 初始化参数
        this.lineWidth = 5;
        this.strokeColor = cc.color(0, 0, 0);
        this.isClearMode = false;
        this.group = this.addComponent('R.group');

        // 绑定触摸通知事件通知
        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            onTouchBegan: this.onTouchBegan.bind(this),
            onTouchMoved: this.onTouchMoved.bind(this),
            onTouchEnded: this.onTouchEnded.bind(this),
        }, this.node);
    },复制代码

需要注意的事项：

① 本例使用的是 raphael 库的 group 的概念来处理的画板中的线

2、触摸开始事件回调处理

   onTouchBegan: function (touch, event) {

        // 初始一条线的数据
        this.dataDict = {};
        this.dataDict.dataEvent = 'draw';

        // 获取开始时间点
        this.dataDict.startTime = new Date().getTime();

        // 获取触摸点数据
        var touchLoc = touch.getLocation();
        touchLoc = this.node.parent.convertToNodeSpaceAR(touchLoc);

        // 从group获取一条Path实例
        var path = this.group.addPath();
        path.fillColor = 'none';

        // 判断是否是橡皮擦状态
        if (this.isClearMode) {

            path.lineWidth = 15;
            path.strokeColor = cc.color(255, 255, 255);
        } else {

            path.lineWidth = this.lineWidth;
            path.strokeColor = this.strokeColor;
        }