我如何获得fabric.js版本中的itext风格。(How do i get itext styles in fabric.js ver. 2?)

编程入门行业动态更新时间:2024-10-22 16:22:27

在以前的fabric.js版本中，我以getStyle函数中使用getSelectionStyles的方式取得了巨大成功。

在这种情况下：当我选择一些文本时， 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"> 
  
 
In previous versions of fabric.js I used the getSelectionStyles in the way it's used in the getStyle function with great success.  
In this case: when I select some text the fontsize-slider will change to the current value for the first selected character.  
But after upgrading to version 2+ it doesn't work anymore. The getStyle function returns 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];
}
 
Here's a working example using fabric.js version 1.7.22. If you change it to the current version it will fail. How do i use the getSelectionStyles in version 2? What have changed? 
 
 
  
  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"> 
  
 

                最满意答案
                
                    
                         getSelectionStyles返回当前选择的样式对象数组。  
 所以object.getSelectionStyles()[styleName]永远不会被undefined 。  
 DEMO  
 
  
  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];
} 
  canvas{
 border:2px solid #000;
} 
  <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='c' width=400 height=400></canvas> 
  
 
 
 您需要使用getStyleAtPosition(position)来获取该特定位置的样式。  
 
 
  
  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];
} 
  canvas{
 border:2px solid #000;
} 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.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"> 
  
 
getSelectionStyles returns an array of style objects for current selection.  
So object.getSelectionStyles()[styleName] this will be undefined always. 
DEMO  
 
  
  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];
} 
  canvas{
 border:2px solid #000;
} 
  <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='c' width=400 height=400></canvas> 
  
 
 
You need to use getStyleAtPosition(position) to get the style at that specific position. 
 
 
  
  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];
} 
  canvas{
 border:2px solid #000;
} 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.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">