asp canvas 信号器

Question

我正在尝试在 asp 中使用在 javascript 中创建的 canvas（针对 asp.net 应用程序），并尝试与 signalr 建立连接。我对语法很困惑。

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WB_api.aspx.cs" Inherits="WhiteBoard.WB_api" %>

<canvas id="canvas" width="600" height="500" style="border:1px solid #000000;" onmousemove="draw(event)" onmousedown="isReady(true,event)" onmouseup="isReady(false,event)"></canvas>

<select id="color">
    <option value="black">Black</option>
    <option value="Red">Red</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
    <option value="white">Eraser</option>
</select>
<select id="size">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
    <option value="40">40</option>
</select>

<script src="Scripts/jquery.signalR-2.2.0.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>

<script type="text/javascript">

    // Declare a proxy to reference the hub by class name. 
    var drawHub = $.connection.drawHub;

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var pos;
    var ready;
    function draw(e) {
        var ink = document.getElementById("color").value;
        var size = document.getElementById("size").value;
        if (pos == undefined)
            pos = getMousePos(e);
        if (ready) {
            ctx.beginPath();
            ctx.strokeStyle = ink;
            ctx.lineWidth = size;
            ctx.moveTo(pos.mouseX, pos.mouseY);
            pos = getMousePos(e);
            ctx.lineTo(pos.mouseX, pos.mouseY);
            ctx.stroke();
        }
    }
    function getMousePos(ev) {
        var x = ev.clientX;
        var y = ev.clientY;

        return {
            mouseX: x,
            mouseY: y
        }

    }
    function isReady(r, e) {
        ready = r;
        pos = getMousePos(e);
    }
</script>

我已经开发了 canvas，它可以在没有信号器的情况下工作，但信号器集线器似乎无法正常工作。而且我不知道在这之后要做什么：

    var drawHub = $.connection.drawHub;

Answer 1

场景是这样的：

User1 和 User2 加入 signalr 中心（基本点击页面）
如果用户 1 画了东西，它 "magically" 会出现在用户 2 的屏幕上，反之亦然

请牢记这一点，在此示例中，您必须执行以下操作：

捕获运动的坐标并通过某种方法将这些值发送到drawHub。
在服务器端，该方法会将值传递给所有客户端，可能需要稍微清理一下
所有客户端都将是 listening/handling 接收坐标并在 canvas 上画线的方法。

希望这对您有所帮助。

asp canvas 信号器

Signalr with asp canvas

c#

asp.net

signalr