我正在使用以下代码来操纵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>
在您的下划线处理程序中设置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>