Javascript Girl
  1. Javascript Girl
  3. Tissu js: Augmenter la taille de la police au lieu de simplement redimensionner lors du redimensionnement avec la souris
Intereting Posts
Comment obtenir la hauteur du document entier avec JavaScript? Objets JavaScript de passage par référence Comment puis-je vérifier si une chaîne est en majuscules en JavaScript? Mise à jour de la valeur d'une entrée sans perte de position du curseur Pourquoi les fichiers PHP ne sont-ils pas utilisés (personnalisés) CSS et JS? Supprimez les étiquettes de mise en forme de la chaîne de courrier électronique Pourquoi mon rembobinage audio n'est-il pas? JavaScript Object.keys () méthode alternative pour la compatibilité avec IE8 Prenez une capture d'écran d'un iFrame Comment faire de la fenêtre plein écran avec Javascript (étirement sur l'écran) Remplacer / supprimer tout entre deux caractères Quelle est la différence entre `before ()` et `beforeEach ()`? Comment cette fonction détermine-t-elle un objet est vide? JQuery: Trier les div en fonction du contenu de différentes sous-divs Qu'est ce que '::' (double colon) fait dans javascript pour les événements?

Tissu js: Augmenter la taille de la police au lieu de simplement redimensionner lors du redimensionnement avec la souris

Je travaille sur l'application tissu js et je dois augmenter / diminuer la taille de la police lorsque nous redimensionnons la police avec la souris
Mon code essayé 

var canvas = new fabric.Canvas('canvas'); $(document).ready(function() { $('#text-font-size').keyup(function() { var val = $(this).val(); if (isNaN(val)) { alert('please enter number'); $(this).val(''); } var activeObject = canvas.getActiveObject(); activeObject.fontSize = val; canvas.renderAll(); }); $('#add-text-btn').click(function() { if ($('#text-font-size').val()) { var txtfontsize = $('#text-font-size').val(); } else { var txtfontsize = 40; } var message = $('#add-text-value').val(); //var txtfontfamily = $('#font-family').val(); var new_text = new fabric.IText(message, { left: 100, top: 100, fontSize: txtfontsize, //fontFamily: txtfontfamily, fill: '#000' }); canvas.add(new_text); canvas.setActiveObject(new_text); }); canvas.on('object:selected', function(options) { if (options.target) { $("textarea#add-text-value").val(options.target.text); $("#text-font-size").val(options.target.fontSize); } }); canvas.on('object:scaling', function(options) { if (options.target) { $("textarea#add-text-value").val(options.target.text); $("#text-font-size").val(options.target.fontSize); } }); canvas.on('object:modified', function(options) { if (options.target) { $("textarea#add-text-value").val(options.target.text); $("#text-font-size").val(options.target.fontSize); } }); }); 
 <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="add-text-btn">Add text</button><br><br> <textarea rows="7" id="add-text-value">Your Text Here</textarea> <br> <input id="text-font-size" type="text" class="form-control"> <canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

Mais ceci ne fait que redimensionner le texte pour ne pas augmenter / diminuer la taille de la police, mais je dois redimensionner la taille de la police comme cela

L'idée est d'utiliser l'événement canvas.on ("objet: modifié") pour réinitialiser la mise à niveau en 1 et augmenter la taille de la taille pour s'adapter à la nouvelle taille.

Fabric.Object.lockUniScaling est une addition suggérée. 

 var canvas = new fabric.Canvas('canvas'); $(document).ready(function() { $('#text-font-size').keyup(function() { var val = $(this).val(); if (isNaN(val)) { alert('please enter number'); $(this).val(''); } var activeObject = canvas.getActiveObject(); activeObject.fontSize = val; canvas.renderAll(); }); $('#add-text-btn').click(function() { if ($('#text-font-size').val()) { var txtfontsize = $('#text-font-size').val(); } else { var txtfontsize = 40; } var message = $('#add-text-value').val(); //var txtfontfamily = $('#font-family').val(); var new_text = new fabric.IText(message, { left: 100, top: 100, fontSize: txtfontsize, lockUniScaling: true, //fontFamily: txtfontfamily, fill: '#000' }); canvas.add(new_text); canvas.setActiveObject(new_text); }); canvas.on('object:selected', function(options) { if (options.target) { $("textarea#add-text-value").val(options.target.text); $("#text-font-size").val(options.target.fontSize); } }); canvas.on('object:scaling', function(event) { if (event.target) { $("textarea#add-text-value").val(event.target.text); $("#text-font-size").val((event.target.fontSize * event.target.scaleX).toFixed(0)); } }); canvas.on('object:modified', function(event) { if (event.target) { event.target.fontSize *= event.target.scaleX; event.target.fontSize = event.target.fontSize.toFixed(0); event.target.scaleX = 1; event.target.scaleY = 1; event.target._clearCache(); $("textarea#add-text-value").val(event.target.text); $("#text-font-size").val(event.target.fontSize); } }); }); 
 <script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="add-text-btn">Add text</button> <br> <br> <textarea rows="7" id="add-text-value">Your Text Here</textarea> <br> <input id="text-font-size" placeholder="fontsize" type="number" class="form-control"> <canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>