Question

注意：我正在使用C＃后端和JavaScript前端编写此程序，但是此问题可能仅适用于熟悉Fabric.js和ASP的小众用户.Net Core Signalr（不是 ASP.Net Signalr）。

我正在尝试实现一种多人免费绘画游戏（例如：在线白板，所有用户都可以实时看到有人在板上绘画）。我已经使用Fabric.js实现了一个单一播放器的白板（认为：画布可以自由绘制），并且我还使用了ASP.Net Core Signalr（不是 ASP.Net Signalr）实现了一个简单的聊天程序。。我试图将两者连接起来，以便获得多人白板，但我一直坚持在所有用户的屏幕上更新画布。我已经在网上进行了研究，有一些示例可以完成我想做的事情（请参阅：http://drawsignal.azurewebsites.net/），但是使用的是ASP.Net Signalr，而不是ASP.Net Core Signalr。两者是不同且不兼容的（来源：https://docs.microsoft.com/en-us/aspnet/core/signalr/version-differences?view=aspnetcore-2.2）因此，我被限制在做什么上。

我在下面提供了我的代码。如果任何人都可以使用Fabric.JS和ASP.Net Core Signalr提供多人画布的工作示例，将不胜感激。谢谢！

Fabric.JS免费绘图：

document.getElementById("drawButtonStart").addEventListener("click", function (event) {
    canvas.isDrawingMode = true; //this allows free drawing on canvas
    event.preventDefault();
});

带有ASP.Net Core SignalR（客户端javascript代码）的聊天室：

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

connection.on("ReceiveMessage", function (user, message) {
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var encodedMsg = user + " says " + msg;
    var li = document.createElement("li");
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

服务器端聊天室：

    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }

如何使用Fabric.js和ASP.Net Core SignalR实现免费网络绘图？

0 个答案: