javascript - 将文本工具添加到 Paint App HTML5 Canvas

Question

我已经使用 HTML5 和 Canvas 开发这个网络绘画应用程序大约一周了，我一直推迟到现在的工具之一是文本工具，因为它很复杂。然而，幸运的是，有诸如 CanvasInput 之类的库。功能强大，可以动态地将文本框插入到 Canvas 上。可以看到my paint program here .

但是，我遇到的问题是破坏这些 CanvasInputs 之一的新实例。我正在为试图破坏 CanvasInput 的一个实例而抓狂!我需要你的帮助!

这只是我尝试过的一些方法:

        textBox = new CanvasInput({
            canvas : document.getElementById("tempCanvas"),
            x : tool.startx,
            y : tool.starty,
            fontSize : (10 + (tmpContext.lineWidth * 2)),
             //When Enter is pressed
            onsubmit : function () {
                //tmpContext.clearRect(0, 0, tmpCanvas[0].width, tmpCanvas[0].height);
                textBox.canvas = null;
                textBox._canvas = null;
                textBox.render();
            }
        });

Answer 1

好吧，只是为了与其他人分享我的解决方案，以防万一有人尝试做类似的事情，我最终选择了一条不同且更容易/更有效的路线。

我没有使用 CanvasInput 库并在 Canvas 本身上渲染输入(实际上添加了隐藏的输入和几个不同的 Canvas )，[编辑] 我最终在 DOM 中创建了一个文本输入，默认情况下通过 CSS 隐藏它，然后在点击事件触发时，显示的文本输入 block 和绝对定位。我之前对此的解决方案导致了内存泄漏，并向页面添加了多个分离的输入。这不是最好的解决方案，所以我选择了一种根据情况隐藏或显示的输入。

这是代码(使用 jQuery，但也可以在 Pure JS 中轻松完成):

        var $input = $("#textInput");
        $input.css({
            display: "block",
            position : "absolute",
            left : tool.startx,
            top : tool.starty
        });
        $input.keyup(function (e) {
            if (e.which === 13) {
                e.preventDefault();
                context.font = (10 + (tmpContext.lineWidth * 2)) + "px Georgia";
                if (tool.mode === "textFill") {
                    context.fillText($input.val(), parseInt($input.css("left")), parseInt($input.css("top")));
                } 
                else {
                    context.strokeText($input.val(), parseInt($input.css("left")), parseInt($input.css("top")));
                }
                context.save();
                addRestorePoint();
                $input.css("display", "none").val("");
            }
            if (e.which === 27) {
                e.preventDefault();
                $input.css("display", "none").val("");          
            }                
        });