Question

我遇到的问题是，当我选择文本并更改文本框中特定选定文本的字体系列，然后开始编写并在所选文本上启用选择。文本框未选择上次更改的字体系列。用例步骤如下： 1.插入一个文本框并写一些文字，如“Fabricjs是一个很好的图书馆”。此时文本fontfaily是TimeNewRoman。 2.现在对文本进行选择，例如选择一个单词库并将其fontfamily更改为Arial。 3.现在，如果您开始在选择启用的文本（库）上键入其fontfamily已更改为上一步，则新类型文本不会拾取Arial fontfamily，而是使用TimeNewRoman编写。

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

选择文本对象将粗体样式应用于选择性文本，然后在同一个粗体选择性文本上写入一些文本。它不是大胆的写作风格。

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

感谢。

Answer 1

您可以在通过text：change事件写入的过程中更改样式：

     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”）=>将行替换为所需的任何值

这对我有用

谢谢。

Answer 2

所以我只是在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等等我可以看看。

在编写文本时，Fabricjs文本框fontfamily会发生变化

2 个答案: