fabricjs itext是否支持unicode？ （韩文未修改）

Question

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

我是韩国人，我想编辑Hangeul

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

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

fontFamily已修改

的index.html 文字“한글”确定，但不能编辑文字。

我要编辑“한글입니다” 但修改后的“한글dlqslek”

有人帮助我。谢谢。

Answer 1

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

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

您最好的选择是为开源做贡献，或者只使用文本并创建自己的文本区来缓解问题。祝你好运！

Answer 2

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

HTML

<div class="canvas-wrapper">
    <canvas id="canvas" width="500" height="500"></canvas>
</div>

CSS

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

的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();

请参阅http://jsfiddle.net/3jk3jvy7/