使用fabric.js显示适用的控件

使用fabric.js，如果仅选择文本，我将如何隐藏/显示控件（如文本控件）？ 现在我有一个按钮，可以让某人插入文本和文本编辑选项，但我并不总是希望这个显示。 理想情况下，选择后它会成为弹出式窗口。

现在，我的代码是：

// 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

 + Photo    + Text / Selected Object: Trash Forward Back / Clear All  
Test Text Controls
 
 
  Font family:  Arial Helvetica Myriad Pro Delicious Verdana Georgia Courier Comic Sans MS Impact Monaco Optima Hoefler Text Plaster Engagement  
 Text align:  Left Center Right Justify  
 Background color:  
 
 Background text color:  
 
 Stroke color:  
 
 Stroke width:  
 
 Font size:  
 
 Line height:  
 
 
  Bold  Italic  Underline  Linethrough  Overline </div 
 
asdasd
 
 
 
1
 
1
 
1
 
 
     

Answer 1

这是你如何实现这一目标……

• 使用div元素包装文本控件并设置hidden属性以使其默认隐藏
• 添加以下鼠标事件以使控件分别显示和隐藏文本选择和取消选择

---

 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 
 
  + Photo    + Text / Selected Object:    / Clear All