Ich möchte die Schriftart einer Leinwand Text Objekt zu strecken. Wie kann ich das machen?Wie kann ich Text auf der Leinwand in Fabric.js strecken?
Beispiel (vorher):
Beispiel (nach):
Wie kann ich das umsetzen?
Sie können scaleX verwenden, um "Squish" der Text durch Skalierung des Textes:
// "squish" the text to 60% of its original width
scaleX:0.60
Beispielcode und eine Demo
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>[Update: @AndreaBogazzi fügt hinzu, dass scaleX besser als behandelt wird die Matrix ops]
besser zu scaleX-Eigenschaft zu verwenden. Aus dem gleichen Grund der Schieflage in der Frage der gleichen Tage. TransformMatrix ist nicht wirklich gut behandelt. – AndreaBogazzi
@AndreaBogazzi. Ich glaube, ich bin so sehr an Transformationen gewöhnt, dass ich zuerst nach der Transformationsmatrix strebe. Aber es klingt, als würdest du mich vor diesem ersten Instinkt warnen. Also, wenn Sie mich erziehen könnten, warum ist transformMatrix nicht gut behandelt? :-) – markE
Eigentlich interne Funktionen von Fabricjs behandelt nicht die TransformMatrix in einer Weise, dass die Steuerbox respektiert wird. Wenn Sie beispielsweise versuchen, eine RotationstransformMatrix anzuwenden, haben Sie den Text gedreht, aber immer noch die horizontale Kontrollbox. Das war ein Fehler, dann haben wir uns entschieden, die transformMatrix im Winkel + scaleX + scaleY + skewX + zu zerlegen. In der Zukunft (Hoffnung in der Nähe) wird die transformMatrix "absorbiert" und repräsentiert mit den grundlegenden Eigenschaften, die fabricjs behandelt (skewX, scaleX, scaleY, angle, top und left) – AndreaBogazzi
Willkommen zu Stapel-Überlauf! Können Sie Code in Ihre Frage aufnehmen, um zu sehen, was Sie versucht haben? – ventiseis
@ventiseis Ich habe diese Aufgabe abgeschlossen und arbeite an der nächsten Aufgabe. danke – Azam