Javascript fabricjs itext是否支持unicode？（韩国语未润色）

Fabric.js非常酷，但IText有一些问题

我是韩国人，我想编辑韩文

function insertItext(){
    var text = new fabric.IText('한글',{
        top:100,
        left:100,   
    })  

    text.setFontFamily('바탕체');
    canvas.add(text);
    canvas.renderAll();
}

fontFamily已修改

index.html “文本”한글" 可以，但不能编辑文本

我想编辑“한글입니다" 但经过修改”한글dlqslek“

---

有人帮帮我。谢谢。

我也是韩国人，在Fabric的iText上遇到了同样的问题。我查看了源代码并找到了原因

Fabric IText依赖于textarea上的“onKeypress”事件来解析和呈现每个字符。键入韩语字符不会触发onKeypress。即使触发，逻辑也不考虑需要键入多个字符以形成单个字母的语言

---

你最好的选择是加入开源，或者只是使用文本并创建自己的文本区域来缓解这个问题。祝你好运！

我使用html输入标记解决了这个问题

HTML

JavaScript

var SINGLE_LINE = false;

var canvas = new fabric.Canvas('canvas');

// custom input area
if (SINGLE_LINE) {
    var $itext = $('<input/>').attr('type', 'text').addClass('itext');
}
else {
    var $itext = $('<textarea/>').addClass('itext');
}

var text = 'enter multi-byte text here 日本語';
var itext = new fabric.IText(text, {
    left: 100,
    top: 100,
    fontSize: 20,
    fill: '#000'
})
.on('editing:entered', function(e) {
    var obj = this;
    if (SINGLE_LINE) {
        var keyDownCode = 0;
    }

    canvas.remove(obj);

    // show input area
    $itext.css({
        left: obj.left,
        top: obj.top,
        'line-height': obj.lineHeight,
        'font-family': obj.fontFamily,
        'font-size': Math.floor(obj.fontSize * Math.min(obj.scaleX, obj.scaleY)) + 'px',
        'font-weight': obj.fontWeight,
        'font-style': obj.fontStyle,
        color: obj.fill
    })
    .val(obj.text)
    .appendTo($(canvas.wrapperEl).closest('.canvas-wrapper'));

    // text submit event
    if (SINGLE_LINE) {
        // submit text by ENTER key
        $itext.on('keydown', function(e) {
            // save the key code of a pressed key while kanji conversion (it differs from the code for keyup)
            keyDownCode = e.which;
        })
        .on('keyup', function(e) {
            if (e.keyCode == 13 && e.which == keyDownCode) {
                obj.exitEditing();
                obj.set('text', $(this).val());
                $(this).remove();
                canvas.add(obj);
                canvas.renderAll();
            }
        });
    }
    else {
        // submit text by focusout
        $itext.on('focusout', function(e) {
            obj.exitEditing();
            obj.set('text', $(this).val());
            $(this).remove();
            canvas.add(obj);
            canvas.renderAll();
        });
    }

    // focus on text
    setTimeout(function() {
        $itext.select();
    }, 1);
});
canvas.add(itext);
canvas.setActiveObject(itext);
//itext.selectAll();
//itext.enterEditing();

var SINGLE_LINE=false；
var canvas=newfabric.canvas（'canvas'）；
//自定义输入区
if（单线）{
var$itext=$（''）.attr（'type'，'text'）.addClass（'itext'）；
}
否则{
var$itext=$（''）.addClass（'itext'）；
}
var text='在此处输入多字节文本日本語';
var itext=new fabric.itext（text{
左:100,，
前100名，
尺寸：20，
填写：“#000”
})
.on（'编辑：输入'，功能（e）{
var obj=这个；
if（单线）{
var-keyDownCode=0；
}
canvas.remove（obj）；
//显示输入区
$itext.css({
左：对象左，
top:obj.top，
“线宽”：对象线宽，
“字体系列”：obj.fontFamily，
“字体大小”：Math.floor（obj.fontSize*Math.min（obj.scaleX，obj.scaleY））+“px”，
“字体重量”：obj.fontwweight，
“字体样式”：obj.fontStyle，
颜色：obj.fill
})
.val（对象文本）
.appendTo（$（canvas.wrapperEl）.closest（'.canvas wrapper'）；
//文本提交事件
if（单线）{
//按ENTER键提交文本
$itext.on（'keydown'，函数（e）{
//汉字转换时保存按下的键的键代码（与keyup的代码不同）
keyDownCode=e.which；
})
.on（'keyup'，功能（e）{
if（e.keyCode==13&&e.which==keyDownCode）{
obj.exitEditing（）；
obj.set（'text'，$（this.val（））；
$（this.remove（）；
canvas.add（obj）；
canvas.renderAll（）；
}
});
}
否则{
//按focusout提交文本
$itext.on（'focusout'，函数（e）{
obj.exitEditing（）；
obj.set（'text'，$（this.val（））；
$（this.remove（）；
canvas.add（obj）；
canvas.renderAll（）；
});
}
//关注文本
setTimeout（函数（）{
$itext.select（）；
}, 1);
});
canvas.add（itext）；
setActiveObject（itext）；
//itext.selectAll（）；
//itext.enterEditing（）；

看

.canvas-wrappter {
    position: relative;
}
canvas {
    border: 1px solid #000;
}
.itext {
    width: 300px;
    background: transparent;
    position: absolute;
    z-index: 2;
}

var SINGLE_LINE = false;

var canvas = new fabric.Canvas('canvas');

// custom input area
if (SINGLE_LINE) {
    var $itext = $('<input/>').attr('type', 'text').addClass('itext');
}
else {
    var $itext = $('<textarea/>').addClass('itext');
}

var text = 'enter multi-byte text here 日本語';
var itext = new fabric.IText(text, {
    left: 100,
    top: 100,
    fontSize: 20,
    fill: '#000'
})
.on('editing:entered', function(e) {
    var obj = this;
    if (SINGLE_LINE) {
        var keyDownCode = 0;
    }

    canvas.remove(obj);

    // show input area
    $itext.css({
        left: obj.left,
        top: obj.top,
        'line-height': obj.lineHeight,
        'font-family': obj.fontFamily,
        'font-size': Math.floor(obj.fontSize * Math.min(obj.scaleX, obj.scaleY)) + 'px',
        'font-weight': obj.fontWeight,
        'font-style': obj.fontStyle,
        color: obj.fill
    })
    .val(obj.text)
    .appendTo($(canvas.wrapperEl).closest('.canvas-wrapper'));

    // text submit event
    if (SINGLE_LINE) {
        // submit text by ENTER key
        $itext.on('keydown', function(e) {
            // save the key code of a pressed key while kanji conversion (it differs from the code for keyup)
            keyDownCode = e.which;
        })
        .on('keyup', function(e) {
            if (e.keyCode == 13 && e.which == keyDownCode) {
                obj.exitEditing();
                obj.set('text', $(this).val());
                $(this).remove();
                canvas.add(obj);
                canvas.renderAll();
            }
        });
    }
    else {
        // submit text by focusout
        $itext.on('focusout', function(e) {
            obj.exitEditing();
            obj.set('text', $(this).val());
            $(this).remove();
            canvas.add(obj);
            canvas.renderAll();
        });
    }

    // focus on text
    setTimeout(function() {
        $itext.select();
    }, 1);
});
canvas.add(itext);
canvas.setActiveObject(itext);
//itext.selectAll();
//itext.enterEditing();