1

我正在使用 Literally-Drawing，它是实时协作绘图板。

这是 Github 和 Demo 链接：

Github字面图

演示链接

这个存储库使用两个不同的库，一个是 Fabricjs，第二个是 togetherjs，最初只有一个默认的“PencilBrush”工具我想在其中添加更多工具，但在此之前我正在测试是否可以动态更改颜色“#ccc”或任何东西和画笔类型为“CircleBrush”他们已经将“Fabric-Whiteboard.js”文件中的上述两个库连接在一起。有两个主要功能 WB.Core 和 WB.Collabrative。Core 正在创建画布，而 collabtive 正在将数据推送到 Togetherjs 服务器，以便会话中的其他浏览器可以收听。

我对 WB.Core 函数中的 Core.prototype._createCanvas 函数进行了一些更改，最初它只是创建画布，所以我将其更改为添加“CircleBrush”

起初

Core.prototype._createCanvas = function(id) 
{
  return new fabric.Canvas(id);
};

变成

Core.prototype._createCanvas = function(id) 
{
  var canvasCreate = new fabric.Canvas(id);
      canvasCreate.freeDrawingBrush = new fabric['CircleBrush'](canvasCreate);
      canvasCreate.freeDrawingBrush.color = "#CCCCCC";
  return canvasCreate;
};

现在这部分工作正常，我猜是因为它给出了任何错误，而且我在 WB.Collaborate 函数中的“drawStart”中做了一些更改。

起初

this.TJS.hub.on('drawStart', function(data) 
{
  var _base, _name;

  if ((_base = _this.client)[_name = data.clientId] == null) 
  {
      _base[_name] = new fabric['PencilBrush'](canvas); // origianlly
  }

  return _this.client[data.clientId].onMouseDown(data.point);
});

问题： 问题是我希望将相同的绘图广播到其他会话，如果我添加以下两行，它会给我一个错误“无法设置未定义的属性'颜色'”，因为我可以覆盖 WB 中的默认值。核心成功。

试图将其更改为：

this.TJS.hub.on('drawStart', function(data) 
{
  var _base, _name;

  if ((_base = _this.client)[_name = data.clientId] == null) 
  {
        var testCanvas = new fabric['CircleBrush'](canvas); // origianlly
        testCanvas.freeDrawingBrush.color = "#ccc";

        _base[_name] = testCanvas;
  }

  return _this.client[data.clientId].onMouseDown(data.point);
});

JSF中：

这是我尝试制作的 JsFiddle，但由于某种原因，我的版本和原始版本都无法进行实时协作

MyJsFiddle： https ://jsfiddle.net/mwgi2005/p7cwu9ao/7/

这就是它的样子，我将颜色设置为灰色，工具类型设置为“CircleBrush”。当我在左侧的父窗口中绘制时，它以灰色绘制，而子窗口以黑色绘制，这是织物库中定义的默认颜色，反之亦然。

谢谢

在此处输入图像描述

4

0 回答 0