Fabric.js 文本字段 - Android 问题

Question

我正在使用fabric.js，但文本字段存在一些问题。它们显然在 Android 设备上不可编辑。我可以选择文本区域，但我不能编辑它。

这是我的代码：

var canvas = new fabric.Canvas('c');
canvas.setHeight(500);
canvas.setWidth(500);
var canvasCenter = canvas.getCenter();

var title_input = new fabric.IText( dimensions.titleArgs['content'], {
    id: 'title',
    lineHeight: 1,
    fontStyle: 'normal',
    fontSize: 50,
    hasControls: false,
    lockMovementX: true,
    lockMovementY: true,
    centerTransform: true,
    top: canvasCenter["top"],
    left: canvasCenter["left"],
    originX: 'left',
    originY: 'bottom',
    fontFamily: "Helvetica Neue", Verdana, Arial, sans-serif'
});
canvas.add(title_input);

canvas.renderAll();

我正在使用fabric v1.4.12，我已经进行了测试

• 三星 SM-T100（三星 Galaxy Tab 3），Android v. 4.2.2。和 Chrome v. 38.0.212.102
• 三星 SM-G900F（三星 Galaxy S5），Android v. 4.4.2。和 Chrome v. 38.0.212.102

我在fabricjs.com (http://fabricjs.com/test/misc/itext.html) 上测试了示例，我也遇到了同样的问题。

应用程序在 iPad 和台式电脑上运行正常。

是否有其他人面临同样的问题或知道如何解决？

Answer 1

我已经浏览了你的代码，并且在你的小提琴更新后我已经在我的 geonee 手机上测试了你的代码。只需将 lockMovementX 和 lockMovementY 设置为 false。这将适用于 android 和任何地方。希望这会有所帮助

http://jsfiddle.net/t4azmeyg/15/

$j = jQuery.noConflict();

// Set canvas
var canvas = new fabric.Canvas('c');
canvas.selectionColor = 'rgba(255,0,0,1)';
canvas.selectionBorderColor = 'rgba(255,0,0,0.7)';
canvas.selectionLineWidth = 5;
canvas.backgroundColor = '#fff';
canvas.setHeight(500);
canvas.setWidth(500);

var canvasCenter = canvas.getCenter();

// Add background and position it in the center of canvas
var background_rec = new fabric.Rect({
    fill: 'lightblue',
    angle: 0,
    hasControls: false,
    originX: 'center',
    originY: 'center',
    lockMovementX: true,
    lockMovementY: true,
    selectable: false,
    left: canvasCenter["left"],
    top: canvasCenter["top"],
    width: 400,
    height: 225
});
canvas.add(background_rec);

// Position where the background starts
var zero_position_left = canvasCenter["left"] - background_rec.width/2;
var zero_position_top =  canvasCenter["top"] - background_rec.height/2;

var title_input = new fabric.IText('Custom Text', {
					fontFamily: 'arial black',
					fontStyle: 'normal',
					fontSize: $j('#configurator-fontsize').val(),
                    fill: 'red',
					hasControls: false,
					lockMovementX: false,
					lockMovementY: false,
					centerTransform: false,
					left: zero_position_left + 40,
					top: zero_position_top - 0.95*$j("#configurator-fontsize").val(),
					width: 300,
					height: 90
});
canvas.add(title_input);
canvas.sendToBack(title_input);


// Add input field for content1
var content1_input = new fabric.IText('Custom Content', {
					fontFamily: 'arial black',
					fontStyle: 'normal',
					fontSize: $j('#configurator-fontsize').val(),
                    fill: 'red',
					stroke: '#999',
					hasControls: false,
					lockMovementX: true,
					lockMovementY: true,
					left: zero_position_left + 70,
					top: zero_position_top + 60,
					width: 300,
					height: 80
});
canvas.add(content1_input);

canvas.renderAll();


// Canvas actions
// Change text-align
$j("#configurator-align").change(function() {
    // Get active element
    var activeObject = canvas.getActiveObject();
    
    if(activeObject && activeObject.get('type') === 'i-text') {
        activeObject.set({textAlign: $j("#configurator-align").val()});
        canvas.renderAll();
    } else console.log('No Text Object selected.');
});

// Change font-size
$j("#configurator-fontsize").change(function() {
    // Get active element
    var activeObject = canvas.getActiveObject();
    
    if(activeObject && activeObject.get('type') === 'i-text') {
        if(activeObject == title_input) {
            activeObject.set({fontSize: $j("#configurator-fontsize").val(), top: (zero_position_top - 0.90*$j("#configurator-fontsize").val() )});
        } else {
            activeObject.set({fontSize: $j("#configurator-fontsize").val()});
        }
        canvas.renderAll();
    } else console.log('No Text Object selected.');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="controls">
     <h3>Controls:</h3>

    <p>
        <label>Align:</label>
        <br />
        <select id="configurator-align">
            <option value="left">left</option>
            <option value="center">center</option>
            <option value="right">right</option>
        </select>
    </p>
    <p>
        <label>Font-size:</label>
        <br />
        <select id="configurator-fontsize">
            <!-- Values are given as pixels -->
            <!-- Approximate Conversion from Points to Pixels used -->
            <option value="16">12pt</option>
            <option value="19">14pt</option>
            <option value="22">16pt</option>
            <option value="24">18pt</option>
            <option value="26">20pt</option>
            <option value="29">22pt</option>
            <option value="32">24pt</option>
            <option value="35">26pt</option>
            <option value="37">28pt</option>
            <option value="40">30pt</option>
            <option value="45">34pt</option>
            <option value="48">36pt</option>
        </select>            
</div>

<canvas id="c"></canvas>

Answer 2

由于Android 中大多数键的event.keyCode 值为0，因此fabric 不会将任何内容添加到IText 的内容中。

这个问题没有直接的解决方案；相反，无论何时选择 iText，您都可以关注外部输入字段并根据该输入字段更改 IText 字段的值。这是我的示例jsjiddle。可以将输入字段设置为隐藏，以使 Fabric IText 行为看起来更自然。

同样，这是 Android 的问题，因此任何基于 event.keyCode、event.charCode 或 event.which 读取键值的 Javascript 库都可能会失败。

Answer 3

我最近遇到了同样的问题，问题是由于移动设备中的事件键码。

解决方法不是从每个按键中获取字符，而是绑定一个事件处理程序以输入隐藏文本对象并同步 itext 对象文本。 在fabricjs 中而不是fabric.util.addListener(this.hiddenTextarea, 'keypress', this.onKeyPress.bind(this)); 使用fabric.util.addListener(this.hiddenTextarea, "input", this.thisOnInputText.bind(this))

在事件处理程序 thisOnInputText 中做这样的事情：

this.text = this.hiddenTextarea.value 

就像 _updateTextarea 函数一样。

这是针对fabricjs版本：“1.5.0”