Question

我使用以下代码来操作fabric.js中的IText对象。它们都有效，但是在我选择了另一种样式应用于对象之后，下划线才会显示出来。

换句话说，我是

为元素加下划线（但不显示下划线）
选择粗体和下划线显示，以及粗体

这是我的代码：

// Text Styles
function addHandler(id, fn, eventName) {
  document.getElementById(id)[eventName || 'onclick'] = function() {
    var el = this;
    if (obj = canvas.getActiveObject()) {
      fn.call(el, obj);
      canvas.renderAll();
    }
  };
}
function setStyle(object, styleName, value) {
  if (object.setSelectionStyles && object.isEditing) {
    var style = { };
    style[styleName] = value;
    object.setSelectionStyles(style);
  }
  else {
    object[styleName] = value;
  }
}
function getStyle(object, styleName) {
  return (object.getSelectionStyles && object.isEditing)
    ? object.getSelectionStyles()[styleName]
    : object[styleName];
}
// bold
addHandler('bold', function(obj) {
  var isBold = (getStyle(obj, 'fontWeight') || '').indexOf('bold') > -1;
  setStyle(obj, 'fontWeight', isBold ? '' : 'bold');
});
// italic
addHandler('italic', function(obj) {
  var isItalic = (getStyle(obj, 'fontStyle') || '').indexOf('italic') > -1;
  setStyle(obj, 'fontStyle', isItalic ? '' : 'italic'); 
});
// underline
addHandler('underline', function(obj) {
  var isUnderline = (getStyle(obj, 'textDecoration') || '').indexOf('underline') > -1;
  setStyle(obj, 'textDecoration', isUnderline ? '' : 'underline');
});

我用来切换样式的按钮是：

<a class="dropdown-item" id="bold" style="font-weight: bold;">Bold</a>
<a class="dropdown-item" id="italic" style="text-decoration: italic;"><em>Italic</em></a>
<a class="dropdown-item" id="underline" style="text-decoration: underline;">Underline</a>

Answer 1

在下划线处理程序中设置obj.dirty = true;。

<强>样本

// Text Styles
function addHandler(id, fn, eventName) {
  document.getElementById(id)[eventName || 'onclick'] = function() {
    var el = this;
    if (obj = canvas.getActiveObject()) {
      fn.call(el, obj);
      canvas.renderAll();
    }
  };
}

function setStyle(object, styleName, value) {
  if (object.setSelectionStyles && object.isEditing) {
    var style = {};
    style[styleName] = value;
    object.setSelectionStyles(style);
  } else {
    object[styleName] = value;
  }
}

function getStyle(object, styleName) {
  return (object.getSelectionStyles && object.isEditing) ?
    object.getSelectionStyles()[styleName] :
    object[styleName];
}
// bold
addHandler('bold', function(obj) {
  var isBold = (getStyle(obj, 'fontWeight') || '').indexOf('bold') > -1;
  setStyle(obj, 'fontWeight', isBold ? '' : 'bold');
});
// italic
addHandler('italic', function(obj) {
  var isItalic = (getStyle(obj, 'fontStyle') || '').indexOf('italic') > -1;
  setStyle(obj, 'fontStyle', isItalic ? '' : 'italic');
});
// underline
addHandler('underline', function(obj) {
  var isUnderline = (getStyle(obj, 'textDecoration') || '').indexOf('underline') > -1;
  setStyle(obj, 'textDecoration', isUnderline ? '' : 'underline');
  obj.dirty = true;
});

var canvas = this.__canvas = new fabric.Canvas('c');
var text = new fabric.IText('Sample Text', {
  left: 50,
  top: 100,
  fontFamily: 'arial',
  fill: '#333',
  fontSize: 50
});
canvas.add(text);
canvas.setActiveObject(text);

canvas{
  border-width: 1pz;
  border-style: solid;
  border-color: #000;
}

<a class="dropdown-item" id="bold" style="font-weight: bold;">Bold</a>
<a class="dropdown-item" id="italic" style="text-decoration: italic;"><em>Italic</em></a>
<a class="dropdown-item" id="underline" style="text-decoration: underline;">Underline</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script>
<div id="canvases">
  <canvas id="c" width="600" height="600"></canvas>
</div>

仅当我以另一种方式更改对象时，下划线才会起作用

1 个答案: