如何使用Fabric.js在畫布上伸展文本？

我想展開一個畫布的對象的字體Text。我怎樣才能做到這一點？如何使用Fabric.js在畫布上伸展文本？

例（前）：

Before Stretch

例（後）：

And after stretch

我怎麼能實現呢？

來源

2016-03-22 Azam

歡迎來到堆棧溢出！你可以在你的問題中包含一些代碼，看看你已經嘗試過了嗎？ – ventiseis

@ventiseis我已經完成了這項任務，並在下一個任務上工作。 thanx – Azam

可以使用的scaleX來「擠」通過縮放文本的文本：

// "squish" the text to 60% of its original width 
scaleX:0.60

示例代碼和演示

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

 
var myText = new fabric.Text('NEW TEXT',{ 
 
    left: 50, 
 
    top: 60,  
 
}); 
 
canvas.add(myText); 
 

 
var mySquishedText = new fabric.Text('NEW TEXT',{ 
 
    left: 50, 
 
    top: 100, 
 
    scaleX:0.60, 
 
}); 
 
canvas.add(mySquishedText);

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

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<canvas id="canvas" width=300 height=300></canvas>

[更新： @AndreaBogazzi補充說scaleX比較好處理矩陣運算]

來源

2016-03-22 21:07:10 markE

最好使用scaleX屬性。至於前幾天同樣問題的原因。 transformMatrix並沒有很好的處理。 – AndreaBogazzi

@AndreaBogazzi。我想我已經習慣了轉換矩陣，首先到達轉換矩陣。但這聽起來像是你在第一個本能中警告我。所以，如果你能教育我，爲什麼transformMatrix不能很好地處理？ :-) – markE

實際上，fabricjs的內部函數並不以處理控制箱的方式處理transformMatrix。如果您嘗試應用旋轉transformMatrix，例如您將旋轉文本，但仍然是水平控制箱。這是一個錯誤，然後我們決定在角度+ scaleX + scaleY + skewX + translation中分解transformMatrix。未來（希望在近處）transformMatrix將被「吸收」並用fabricjs處理的基本屬性（skewX，scaleX，scaleY，angle，top和left）表示 – AndreaBogazzi

如何使用Fabric.js在畫布上伸展文本？

回答

相關問題