fabricjs itext是否支持unicode？（韓文不moified）

Fabric.js非常酷，但iText的有一些問題...fabricjs itext是否支持unicode？（韓文不moified）

我是韓國人，我想編輯韓文

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

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

fontFamily中被修改

index.html 文字「한글」確定，但不能編輯文字。

我想編輯「한글입니다」但修改「한글dlqslek」

幫助我的人。謝謝。

來源

2014-01-27 user3213558

我也是韓國人，他遇到了與Fabric的iText相同的問題。我查看了源代碼並找到了原因。

Fabric IText依靠textarea上的'onKeypress'事件來解析和渲染每個字符。 輸入韓文字符不會觸發onKeypress。即使這樣做，該邏輯也不會考慮您需要鍵入多個字符才能形成單個字母的語言。

你最好的選擇是貢獻開源或只是使用文本和創建自己的textarea來緩解問題。祝你好運！

來源

2014-06-13 12:25:48 lustdante

我使用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/

來源

2015-04-09 03:30:43 fugaco

fabricjs itext是否支持unicode？ （韓文不moified）

回答

相關問題

fabricjs itext是否支持unicode？（韓文不moified）