如何調整畫布

Question

文字我已經找到一種方法，能夠調整和擠壓我的文字正常HTML5畫布用下面的代碼：

$("input").on("input", function() { 
ctx.clearRect(0, 0, 400, 400); 
var width = ctx.measureText(text).width; 
if(width <= 100) { 
    ctx.fillText(text, 0, 100); 
} else { 
    ctx.save(); 
    ctx.scale(100/width, 1); 
    ctx.fillText(text, 0, 100); 
    ctx.restore(); 
} 

}）;

我想做同樣的事情，但使用FabricJS。有什麼方法可以做到嗎？

Answer 1

對沒錯，只是檢查文本元素的寬度您創建完成後，並將其添加到畫布前，如果需要設置scaleX屬性：

var canvas = new fabric.Canvas('c'); 
    var t; 

    canvas.renderAll(); 

    $("input").on("input", function() { 
     if (t) { 
      canvas.remove(t); 
     } 
     var textToDraw = $(this).val(); 
     t = new fabric.Text(textToDraw, { 
      left: 0, 
      top: 0 
     }); 
     if (t.width > c.width) { 
      console.log('scale -> ' + (c.width/t.width)); 
      t.setScaleX(c.width/t.width); 
     } 
     canvas.add(t); 
    }); 

如果你想做到這一點的對象調整大小，使用修改後的事件處理程序，像這樣：

function scaleText() { 
     console.log("scale=" + t.getScaleX() + " w=" + t.getWidth()); 
     if ((t.width * t.getScaleX()) > c.width) { 
      t.setScaleX(c.width/t.width); 
     } 
    } 

    $("input").on("input", function() { 
     if (t) { 
      canvas.remove(t); 
     } 
     var textToDraw = $(this).val(); 
     t = new fabric.Text(textToDraw, { 
      left: 0, 
      top: 0 
     }); 
     scaleText(); 

     t.on("modified", function (options) { 
      scaleText(); 
     }); 

     canvas.add(t); 
    });