将文本工具添加到画图应用 HTML5 Canvas

Question

我已经使用 HTML5 和 Canvas 开发这个网络绘画应用程序大约一个星期了，我一直推迟到现在的工具之一是文本工具，因为它复杂。不过幸运的是，有 CanvasInput that are robust that can dynamically insert a text box onto the canvas. You can see my paint program here.

这样的库

但是，我遇到的问题是破坏这些 Canvas 输入之一的新实例。我急于试图破坏 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

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

我没有使用 CanvasInput 库并在 canvas 本身上渲染输入（实际上添加了隐藏输入和几个不同的 canvases），[编辑] 我最终创建了一个文本在 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("");          
            }                
        });

将文本工具添加到画图应用 HTML5 Canvas

Adding Text Tool to Paint App HTML5 Canvas

html

javascript

drawing

canvas

destroy