0

我有一个画布，我用鼠标在上面绘图，然后将绘图保存为图像。在将鼠标工具的函数坐标设置为画布坐标时，我需要一点帮助。

这是将鼠标设置到画布上的函数。

        function ev_canvas(ev) {
            ev._x = ev.layerX;
            ev._y = ev.layerY;

        var func = tool[ev.type];
        if (func) {
            func(ev);
        }
    }

如果我的画布位于左上角，则此方法有效。我需要这个函数来动态设置鼠标的交互坐标。

问题是，当我将页面设置为使用样式表时，该功能没有调整到画布的样式位置。我可以像这样从画布的坐标中减去差异，它适用于我的计算机的特定最大化分辨率。

        function ev_canvas(ev) {
            ev._x = ev.layerX - 760;
            ev._y = ev.layerY - 130;

        var func = tool[ev.type];
        if (func) {
            func(ev);
        }
    }

无论画布位于屏幕上的哪个位置，如何设置此功能才能正常工作？

编辑

这是完整的javascript：

if (window.addEventListener) {
window.addEventListener('load', function () {
    var canvas, context, tool;

    function init() {

        canvas = document.getElementById('digisigBox');
        if (!canvas) {
            alert('Error: I cannot find the canvas element!');
            return;
        }

        if (!canvas.getContext) {
            alert('Error: no canvas.getContext!');
            return;
        }

        context = canvas.getContext('2d');
        if (!context) {
            alert('Error: failed to getContext!');
            return;
        }

        tool = new tool_pencil();

        canvas.addEventListener('mousedown', ev_canvas, false);
        canvas.addEventListener('mousemove', ev_canvas, false);
        canvas.addEventListener('mouseup', ev_canvas, false);
    }

    function tool_pencil() {
        var tool = this;
        this.started = false;

        this.mousedown = function (ev) {
            context.beginPath();
            context.moveTo(ev._x, ev._y);
            tool.started = true;
        };

        this.mousemove = function (ev) {
            if (tool.started) {
                context.lineTo(ev._x, ev._y);
                context.stroke();
            }
        };

        this.mouseup = function (ev) {
            if (tool.started) {
                tool.mousemove(ev);
                tool.started = false;
            }
        };
    }


    function ev_canvas(ev) {

        ev._x = ev.clientX;
        ev._y = ev.clientY;

        var func = tool[ev.type];
        if (func) {
            func(ev);
        }
    }

    init();

}, false);

}

这是我在视图/html中使用它的地方：

    <script src="@Url.Content("~/Scripts/digisig.js")" type="text/javascript"></script>
<div id="container">
    @using (Html.BeginForm("Create_Signature"))
    {
        <div style="margin: auto; text-align: center;">
            <canvas id="digisigBox" width="400" height="200">
            </canvas>
          <script type="text/javascript">
                function putImage() {
                    var canvas = document.getElementById("digisigBox");
                    if (canvas.getContext) {
                        var ctx = canvas.getContext("2d");
                        var myImage = canvas.toDataURL("image/png");
                    }
                    var imageElement = document.getElementById("Signature");
                    imageElement.value = myImage;
                }
            </script>
            @Html.HiddenFor(x => x.Signature)
        </div>       
        <table>
            <tr>
                <td>
                    @Html.LabelFor(x => x.FirstName)
                </td>
                <td>
                    @Html.DisplayFor(x => x.FirstName)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(x => x.LastName)
                </td>
                <td>
                    @Html.DisplayFor(x => x.LastName)
                </td>
            </tr>
        </table>
        <input id="submit" onclick="putImage()" type="submit" value="Submit" />
    }
</div>

它的作用是从画布上的绘图创建一个图像，然后在回发后将图像存储为 base64。我只是不确定如何让鼠标在画布上以各种分辨率工作。如果画布将位于 coords(0,0) 处，这将完美地工作，但画布可能需要在页面之间移动。

4

0 回答 0