如何在HTML画布中创建动态绘图文本框 [英] How to create a dynamic drawing text box in html canvas

问题描述

基本上这里是示例输出：

注意：

如果画布中有另一个对象，那么该框应该是infront。

更新

  MouseDown（）{
 // if first first mousedown 
 X1 = tempX; // tempX用于当前位置
 Y1 = tempY; 
 if（Input.style.display ===none）{
 Input.value =; 
 Input.style.top = tempX +'px'; 
 Input.style.left = tempY +'px'; 
 Input.size = 1; 
 Input.style.display =block; 
 Draw（）; 
} 
} 
 
 Draw（）{
 var userInput = Input.value; 
 rectangledText（X1，Y1,150，userInput，12，'verdana'）; //代码由markE 
} 
 
函数rectangledText（x，y，width，text，fontsize，fontface）{//代码由markE 
 self.TextWidth = ctx.measureText （文本）.WIDTH; 
 var height = wrapText（x，y，text，fontsize，fontface，width）
 
 ctx.strokeRect（x，y，width，height）; 
 
 
 
 $ b函数wrapText（x，y，text，fontsize，fontface，maxwidth）{
 var startingY = y; 
 var words = text.split（''）; 
 var line =''; 
 var space =''; 
 var lineHeight = fontsize * 1.286; 
 ctx.font = fontsize +px+ fontface; 
 ctx.textAlign ='left'; 
 ctx.textBaseline ='top'
 for（var n = 0; n  var testLine = line + space + words [n]; 
 space =''; 
 if（ctx.measureText（testLine）.width> maxwidth）{
 ctx.fillText（line，x，y）; 
 line = words [n] +''; 
 y + = lineHeight; 
 space =''; 
} else {
 line = testLine; 
} 
} 
 ctx.fillText（line，x，y）; 
 return（y + lineHeight  -  startingY）; 
} 
  

以及带解释的示例输出：

问题是如何使第一个mousedown矩形和文本使用Input.style来包装

解决方案

Html5 canvas没有任何本地文本输入功能。

尝试使画布做它不打算做的事。

改用CSS来定位 input-type = text 放在画布的所需部分上。用户可以输入他们的文本到这个输入中。

当用户输入他们想要的文本时，你可以在画布上的矩形中画出他们的文本，如下所示：

body {背景色：象牙色; } #canvas {border：1px纯红色;保证金：0汽车; }

< canvas id =canvaswidth = 300
>< / canvas>< / code>< / pre>< / div>

I don't have an idea on how to implement dynamic drawing box for text.

Basically here is the sample output:

Note:

The box should be infront if there is another object in the canvas.

Update

Here is my code so far:

MouseDown(){
//if first mousedown
     X1 = tempX; //tempX is for current positon
     Y1 = tempY;
     if (Input.style.display === "none") {
        Input.value = "";
        Input.style.top = tempX + 'px';
        Input.style.left = tempY + 'px';
        Input.size = 1;
        Input.style.display = "block";
        Draw();
        }
}

Draw(){
    var userInput = Input.value;
    rectangledText(X1, Y1, 150, userInput, 12, 'verdana'); //code by markE
}

 function rectangledText(x, y, width, text, fontsize, fontface) { //code by markE
        self.TextWidth = ctx.measureText(Text).width;
        var height = wrapText(x, y, text, fontsize, fontface, width)

        ctx.strokeRect(x, y, width, height);

    }


    function wrapText(x, y, text, fontsize, fontface, maxwidth) {
        var startingY = y;
        var words = text.split(' ');
        var line = '';
        var space = '';
        var lineHeight = fontsize * 1.286;
        ctx.font = fontsize + "px " + fontface;
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top'
        for (var n = 0; n < words.length; n++) {
            var testLine = line + space + words[n];
            space = ' ';
            if (ctx.measureText(testLine).width > maxwidth) {
                ctx.fillText(line, x, y);
                line = words[n] + ' ';
                y += lineHeight;
                space = '';
            } else {
                line = testLine;
            }
        }
        ctx.fillText(line, x, y);
        return (y + lineHeight - startingY);
    }

And sample output with explanation:

The issue is how I can make the first mousedown rectangle and text be wrapped using the Input.style

解决方案

Html5 canvas does not have any native text input capability.

IMO, don't try to make canvas do what it was not intended to do.

Instead, use CSS to position a input-type=text over the desired part of the canvas. The user can enter their text into this input.

When the user has entered their desired text you can draw their text in a rectangle on the canvas like this:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var text='Lorem ipsum dolor sit amet, vel te vocent bonorum singulis. Quem magna commune nam in. Ut eos oportere persecuti efficiantur.';

rectangledText(50,50,150,text,12,'verdana');

function rectangledText(x,y,width,text,fontsize,fontface){

  var height=wrapText(x,y,text,fontsize,fontface,width)

  ctx.strokeRect(x,y,width,height);

}


function wrapText(x,y,text,fontsize,fontface,maxwidth){
  var startingY=y;
  var words = text.split(' ');
  var line = '';
  var space='';
  var lineHeight = fontsize*1.286;
  ctx.font = fontsize + "px " + fontface;
  ctx.textAlign='left';
  ctx.textBaseline='top'
  for (var n=0; n<words.length; n++) {
    var testLine = line + space + words[n];
    space=' ';
    if (ctx.measureText(testLine).width > maxwidth) {
      ctx.fillText(line,x,y);
      line = words[n] + ' ';
      y += lineHeight;
      space='';
    } else {
      line = testLine;
    }
  }
  ctx.fillText(line, x,y);
  return(y+lineHeight-startingY);
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

这篇关于如何在HTML画布中创建动态绘图文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！