将文本调整为矩形在Canvas中调整大小HTML5

Question

我是Canvas的新手，我创建了一个网站来增加文本，因为我重新调整矩形的大小。我尝试了太多，但没有为我工作。其实我想，如果我只是通过其宽度（拉伸到左/到右）的大小矩形，只有文本宽度应增加而不是字体大小。我已经完成了字体大小，但发现难度增加了孤立的文本高度和宽度。您的建议是最欢迎的

function Box2() { 
     this.x = 0; 
     this.y = 0; 
     this.w = 1; // default width and height? 
     this.h = 1; 
     this.fill = '#CC0000'; 
     this.Owntext = ""; 
     this.fontsize = '20'; 
     this.TextColor = ''; 
     this.TextFontFamily = ''; 
     this.Angle = 0; 
     this.ScaleHeight = 1; 
     this.ScaleWidth = 1; 
    } 

    // New methods on the Box class 
    Box2.prototype = { 
     // we used to have a solo draw function 
     // but now each box is responsible for its own drawing 
     // mainDraw() will call this with the normal canvas 
     // myDown will call this with the ghost canvas with 'black' 
     draw: function (context, optionalColor) { 
      if (context === gctx) { 
       context.fillStyle = 'black'; // always want black for the ghost canvas 
      } else { 
       context.fillStyle = this.fill; 
      } 
     //  alert('Box2.prototype'); 
      // We can skip the drawing of elements that have moved off the screen: 
      if (this.x > WIDTH || this.y > HEIGHT) return; 
      if (this.x + this.w < 0 || this.y + this.h < 0) return; 

      context.fillRect(this.x, this.y, this.w, this.h); 

      // draw selection 
      // this is a stroke along the box and also 8 new selection handles 
      if (mySel === this) { 
       context.strokeStyle = mySelColor; 
       context.lineWidth = mySelWidth; 
       context.strokeRect(this.x, this.y, this.w, this.h); 

       // draw the boxes 

       var half = mySelBoxSize/2; 

       // 0 1 2 
       // 3  4 
       // 5 6 7 

       // top left, middle, right 
       selectionHandles[0].x = this.x - half; 
       selectionHandles[0].y = this.y - half; 

       selectionHandles[1].x = this.x + this.w/2 - half; 
       selectionHandles[1].y = this.y - half; 

       selectionHandles[2].x = this.x + this.w - half; 
       selectionHandles[2].y = this.y - half; 

       //middle left 
       selectionHandles[3].x = this.x - half; 
       selectionHandles[3].y = this.y + this.h/2 - half; 

       //middle right 
       selectionHandles[4].x = this.x + this.w - half; 
       selectionHandles[4].y = this.y + this.h/2 - half; 

       //bottom left, middle, right 
       selectionHandles[6].x = this.x + this.w/2 - half; 
       selectionHandles[6].y = this.y + this.h - half; 

       selectionHandles[5].x = this.x - half; 
       selectionHandles[5].y = this.y + this.h - half; 

       selectionHandles[7].x = this.x + this.w - half; 
       selectionHandles[7].y = this.y + this.h - half; 


       context.fillStyle = mySelBoxColor; 
       for (var i = 0; i < 8; i++) { 
        var cur = selectionHandles[i]; 
        context.fillRect(cur.x, cur.y, mySelBoxSize, mySelBoxSize); 
       } 
      } 

     } // end draw 

    } 

    //Initialize a new Box, add it, and invalidate the canvas 
    function addRect(x, y, w, h, fill,text,FontSize,TextColor,TextFontFamily,Angle,ScaleWidth,ScaleHeight) { 
     var rect = new Box2; 
     rect.x = x; 
     rect.y = y; 
     rect.w = w 
     rect.h = h; 
     rect.Owntext = text; 
     rect.FontSize = FontSize; 
     rect.TextColor = TextColor; 
     rect.TextFontFamily = TextFontFamily; 
     rect.Angle = Angle; 
     rect.ScaleWidth = ScaleWidth; 
     rect.ScaleHeight = ScaleHeight; 
     // alert(TextFontFamily); 
     // rect.fontsize = FontSize; 

     // alert(fill); 

     rect.fill = fill; 
     boxes2.push(rect); 
     invalidate(); 
    } 
    var CanvasHeight = 0; 
    var CanvasWidth = 0; 
    // initialize our canvas, add a ghost canvas, set draw loop 
    // then add everything we want to intially exist on the canvas 
    function init2() { 
     // alert('init2') 
     dropdownTextFamily = document.getElementById('drpFontFamily'); 
     dropdown = document.getElementById('drpTextColor'); 
     Button = document.getElementById('Mybtn'); 
     canvas = document.getElementById('canvas2'); 
     HEIGHT = canvas.height; 
     WIDTH = canvas.width; 
     // CanvasHeight= 
     ctx = canvas.getContext('2d'); 
     ghostcanvas = document.createElement('canvas'); 
     ghostcanvas.height = HEIGHT; 
     ghostcanvas.width = WIDTH; 
     gctx = ghostcanvas.getContext('2d'); 

     //fixes a problem where double clicking causes text to get selected on the canvas 
     canvas.onselectstart = function() { return false; } 

     // fixes mouse co-ordinate problems when there's a border or padding 
     // see getMouse for more detail 
     if (document.defaultView && document.defaultView.getComputedStyle) { 
      stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10) || 0; 
      stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10) || 0; 
      styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0; 
      styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0; 
     } 

     // make mainDraw() fire every INTERVAL milliseconds 
     setInterval(mainDraw, INTERVAL); 

     // set our events. Up and down are for dragging, 
     // double click is for making new boxes 
     canvas.onmousedown = myDown; 
     canvas.onmouseup = myUp; 
     Button.onclick = myDblClickButton; 
     dropdown.onchange = ChangeTextColor; 
     dropdownTextFamily.onchange = ChangeTextFontFamily; 
     // lblCheck.onclick = myclick; 
     // textBox.onkeyup = myDblClick; 
     // canvas.ondblclick = myDblClick; 
    // alert('ethe'); 
     canvas.onmousemove = myMove; 

     // set up the selection handle boxes 
     for (var i = 0; i < 8; i++) { 
      // alert(); 
      var rect = new Box2; 
      selectionHandles.push(rect);//WATCHED ******* A New Reactangle Added To The Canvas 
     } 















     // add custom initialization here: 


     // add a large green rectangle 
    // addRect(260, 70, 60, 65, 'rgba(0,205,0,0.7)'); 

     // add a green-blue rectangle 
     // addRect(240, 120, 40, 40, 'rgba(2,165,165,0.7)'); 

     // add a smaller purple rectangle 
     // addRect(45, 60, 25, 25, 'rgba(150,150,250,0.7)'); 


     // get a reference to the canvas element, and its context 



     var canvas2 = document.getElementById('canvas2'); 
     var ctx1 = canvas2.getContext('2d'); 

     // sets maximum line width, line height, and x /y coords for text 

     var maxWidth = canvas2.width - 10; 
     var lineHeight = 23; 
     var x_pos = (canvas2.width - maxWidth)/2; 
     var y_pos = 15; 
     var DbClickCount=0; 
     // register onkeyup event for #text_cnv text field to add the text in canvas as it is typed 
     document.getElementById('textBox').onkeyup = function() { 
      // clearCanvas(canvas2);  // clears the canvas 
      //alert(ctx1); 
      // mySel.Owntext = this.value; 
      //alert(mySel.w); 

      if (mySel == null) { 
       // alert('I am Here'); 

       myDblClick(); 
       var x = 10; 
       var y = 10; 
      // alert(x); 
       myDown1(x, y); 
       addTextCnv(ctx1, this.value, mySel.x, mySel.y, mySel.h, mySel.w); 
       // addTextCnv(ctx1, this.value, 260, 120, 60, 65); 
       // myDown1(); 
       // mySel.x = 260; 
       // mySel.y = 100; 
       // myDown1(260,100); 
       // mySel.h = 50; 
       // mySel.w = 5; 
       // addTextCnv(ctx1, this.value, 260, 100, 50, 5); 
       //// addTextCnv(ctx1, this.value, mySel.x, mySel.y, mySel.h, mySel.w); 
      } 
      else 
      { 
       // addTextCnv(ctx1, this.value, 260, 120, 60, 65); 
       // alert(mySel.x); 
       // alert(mySel.y); 
       // alert(mySel.h); 
       // alert(mySel.w); 
       addTextCnv(ctx1, this.value, mySel.x, mySel.y, mySel.h, lineHeight); 
      } 

      //alert(mySel.x); 
      //addTextCnv(ctx1, this.value, 260, 120, 60, 65); 
      // mainDraw(this.value); 
      //alert(this.value); 
      //addTextCnv(ctx1, this.value, x_pos, y_pos, maxWidth, 23); 
     } 
     var text2 = "Sachdeva"; 
     // document.write("<p>Fontsize: " + text2.fontsize(6) + "</p>"); 
     // text2.fontsize(6); 
       //alert(mySel.Owntext); 
     // ctx1.font = 'italic 20px Calibri'; 
     ctx1.font = '20pt Calibri'; 
     //TextFontFamily 

     var text1 = "rajay"; 
     // var text3 = "rajay1"; 

    //  addRect(260, 70, 60, 15, 'rgba(0,205,0,0.7)',text1); 

     // add a smaller purple rectangle 
     // alert('hi'); 
    //  addRect(45, 60, 25, 15, 'rgba(150,150,250,0.7)', text2); 
     //addRect(260, 85, 60, 65, 'rgba(0,205,0,0.7)', text3); 






    } 


function myMove(e) { 


    ctx = canvas.getContext('2d'); 
    if (isDrag) { 
     // alert('hi'); 
     getMouse(e); 
     // alert(e.x); 
     // alert('drag'); 
     mySel.x = mx - offsetx; 
    // alert(mySel.x); 
     mySel.y = my - offsety; 

     // something is changing position so we better invalidate the canvas! 
     invalidate(); 
    } else if (isResizeDrag) { 
     // alert('hi'); 
     // time ro resize! 
     getMouse(e); 
     var oldx = mySel.x; 
     var oldy = mySel.y; 
     var oldw = mySel.w; 
     var oldh = mySel.h; 
     //alert(mySel.h); 
     //alert(expectResize) 
     switch (expectResize) { 
      case 0: 

       // mySel.x = mx; 
       // mySel.y = my; 
       // mySel.w += oldx - mx; 
      // mySel.h += oldy - my; 
      // mySel.ScaleWidth = 2; 
      // mySel.ScaleHeight = 1; 
      //  alert(mySel.w); 
       // mySel.FontSize = (mySel.h/2)+(mySel.w/4); 
       // alert(mySel.FontSize); 
       // alert(mySel.h); 
       // alert(mySel.w); 
      // alert(mySel.Angle); 
       // var clickAngle = getAngle(mySel.x, mySel.y, mx, my) - mySel.Angle; 
       //alert(clickAngle); 
       //var clickAngle = getAngle(cX + offX, cY + offY, event.clientX, event.clientY) - model.angle; 
       // mySel.Angle = (getAngle(mySel.x, mySel.y, mx, my) - clickAngle); 
       // alert(mySel.Angle); 
      // mySel.Angle = 45; 

       // alert(mySel.Angle); 
       // alert(mySel.h); 


      // ctx.font = 'italic ' + (2/3) * mySel.h + 'px' + ' Calibri'; 
       // ctx.font = 'italic ' + (2/3) * mySel.h+'px' + ' Calibri'; 
       // alert(ctx.font); 
       break; 
      case 1: 
       mySel.y = my; 
       mySel.h += oldy - my; 
      //  alert(mySel.h); 
       if (mySel.FontSize>mySel.h){ 
        mySel.FontSize = mySel.h; 
       } 
       else 
       { 
        // alert('Hi'); 
        mySel.FontSize = mySel.FontSize; 
       } 
       // mySel.FontSize = (mySel.h/2) + (mySel.w/4); 
       // ctx.scale(1, 2); 
       // ctx.font = 'italic ' + (2/3) * mySel.h + 'px' + ' Calibri'; 
       break; 
      case 2: 
       mySel.y = my; 
       mySel.w = mx - oldx; 
       mySel.h += oldy - my; 
       mySel.FontSize = (mySel.h/2) + (mySel.w/4); 
      //  ctx.font = 'italic ' + (2/3) * mySel.h + 'px' + ' Calibri'; 
       break; 
      case 3: 
       mySel.x = mx; 
       mySel.w += oldx - mx; 
       mySel.FontSize = (mySel.h/2) + (mySel.w/4); 
       break; 
      case 4: 
       mySel.w = mx - oldx; 
       // mySel.FontSize = mySel.FontSize; 
       mySel.FontSize = (mySel.h/2) + (mySel.w/4); 
       break; 
      case 5: 
       mySel.x = mx; 
       mySel.w += oldx - mx; 
       mySel.h = my - oldy; 
       mySel.FontSize = (mySel.h/2) + (mySel.w/4); 
     //  ctx.font = 'italic ' + (2/3) * mySel.h + 'px' + ' Calibri'; 
       break; 
      case 6: 
       //mySel.h = my - oldy; 
       //mySel.FontSize = mySel.h; 
     //  ctx.font = 'italic ' + (2/3) * mySel.h + 'px' + ' Calibri'; 
       break; 
      case 7: 
       mySel.w = mx - oldx; 
       mySel.h = my - oldy; 
       mySel.FontSize = (mySel.h/2) + (mySel.w/4); 
     //  ctx.font = 'italic ' + (2/3) * mySel.h + 'px' + ' Calibri'; 
       break; 
     } 
     // alert(mySel.FontSize); 
     invalidate(); 
    } 

    getMouse(e); 
    // if there's a selection see if we grabbed one of the selection handles 
    if (mySel !== null && !isResizeDrag) { 
     for (var i = 0; i < 8; i++) { 
      // 0 1 2 
      // 3  4 
      // 5 6 7 

      var cur = selectionHandles[i]; 

     // alert('Here'); 
      // we dont need to use the ghost context because 
      // selection handles will always be rectangles 
      if (mx >= cur.x && mx <= cur.x + mySelBoxSize && 
       my >= cur.y && my <= cur.y + mySelBoxSize) { 
       // we found one! 
       expectResize = i; 
       invalidate(); 

       switch (i) { 
        case 0: 
         this.style.cursor = 'nw-resize'; 
         break; 
        case 1: 
         this.style.cursor = 'n-resize'; 
         break; 
        case 2: 
         this.style.cursor = 'ne-resize'; 
         break; 
        case 3: 
         this.style.cursor = 'w-resize'; 
         break; 
        case 4: 
         this.style.cursor = 'e-resize'; 
         break; 
        case 5: 
         this.style.cursor = 'sw-resize'; 
         break; 
        case 6: 
         this.style.cursor = 's-resize'; 
         break; 
        case 7: 
         this.style.cursor = 'se-resize'; 
         break; 
       } 
       return; 
      } 

     } 
     // not over a selection box, return to normal 
     isResizeDrag = false; 
     expectResize = -1; 
     this.style.cursor = 'auto'; 
    } 

} 

Answer 1

您需要执行一些计算有文字的边框，然后使用规模上下文拥有它，你想填充rect匹配。
您使用measureText获得文本的宽度。不幸的是，只提供了文本宽度，但高度值始终与fontSize相近。

var cv = document.getElementById('cv'); 
 
var ctx = cv.getContext('2d'); 
 

 
function drawTextInBox(txt, font, x, y, w, h, angle) { 
 
    angle = angle || 0; 
 
    var fontHeight = 20; 
 
    var hMargin = 4; 
 
    ctx.font = fontHeight + 'px ' + font; 
 
    ctx.textAlign = 'left'; 
 
    ctx.textBaseline = 'top'; 
 
    var txtWidth = ctx.measureText(txt).width + 2 * hMargin; 
 
    ctx.save(); 
 
    ctx.translate(x+w/2, y); 
 
    ctx.rotate(angle); 
 
    ctx.strokeRect(-w/2, 0, w, h); 
 
    ctx.scale(w/txtWidth, h/fontHeight); 
 
    ctx.translate(hMargin, 0) 
 
    ctx.fillText(txt, -txtWidth/2, 0); 
 
    ctx.restore(); 
 
} 
 

 
drawTextInBox('This is a line', 'Arial', 2, 2, 60, 20); 
 

 
drawTextInBox('Another line here', 'Arial', 2, 32, 160, 40, 0.1); 
 

 
drawTextInBox('The Last line', 'Arial', 2, 82, 220, 90); 
 

 
drawTextInBox('! Now with an angle !', 'Arial', 42, 190, 120, 30, -Math.PI/12);

<canvas width=400 height=300 id='cv'></canvas>