jQuery Girl
  1. jQuery Girl
  3. Affichage des contrôles applicables avec fabric.js
Intereting Posts
Création dynamic de pages jQuery Mobile à l’aide de modèles jQuery La valeur définie avec le prototype échoue dans le fichier prototype.js jQuery Date Time sélecteur qui fonctionne bien sur iOS / Android Comment gérer les caractères spéciaux dans l’élément HTML id / name dans la validation Jquery? Ignorer les éléments enfants lors de la sélection d’éléments dans jQuery console.log (résultat) renvoie . Comment puis-je obtenir result.name? Essayer d’écrire du HTML dans une variable en utilisant .html () Je veux append de nouvelles colonnes en cliquant sur un bouton dans jqGrid Sélection d’un onglet jQuery à l’aide d’un paramètre dans l’URL VS2010 IntelliSense dans les modèles de script text / x-jquery-tmpl charger des cartes google via un appel ajax Firefox ne déclenche pas $ (document) .ready (function () { changer la couleur de l’élément Chrome extension Nom de balise jQuery de l’élément DataSable serverside processus comment remeber les cases cochées lors de la pagination

Affichage des contrôles applicables avec fabric.js

Avec fabric.js, comment pourrais-je masquer / afficher les contrôles tels que les contrôles de texte uniquement lorsque le texte est sélectionné? À l’heure actuelle, j’ai un bouton qui permet à quelqu’un de saisir du texte et des options d’édition de texte, mais je ne veux pas toujours que ce soit affiché. Idéalement, ce serait un pop-over lors de la sélection.

En ce moment, mon code est: 

// Add image from local var canvas = new fabric.Canvas('c'); document.getElementById('file').addEventListener("change", function(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function(f) { var data = f.target.result; fabric.Image.fromURL(data, function(img) { var oImg = img.set({ left: 0, top: 0, angle: 00, stroke: '#F0F0F0', //<-- set this strokeWidth: 40 //<-- set this }).scale(0.2); canvas.add(oImg).renderAll(); var a = canvas.setActiveObject(oImg); var dataURL = canvas.toDataURL({ format: 'png', quality: 1 }); }); }; reader.readAsDataURL(file); }); // Delete selected object window.deleteObject = function() { canvas.getActiveObject().remove(); } // Refresh page function refresh() { setTimeout(function() { location.reload() }, 100); } // Add text function Addtext() { canvas.add(new fabric.IText('Tap and Type', { left: 50, top: 100, fontFamily: 'helvetica neue', fill: '#333', stroke: '#F0F0F0', strokeWidth: 1, fontSize: 45 })); } document.getElementById('text-color').onchange = function() { canvas.getActiveObject().setFill(this.value); canvas.renderAll(); }; document.getElementById('text-color').onchange = function() { canvas.getActiveObject().setFill(this.value); canvas.renderAll(); }; document.getElementById('text-bg-color').onchange = function() { canvas.getActiveObject().setBackgroundColor(this.value); canvas.renderAll(); }; document.getElementById('text-lines-bg-color').onchange = function() { canvas.getActiveObject().setTextBackgroundColor(this.value); canvas.renderAll(); }; document.getElementById('text-stroke-color').onchange = function() { canvas.getActiveObject().setStroke(this.value); canvas.renderAll(); }; document.getElementById('text-stroke-width').onchange = function() { canvas.getActiveObject().setStrokeWidth(this.value); canvas.renderAll(); }; document.getElementById('font-family').onchange = function() { canvas.getActiveObject().setFontFamily(this.value); canvas.renderAll(); }; document.getElementById('text-font-size').onchange = function() { canvas.getActiveObject().setFontSize(this.value); canvas.renderAll(); }; document.getElementById('text-line-height').onchange = function() { canvas.getActiveObject().setLineHeight(this.value); canvas.renderAll(); }; document.getElementById('text-align').onchange = function() { canvas.getActiveObject().setTextAlign(this.value); canvas.renderAll(); }; radios5 = document.getElementsByName("fonttype"); // wijzig naar button for (var i = 0, max = radios5.length; i < max; i++) { radios5[i].onclick = function() { if (document.getElementById(this.id).checked == true) { if (this.id == "text-cmd-bold") { canvas.getActiveObject().set("fontWeight", "bold"); } if (this.id == "text-cmd-italic") { canvas.getActiveObject().set("fontStyle", "italic"); } if (this.id == "text-cmd-underline") { canvas.getActiveObject().set("textDecoration", "underline"); } if (this.id == "text-cmd-linethrough") { canvas.getActiveObject().set("textDecoration", "line-through"); } if (this.id == "text-cmd-overline") { canvas.getActiveObject().set("textDecoration", "overline"); } } else { if (this.id == "text-cmd-bold") { canvas.getActiveObject().set("fontWeight", ""); } if (this.id == "text-cmd-italic") { canvas.getActiveObject().set("fontStyle", ""); } if (this.id == "text-cmd-underline") { canvas.getActiveObject().set("textDecoration", ""); } if (this.id == "text-cmd-linethrough") { canvas.getActiveObject().set("textDecoration", ""); } if (this.id == "text-cmd-overline") { canvas.getActiveObject().set("textDecoration", ""); } } canvas.renderAll(); } } // Send selected object to front or back var selectedObject; canvas.on('object:selected', function(event) { selectedObject = event.target; }); var sendSelectedObjectBack = function() { canvas.sendToBack(selectedObject); } var sendSelectedObjectToFront = function() { canvas.bringToFront(selectedObject); } 
 body { padding: 10px 10px 10px 10px; font-family: "HelveticaNeue"; } canvas { border: 1px solid grey; margin: 10px 0px 0px 0px; } .myFile { position: relative; overflow: hidden; float: left; clear: left; } .myFile input[type="file"] { display: block; position: absolute; top: 0; right: 0; opacity: 0; font-size: 30px; filter: alpha(opacity=0); } .footerheader { margin-top: 10px; font-weight: bold; } 
     Testing     Testing

   / Selected Object:    /   
Test Text Controls
 
 
    Arial Helvetica Myriad Pro Delicious Verdana Georgia Courier Comic Sans MS Impact Monaco Optima Hoefler Text Plaster Engagement  
   Left Center Right Justify  
   
 
   
 
   
 
   
 
   
 
   
 
 
  Bold  Italic  Underline  Linethrough  Overline </div 
 
asdasd
 
 
     
  • 1
    •  
  • 1
    •  
  • 1
    •

Voici comment vous pouvez y parvenir …

  • encapsulez vos contrôles de texte avec un élément div et définissez la propriété hidden pour le masquer par défaut
  • ajoutez les événements de souris suivants pour que les contrôles soient affichés et masqués lors de la sélection et de la désélection de texte 
 canvas.on('object:selected', function(e) { if (e.target.type === 'i-text') { document.getElementById('textControls').hidden = false; } }); canvas.on('before:selection:cleared', function(e) { if (e.target.type === 'i-text') { document.getElementById('textControls').hidden = true; } });

ᴅᴇᴍᴏ 

 // Add image from local var canvas = new fabric.Canvas('c'); // display/hide controls canvas.on('object:selected', function(e) { document.getElementById('trash').hidden = false; document.getElementById('forward').hidden = false; document.getElementById('back').hidden = false; if (e.target.type === 'i-text') { document.getElementById('textControls').hidden = false; } }); canvas.on('before:selection:cleared', function(e) { document.getElementById('trash').hidden = true; document.getElementById('forward').hidden = true; document.getElementById('back').hidden = true; if (e.target.type === 'i-text') { document.getElementById('textControls').hidden = true; } }); document.getElementById('file').addEventListener("change", function(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function(f) { var data = f.target.result; fabric.Image.fromURL(data, function(img) { var oImg = img.set({ left: 0, top: 0, angle: 00, stroke: '#F0F0F0', //<-- set this strokeWidth: 40 //<-- set this }).scale(0.2); canvas.add(oImg).renderAll(); //var a = canvas.setActiveObject(oImg); var dataURL = canvas.toDataURL({ format: 'png', quality: 1 }); }); }; reader.readAsDataURL(file); }); // Delete selected object window.deleteObject = function() { canvas.getActiveObject().remove(); } // Refresh page function refresh() { setTimeout(function() { location.reload() }, 100); } // Add text function Addtext() { canvas.add(new fabric.IText('Tap and Type', { left: 50, top: 100, fontFamily: 'helvetica neue', fill: '#333', stroke: '#F0F0F0', strokeWidth: 1, fontSize: 45 })); } document.getElementById('text-color').onchange = function() { canvas.getActiveObject().setFill(this.value); canvas.renderAll(); }; document.getElementById('text-color').onchange = function() { canvas.getActiveObject().setFill(this.value); canvas.renderAll(); }; document.getElementById('text-bg-color').onchange = function() { canvas.getActiveObject().setBackgroundColor(this.value); canvas.renderAll(); }; document.getElementById('text-lines-bg-color').onchange = function() { canvas.getActiveObject().setTextBackgroundColor(this.value); canvas.renderAll(); }; document.getElementById('text-stroke-color').onchange = function() { canvas.getActiveObject().setStroke(this.value); canvas.renderAll(); }; document.getElementById('text-stroke-width').onchange = function() { canvas.getActiveObject().setStrokeWidth(this.value); canvas.renderAll(); }; document.getElementById('font-family').onchange = function() { canvas.getActiveObject().setFontFamily(this.value); canvas.renderAll(); }; document.getElementById('text-font-size').onchange = function() { canvas.getActiveObject().setFontSize(this.value); canvas.renderAll(); }; document.getElementById('text-line-height').onchange = function() { canvas.getActiveObject().setLineHeight(this.value); canvas.renderAll(); }; document.getElementById('text-align').onchange = function() { canvas.getActiveObject().setTextAlign(this.value); canvas.renderAll(); }; radios5 = document.getElementsByName("fonttype"); // wijzig naar button for (var i = 0, max = radios5.length; i < max; i++) { radios5[i].onclick = function() { if (document.getElementById(this.id).checked == true) { if (this.id == "text-cmd-bold") { canvas.getActiveObject().set("fontWeight", "bold"); } if (this.id == "text-cmd-italic") { canvas.getActiveObject().set("fontStyle", "italic"); } if (this.id == "text-cmd-underline") { canvas.getActiveObject().set("textDecoration", "underline"); } if (this.id == "text-cmd-linethrough") { canvas.getActiveObject().set("textDecoration", "line-through"); } if (this.id == "text-cmd-overline") { canvas.getActiveObject().set("textDecoration", "overline"); } } else { if (this.id == "text-cmd-bold") { canvas.getActiveObject().set("fontWeight", ""); } if (this.id == "text-cmd-italic") { canvas.getActiveObject().set("fontStyle", ""); } if (this.id == "text-cmd-underline") { canvas.getActiveObject().set("textDecoration", ""); } if (this.id == "text-cmd-linethrough") { canvas.getActiveObject().set("textDecoration", ""); } if (this.id == "text-cmd-overline") { canvas.getActiveObject().set("textDecoration", ""); } } canvas.renderAll(); } } // Send selected object to front or back var selectedObject; canvas.on('object:selected', function(event) { selectedObject = event.target; }); var sendSelectedObjectBack = function() { canvas.sendToBack(selectedObject); } var sendSelectedObjectToFront = function() { canvas.bringToFront(selectedObject); } 
 body { padding: 10px 10px 10px 10px; font-family: "HelveticaNeue"; } canvas { border: 1px solid grey; margin: 10px 0px 0px 0px; } .myFile { position: relative; overflow: hidden; float: left; clear: left; } .myFile input[type="file"] { display: block; position: absolute; top: 0; right: 0; opacity: 0; font-size: 30px; filter: alpha(opacity=0); } .footerheader { margin-top: 10px; font-weight: bold; } 
  Testing 
 
   / Selected Object:    /