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

希望有所帮助

添加文本工具以绘制应用程序HTML，Canvas

1 个答案: