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

Question

我已经使用 HTML5 和 Canvas 开发这个网络绘画应用程序大约一个星期了，我一直推迟到现在的工具之一是文本工具，因为它很复杂。然而，幸运的是，有一些库，如 CanvasInput，它们很健壮，可以动态地将文本框插入到画布上。你可以看到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 库并在画布本身上呈现输入（实际上添加了隐藏输入和几个不同的画布），[编辑]我最终在 DOM 中创建了一个文本输入，默认情况下通过 CSS 隐藏它，然后在点击事件触发时，文本输入被显示块并绝对定位。我之前对此的解决方案导致了内存泄漏，并向页面添加了多个分离的输入。这不是最好的解决方案，所以我选择了一个根据情况隐藏或显示的输入。

这是代码（使用 jQuery，但可以在纯 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("");          
            }                
        });