Fabricjs文本框字体家族在编写文本时发生变化答案

【问题标题】：Fabricjs textbox fontfamily changes when writing textFabricjs文本框字体家族在编写文本时发生变化
【发布时间】：2016-09-10 10:22:12
【问题描述】：

当我在文本框中选择文本并更改该特定选定文本的字体系列，然后在选定文本上启用选择时开始编写时，我遇到了一个问题。文本框没有选择最后更改的字体系列。用例步骤是： 1.插入一个文本框，写一些像“Fabricjs is a good library”这样的文字。此时文本 fontfaily 是 TimeNewRoman。 2. 现在对文本进行选择，例如选择一个词库并将其字体系列更改为 Arial。 3. 现在，如果您开始在上一步更改字体系列的已启用选择的文本（库）上输入，则新输入的文本不会选择 Arial 字体系列，而是用 TimeNewRoman 编写。

http://fabricjs.com/test/misc/itext.html

选择一个文本对象将粗体等样式应用于选择性文本，然后在相同的粗体选择性文本上写入一些文本。它不是用粗体字写的。

请分享处理此问题的方法。对此有任何想法请分享。

谢谢。

【问题讨论】：

嗨，我们可以拉小提琴吗？

标签： canvas fabricjs font-family

【解决方案1】：

所以我只是在the kitchen sink 上尝试了这个，因为您提供的链接没有字体系列下拉菜单。

选择单词“quux”单击粗体，单击“x”后。开始输入..保持颜色/重量就好了..
厨房水槽上的 fontFamily 似乎适用于整个文本对象，而不仅仅是所选内容

正在发生的事情是样式对象具有应用于每个字符的样式，因此如果整个文本是fontFamily:'Verdana'，然后您将一个单词更改为arial，则每个字符都会更改为arial。

类似（单词）：

styles: {0:{0:{fontFamily:'arial'},1: {fontFamily:'arial'}, 2: {fontFamily:'arial'}, 3:{fontFamily:'arial'}}}

Fabric 似乎足够聪明，如果你从一个应用了样式的字符开始，它会在你为下一个字符键入时复制它，但如果你之后有一个空格，它会默认回到主对象上的 fontFamily。

我没有尝试在选择上切换 fontFamily，因为我没有办法测试它，如果你有机会做小提琴、plunker 等。我可以看看。

【讨论】：

【解决方案2】：

您可以在写入期间通过文本更改样式：更改事件：

     var lastCharPressed ;
    ie_Canvas.on("text:changed", function (e) {
        if (lastCharPressed == 8) return;

        var isBold = $("#TextEditor_isBold").val().toLowerCase() == "true" ? "bold" : "";
        var isUnderLine = $("#TextEditor_isUnderline").val().toLowerCase() == "true";
        var isItalic = $("#TextEditor_isItalic").val().toLowerCase() == "true" ? "italic" : "";
        var fontF = $("#TextEditor_font").val();
        var fill = $("#TextEditor_color").val();
        var fontSize = $("#TextEditor_fontSize").val();
        var textBackgroundColor = $("#TextEditor_bgcolor").val();

        e.target.selectionStart = e.target.selectionStart - 1;
        e.target.setSelectionStyles({ "fontWeight": isBold, 'underline': isUnderLine, 'fontStyle': isItalic, 'fontFamily': fontF, 'fill': fill, 'fontSize': fontSize, 'textBackgroundColor': textBackgroundColor })
        e.target.selectionStart = e.target.selectionStart + 1;
        ie_Canvas.renderAll();
    });

   $(window).keydown(function (event) {
        lastCharPressed = event.keyCode;

    });

$("#TextEditor_font") => 将行替换为您想要的任何值

这对我有用

谢谢。

【讨论】：