Javascript 在绘制实时协作板时，颜色是不同的

我使用的是实时协作绘图板

以下是Github和演示链接：

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

我对Core.prototype做了一些更改。\u WB.Core函数中的createCanvas函数最初只是创建画布，所以我将其更改为添加“CircleBrush”

最初

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

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

更改为

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”做了一些更改

最初

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

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.core中的默认值

试图将其更改为：

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

JSFiddle:

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

这是我试图制作的JSFIDLE，但由于某些原因，实时协作在我的版本和原始版本上都不起作用

myjsiddle:

这就是它看起来的样子，我已经将颜色设置为灰色，将工具类型设置为“圆环刷”。当我在左侧的父窗口中绘制时，它是以灰色绘制的，而子窗口是以黑色绘制的，黑色是结构库中定义的默认颜色，反之亦然

谢谢

---

如果你想提供JS提琴，一定要继续，但要求人们编辑它来修复它有点像要求人们为你做工作。有人可能仍然会这样做，但最好假设人们会给出作为您旅程线索的评论和答案，而不是一个完成的软件。好的，我明白您建议我做什么？如上所述，我认为JS小提琴可能会有所帮助。我的反馈主要是为了调整你对要求志愿者完成多少工作的期望。这可能只是一个措辞上的问题-有时听起来像是海报在要求某人做他们的工作，尽管这不是他们的意图

：-）

。好的，我要做的是做一个JSFIDLE，也改变一些措辞，使它看起来像我需要一个方向，我不想让任何人做我的工作，我感谢你的回答和帮助，我认为不必重复这一点——我已经删除了“为我解决它”。“这是我的JS提琴”很好。如果你想提供JS提琴，一定要继续，但要求人们编辑它来修复它有点像要求人们为你做工作。有人可能仍然会这样做，但最好假设人们会给出作为您旅程线索的评论和答案，而不是一个完成的软件。好的，我明白您建议我做什么？如上所述，我认为JS小提琴可能会有所帮助。我的反馈主要是为了调整你对要求志愿者完成多少工作的期望。这可能只是一个措辞上的问题-有时听起来像是海报在要求某人做他们的工作，尽管这不是他们的意图

：-）

。好的，我要做的是做一个JSFIDLE，也改变一些措辞，使它看起来像我需要一个方向，我不想让任何人做我的工作，我感谢你的回答和帮助，我认为不必重复这一点——我已经删除了“为我解决它”。“这是我的JS小提琴”很好。