文本框中的Fabricjs换行后字体更改

时间:2017-06-06 05:37:20

标签: javascript canvas fabricjs

文本框有点问题。设置文本字体并键入文本并输入新行时,字体在Arial字体上更改。如何在输入后保存字体? 干杯!

 var text = new fabric.Textbox('Enter Text', {
            width: imgInstance.width-20,
            height: imgInstance.height,
            fontSize: 16,
            textAlign: 'left',
            breakWords: true,
        });
        text.setTextAlign('center');
        text.setColor('#D8C8A6')
        text.setControlsVisibility({
            mt: true,
            mb: true,
            ml: true,
            mr: true,
            bl: true,
            br: true,
            tl: true,
            tr: true,
            //mtr: false
        });
text.set("top", imgInstance.top + 10);
        text.set("left", imgInstance.left + 10);
if (array.includes("9") && $('.droplist-for-fixed-size').val() != "") {
            var ourSize = $('#' + currentPlaqueId).val().split(" x ");
            canvasHeight = $("#Height").val();
            canvasWidth = $("#Width").val();

            var newWidth = canvas.width * ourSize[0] / canvasWidth;
            var newHeight = canvas.height * ourSize[1] / canvasHeight;
            //var newHeight = oldWidth * ourSize[0] / ourSize[1];
            imgInstance.set("height", newHeight);
            imgInstance.set("width", newWidth);
            text.set("height", newHeight);
            text.set("width", newWidth-20);
        }
var group = new fabric.Group([imgInstance, text]);
window.checkProp(array, group);
window.enterEditForGroup(group)

没有看到插入代码的原因,因为标准函数存在问题,但是如果你想要的话。 Little example of image

我更改字体的部分代码:

function setStyle(object, styleName, value) {
    if (object._objects != null) {
        object = object._objects[1];
    }
  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];
}
function addHandler(id, fn, eventName) {
    if (document.getElementById(id)){
  document.getElementById(id)[eventName || 'onclick'] = function() {
            var el = this;
      //canvases.forEach(function(canvas, obj) {
            if (obj = canvas.getActiveObject()) {
                fn.call(el, obj);
                canvas.renderAll();
            }
        }
        //});
  };
}
addHandler('font-family', function (obj) {
    setStyle(obj, 'fontFamily', this.value);
}, 'onchange');

0 个答案:

没有答案