Question

我一直在使用HTML5和Canvas开发这个网络绘画应用程序大约一个星期，而我之前推迟使用的工具之一是文本工具，因为它的复杂性。幸运的是，有一些像CanvasInput这样的库是健壮的，可以动态地将文本框插入到画布上。您可以看到my paint program here。

然而，我遇到的问题是破坏其中一个CanvasInput的新实例。我试图摧毁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但可以在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("");          
            }                
        });

添加文本工具以绘制应用程序HTML5画布

1 个答案: