显示基于所选/活动对象的控件无法正常工作

时间：2018-06-20 19:12:50

标签： javascript fabricjs

我遇到一个问题，如果我从计算机添加图像，请单击它，然后单击“ IText”，则不会显示适用的控件。如果我只是单击IText，它将起作用。如果添加图像，请单击该图像，然后单击该图像，然后单击IText，它可以工作；但是当我选择图像然后选择IText时没有。

我将如何持续显示适用的控件（选择IText时为文本+删除，仅当选择图像时才删除；因为它不需要文本控件）？

// 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;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<a href="index.html">Testing</a>
<br>
<br>
<label class="myFile">
    <button>+ Photo</button>&nbsp;
    <input type="file" id="file" />
</label>
<button onclick="Addtext()">+ Text</button> / Selected Object:
<button id="trash" onClick="deleteObject()" hidden>Trash</button>
<button id="forward" onclick="sendSelectedObjectToFront()" hidden>Forward</button>
<button id="back" onclick="sendSelectedObjectBack()" hidden>Back</button> /
<button onclick="refresh()">Clear All</button>
<canvas id="c" width="800" height="600"></canvas>

<div id="textControls" hidden>
    <h2>Test Text Controls</h2>
    <div id="text-wrapper" style="margin-top: 10px" ng-show="getText()">
        <div id="text-controls">
            <input type="color" id="text-color" size="10">
            <label for="font-family" style="display:inline-block">Font family:</label>
            <select id="font-family">
                <option value="arial">Arial</option>
                <option value="helvetica" selected>Helvetica</option>
                <option value="myriad pro">Myriad Pro</option>
                <option value="delicious">Delicious</option>
                <option value="verdana">Verdana</option>
                <option value="georgia">Georgia</option>
                <option value="courier">Courier</option>
                <option value="comic sans ms">Comic Sans MS</option>
                <option value="impact">Impact</option>
                <option value="monaco">Monaco</option>
                <option value="optima">Optima</option>
                <option value="hoefler text">Hoefler Text</option>
                <option value="plaster">Plaster</option>
                <option value="engagement">Engagement</option>
            </select>
            <br>
            <label for="text-align" style="display:inline-block">Text align:</label>
            <select id="text-align">
                <option value="left">Left</option>
                <option value="center">Center</option>
                <option value="right">Right</option>
                <option value="justify">Justify</option>
            </select>
            <div>
                <label for="text-bg-color">Background color:</label>
                <input type="color" id="text-bg-color" size="10">
            </div>
            <div>
                <label for="text-lines-bg-color">Background text color:</label>
                <input type="color" id="text-lines-bg-color" size="10">
            </div>
            <div>
                <label for="text-stroke-color">Stroke color:</label>
                <input type="color" id="text-stroke-color">
            </div>
            <div>
                <label for="text-stroke-width">Stroke width:</label>
                <input type="range" value="1" min="1" max="5" id="text-stroke-width">
            </div>
            <div>
                <label for="text-font-size">Font size:</label>
                <input type="range" min="1" max="120" step="1" id="text-font-size">
            </div>
            <div>
                <label for="text-line-height">Line height:</label>
                <input type="range" min="0" max="10" step="0.1" id="text-line-height">
            </div>
        </div>
        <div id="text-controls-additional">
            <input type='checkbox' name='fonttype' id="text-cmd-bold"> Bold
            <input type='checkbox' name='fonttype' id="text-cmd-italic"> Italic
            <input type='checkbox' name='fonttype' id="text-cmd-underline"> Underline
            <input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough
            <input type='checkbox' name='fonttype' id="text-cmd-overline"> Overline
        </div>
        <div class="footer">
            <div class="footerheader">asdasd</div>

            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>

        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分：1)

如果您使用的是版本> 2.x.x，则要使用事件获取所选对象

canvas.on('selection:created', onObjectSelected);
canvas.on('selection:updated', onObjectSelected);

在构建过程中，名为setter / getter的名称是可选的，因此请勿使用。

演示 

// Add image from local
var canvas = new fabric.Canvas('c');
var selectedObject;
// display/hide controls
canvas.on('selection:created', onObjectSelected);
canvas.on('selection:updated', onObjectSelected);

function onObjectSelected(e) {
   selectedObject = e.selected[0];
   document.getElementById('trash').hidden = false;
   document.getElementById('forward').hidden = false;
   document.getElementById('back').hidden = false;
   if (selectedObject.type === 'i-text') {
      document.getElementById('textControls').hidden = false;
   }else
    document.getElementById('textControls').hidden = true;
};
canvas.on('selection:cleared', function(e) {
   selectedObject = null;
   document.getElementById('trash').hidden = true;
   document.getElementById('forward').hidden = true;
   document.getElementById('back').hidden = true;
   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);
      });
   };
   reader.readAsDataURL(file);
});
// Delete selected object
window.deleteObject = function() {
   canvas.remove(canvas.getActiveObject());
}
// Refresh page
function refresh() {
   setTimeout(function() {
      canvas.clear()
   }, 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() {
   selectedObject.fill = this.value;
   selectedObject.dirty = true;
   canvas.renderAll();
};
document.getElementById('text-bg-color').onchange = function() {
   selectedObject.backgroundColor = this.value;
   selectedObject.dirty = true;
   canvas.renderAll();
};
document.getElementById('text-lines-bg-color').onchange = function() {
   selectedObject.textBackgroundColor = this.value;
   selectedObject.dirty = true;
   canvas.renderAll();
};
document.getElementById('text-stroke-color').onchange = function() {
   selectedObject.stroke = this.value;
   selectedObject.dirty = true;
   canvas.renderAll();
};
document.getElementById('text-stroke-width').onchange = function() {
   selectedObject.strokeWidth = this.value;
   selectedObject.dirty = true;
   canvas.renderAll();
};
document.getElementById('font-family').onchange = function() {
   selectedObject.fontFamily = this.value;
   selectedObject.dirty = true;
   canvas.renderAll();
};
document.getElementById('text-font-size').onchange = function() {
   selectedObject.fontSize = this.value;
   selectedObject.dirty = true;
   canvas.renderAll();
};
document.getElementById('text-line-height').onchange = function() {
   selectedObject.lineHeight = this.value;
   selectedObject.dirty = true;
   canvas.renderAll();
};
document.getElementById('text-align').onchange = function() {
   selectedObject.textAlign = this.value;
   selectedObject.dirty = true;
   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") {
            selectedObject.fontWeight = "bold";
         }
         if (this.id == "text-cmd-italic") {
            selectedObject.fontStyle = "italic";
         }
         if (this.id == "text-cmd-underline") {
            selectedObject.underline = true;
         }
         if (this.id == "text-cmd-linethrough") {
            selectedObject.linethrough = true;
         }
         if (this.id == "text-cmd-overline") {
            selectedObject.overline = true;
         }
      } else {
         if (this.id == "text-cmd-bold") {
            selectedObject.fontWeight = "";
         }
         if (this.id == "text-cmd-italic") {
            selectedObject.fontStyle = "";
         }
         if (this.id == "text-cmd-underline") {
            selectedObject.underline = false;
         }
         if (this.id == "text-cmd-linethrough") {
            selectedObject.linethrough = false;
         }
         if (this.id == "text-cmd-overline") {
            selectedObject.overline = false;
         }
      }
      selectedObject.dirty = true;
      canvas.renderAll();
   }
}
// Send selected object to front or back

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;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<a href="index.html">Testing</a>
<br>
<br>
<label class="myFile">
    <button>+ Photo</button>&nbsp;
    <input type="file" id="file" />
</label>
<button onclick="Addtext()">+ Text</button> / Selected Object:
<button id="trash" onClick="deleteObject()" hidden>Trash</button>
<button id="forward" onclick="sendSelectedObjectToFront()" hidden>Forward</button>
<button id="back" onclick="sendSelectedObjectBack()" hidden>Back</button> /
<button onclick="refresh()">Clear All</button>
<canvas id="c" width=300 height=300></canvas>

<div id="textControls" hidden>
    <h2>Test Text Controls</h2>
    <div id="text-wrapper" style="margin-top: 10px" ng-show="getText()">
        <div id="text-controls">
            <input type="color" id="text-color" size="10">
            <label for="font-family" style="display:inline-block">Font family:</label>
            <select id="font-family">
                <option value="arial">Arial</option>
                <option value="helvetica" selected>Helvetica</option>
                <option value="myriad pro">Myriad Pro</option>
                <option value="delicious">Delicious</option>
                <option value="verdana">Verdana</option>
                <option value="georgia">Georgia</option>
                <option value="courier">Courier</option>
                <option value="comic sans ms">Comic Sans MS</option>
                <option value="impact">Impact</option>
                <option value="monaco">Monaco</option>
                <option value="optima">Optima</option>
                <option value="hoefler text">Hoefler Text</option>
                <option value="plaster">Plaster</option>
                <option value="engagement">Engagement</option>
            </select>
            <br>
            <label for="text-align" style="display:inline-block">Text align:</label>
            <select id="text-align">
                <option value="left">Left</option>
                <option value="center">Center</option>
                <option value="right">Right</option>
                <option value="justify">Justify</option>
            </select>
            <div>
                <label for="text-bg-color">Background color:</label>
                <input type="color" id="text-bg-color" size="10">
            </div>
            <div>
                <label for="text-lines-bg-color">Background text color:</label>
                <input type="color" id="text-lines-bg-color" size="10">
            </div>
            <div>
                <label for="text-stroke-color">Stroke color:</label>
                <input type="color" id="text-stroke-color">
            </div>
            <div>
                <label for="text-stroke-width">Stroke width:</label>
                <input type="range" value="1" min="1" max="5" id="text-stroke-width">
            </div>
            <div>
                <label for="text-font-size">Font size:</label>
                <input type="range" min="1" max="120" step="1" id="text-font-size">
            </div>
            <div>
                <label for="text-line-height">Line height:</label>
                <input type="range" min="0" max="10" step="0.1" id="text-line-height">
            </div>
        </div>
        <div id="text-controls-additional">
            <input type='checkbox' name='fonttype' id="text-cmd-bold"> Bold
            <input type='checkbox' name='fonttype' id="text-cmd-italic"> Italic
            <input type='checkbox' name='fonttype' id="text-cmd-underline"> Underline
            <input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough
            <input type='checkbox' name='fonttype' id="text-cmd-overline"> Overline
        </div>
        <div class="footer">
            <div class="footerheader">asdasd</div>

            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>

        </div>
    </div>
</div>

相关问题
最新问题