将文本工具添加到绘图应用程序 HTML、Canvas

Question

我正在尝试将文本工具添加到我正在使用输入框进行开发的drawing app。

是否可以将文本应用到画布上按回车键或在框外单击并破坏输入框？

HTML

<span id="tools">
  <button id="text" class="texttool">txt</button>
</span>

<canvas id="sketch"></canvas>

JS

    var canvas, ctx;
    var inputBox=0;

    function drawText(ctx,x,y,size) {
    if (inputBox==0){
        inputBox=1;
          var input = new CanvasInput({
              x: mouseX,
              y: mouseY,
              canvas: document.getElementById('sketch'),
              fontSize: 18,
              fontFamily: 'Arial',
              fontColor: '#212121',
              fontWeight: 'bold',
              width: 300,
              padding: 8,
              borderWidth: 1,
              borderColor: '#000',
              borderRadius: 3,
              boxShadow: '1px 1px 0px #fff',
              innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
              placeHolder: 'Enter message here...'
              });
          }
    }

    function init() {
        canvas = document.getElementById('sketch');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        if (canvas.getContext)
            ctx = canvas.getContext('2d');

        if (ctx) {
            canvas.addEventListener('mousedown', sketch_mouseDown, false);
            canvas.addEventListener('mousemove', sketch_mouseMove, false);
            window.addEventListener('mouseup', sketch_mouseUp, false);
        }
    }

    var onTool = function() {

        if ( tool == 'brush' )
        {   drawLine(ctx,mouseX,mouseY,2); }

        else if ( tool == 'eraser' )
        {   drawEraser(ctx,mouseX,mouseY,2); }

        else if ( tool == 'text' )
        {   drawText(ctx,mouseX,mouseY,2); }
    };

Answer 1

您可以更改 drawText 函数以隐藏框的边框。

这是一个简单的解决方案，看起来好像没有盒子，但在创建时您也不会看到它。

将innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)', 更改为innerShadow: '0px 0px 0px rgba(0, 0, 0, 0.5)', 并将borderWidth: 1 更改为0

希望有帮助