在fabric.js的早期版本中,我在getSelectionStyles
函数中使用getStyle
的方式非常成功。
在这种情况下:当我选择一些文本时,fontsize-slider
将更改为第一个选定字符的当前值。
但升级到版本2+后,它不再起作用了。 getStyle
函数返回undefined
。
canvas.on('text:selection:changed', onSelectionChanged);
function onSelectionChanged() {
var obj = canvas.getActiveObject();
if (obj.selectionStart>-1) {
$('#fontSize').val(getStyle(obj,'fontSize'));
}
}
function getStyle(object, styleName) {
return (object.getSelectionStyles && object.isEditing)
? object.getSelectionStyles()[styleName] : object[styleName];
}
这是使用fabric.js版本1.7.22的工作示例。如果将其更改为当前版本,则会失败。
如何在版本2中使用getSelectionStyles
?发生了什么变化?
var canvas = new fabric.Canvas('c');
canvas.add(new fabric.IText('Fontsize test'))
canvas.on('text:selection:changed', onSelectionChanged);
$( "#fontSize" ).on("input", function() {
var obj = canvas.getActiveObject();
if (obj) {
setStyle(obj, 'fontSize', $( "#fontSize" ).val());
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 onSelectionChanged() {
var obj = canvas.getActiveObject();
if (obj.selectionStart>-1) {
$('#fontSize').val(getStyle(obj,'fontSize'));
}
}
function getStyle(object, styleName) {
return (object.getSelectionStyles && object.isEditing)
? object.getSelectionStyles()[styleName] : object[styleName];
}
canvas{
border:2px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>-->
<canvas id='c' width=400 height=120></canvas>
<label for="fontSize" hint="Font size"><a style="font-size:12px;color:#999">T</a><a style="font-size:19px;color:#ccc">T</a></label>
<input type="range" value="" min="1" max="120" step="1" id="fontSize">
答案 0 :(得分:1)
getSelectionStyles返回当前选择的样式对象数组。
所以await
总是object.getSelectionStyles()[styleName]
。
<强> 样本 强>
undefined
&#13;
var canvas = new fabric.Canvas('c');
canvas.add(new fabric.IText('Hello'))
canvas.on('text:selection:changed', onSelectionChanged);
function onSelectionChanged() {
var obj = canvas.getActiveObject();
if (obj.selectionStart>-1) {
console.log(getStyle(obj,'fontSize'));
}
}
function getStyle(object, styleName) {
console.log(object.getSelectionStyles())
return object[styleName];
}
&#13;
canvas{
border:2px solid #000;
}
&#13;
您需要使用<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='c' width=400 height=400></canvas>
来获取该特定位置的样式。
getStyleAtPosition(position)
&#13;
var canvas = new fabric.Canvas('c');
canvas.add(new fabric.IText('Fontsize test'))
canvas.on('text:selection:changed', onSelectionChanged);
$("#fontSize").on("input", function() {
var obj = canvas.getActiveObject();
if (obj) {
setStyle(obj, 'fontSize', $("#fontSize").val());
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 onSelectionChanged() {
var obj = canvas.getActiveObject();
if (obj.selectionStart > -1) {
console.log(obj.getSelectionStyles())
$('#fontSize').val(getStyle(obj, 'fontSize'));
}
}
function getStyle(object, styleName) {
return (object.getStyleAtPosition && object.isEditing) ?
object.getStyleAtPosition(object.selectionStart)[styleName] : object[styleName];
}
&#13;
canvas{
border:2px solid #000;
}
&#13;
答案 1 :(得分:0)
console.log('ActiveObject',canvas.getActiveObject()。fontFamily)
答案 2 :(得分:0)
在fabricjs v4.5.0 中,您可以使用getCompleteStyleDeclaration(lineIndex, charIndex)
方法获取所选文本的样式声明对象。
例如:object.getCompleteStyleDeclaration(1, 1)
。更多信息请访问:http://fabricjs.com/docs/fabric.IText.html#getCompleteStyleDeclaration