Question

我正在使用fabric.js，我在Text字段中遇到了一些问题。它们在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，我已经在

上进行了测试

Samsung SM-T100（Samsung Galaxy Tab 3），Android v.4.2.2。和Chrome v.38.0.212.102
Samsung SM-G900F（Samsung 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/

＆＃13;

$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.');
});

＆＃13;

<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>

＆＃13;

Answer 2

由于Android中大多数键的ap :: Monad m => m (TypeOfB -> SomeReturnType) -> m TypeOfB -> m SomeReturnType ==> ap :: Monad m => m (a -> b) -> m a -> m b值为0，因此结构将不会在IText的内容中添加任何内容。

这个问题没有直接的解决办法;相反，每当选择iText时，您可以专注于外部输入字段并根据该输入字段更改IText字段的值。这是我的样本jsjiddle。可以隐藏输入字段以使Fabric IText行为看起来更自然。

同样，这是Android的问题，因此根据{ type token = Case | Test | Ident of string let keyword_tbl = Hashtbl.create 64 let _ = List.iter (fun (name, keyword) -> Hashtbl.add keyword_tbl name keyword) [ "case", Case; "test", Test; ] } let ident_char = ['a'-'z' 'A'-'Z' '_'] rule next_token = parse | ident_char+ as s { let canon = String.lowercase s in try Hashtbl.find keyword_tbl canon with Not_found -> (* `Ident canon` if you want case-insensitive vars as well * as keywords *) Ident s }，event.keyCode或event.keyCode读取密钥值的任何Javascript库都可能会失败。

Answer 3

我最近遇到了同样的问题，问题是移动设备中的事件密钥代码。

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

在eventhandler中，thisOnInputText执行以下操作：

this.text = this.hiddenTextarea.value

就像_updateTextarea函数一样。

这适用于fabricjs版本：＆＃34; 1.5.0＆＃34;

Fabric.js文本字段 - Android问题

3 个答案: