Fabric.js 便笺式文本换行

Question

我正在尝试使用织物画布制作一个便签类型实用程序。这将有助于用作注释器。

我希望文本以给定矩形的宽度自动换行。

有人可以更新我的小提琴作品吗？

欢迎提出建议。问候...

以下是我的小提琴部分的链接：

http://jsfiddle.net/U7E9q/5/

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

canvas.hoverCursor = 'pointer';

var text = new fabric.IText("Enter Text Here ",{
      fontSize: 20,
      top: 100,
      left: 100,
      backgroundColor: '#faa',
      lockScalingX: true,
      lockScalingY: true,
      selectable: true
});
//alert(text.text);
  var rect   = new fabric.Rect({
    text_field: text,
    width: 200,
    height: 50,
    fill: '#faa',
    rx: 10,
    ry: 10,
    top: 100,
    left: 100
  });

  canvas.add(rect);
  canvas.add(text);

canvas.on('object:moving', function (event){
   canvas.renderAll(); 
});

createListenersKeyboard();

function createListenersKeyboard() {
    document.onkeydown = onKeyDownHandler;
    //document.onkeyup = onKeyUpHandler;
}

function onKeyDownHandler(event) {
    //event.preventDefault();

    var key;
    if(window.event){
        key = window.event.keyCode;
    }
    else{
        key = event.keyCode;
    }

    switch(key){
        //////////////
        // Shortcuts
        //////////////
        // Copy (Ctrl+C)
        case 67: // Ctrl+C
            if(ableToShortcut()){
                if(event.ctrlKey){
                    event.preventDefault();
                    copy();
                }
            }
            break;
        // Delete (Ctrl+D)
        case 127: // Ctrl+D
            if(ableToShortcut()){
                if(event.deleteKey){
                    delet();
                }
            }
            break;            
        // Paste (Ctrl+V)
        case 86: // Ctrl+V
            if(ableToShortcut()){
                if(event.ctrlKey){
                    event.preventDefault();
                    paste();
                }
            }
            break;            
        default:
            // TODO
            break;
    }
}


function ableToShortcut(){
    /*
    TODO check all cases for this

    if($("textarea").is(":focus")){
        return false;
    }
    if($(":text").is(":focus")){
        return false;
    }
    */
    return true;
}

function copy(){
    if(canvas.getActiveGroup()){
        for(var i in canvas.getActiveGroup().objects){
            var object = fabric.util.object.clone(canvas.getActiveGroup().objects[i]);
            object.set("top", object.top+5);
            object.set("left", object.left+5);
            copiedObjects[i] = object;
        }                    
    }
    else if(canvas.getActiveObject()){
        var object = fabric.util.object.clone(canvas.getActiveObject());
        object.set("top", object.top+5);
        object.set("left", object.left+5);
        copiedObject = object;
        copiedObjects = new Array();
    }
}

function paste(){
    if(copiedObjects.length > 0){
        for(var i in copiedObjects){
            canvas.add(copiedObjects[i]);
        }                    
    }
    else if(copiedObject){
        canvas.add(copiedObject);
    }
    canvas.renderAll();    
}

function delet(){
        var activeObject = canvas.getActiveObject();
        canvas.remove(activeObject);
        console.log('after remove getActiveObject(): ', canvas.getActiveObject(), activeObject === canvas.getActiveObject());
        canvas.renderAll();    
}

Answer 1

如果您将便笺作为分组的矩形和文本进行管理，则可以改进相同的行为。当您需要编辑组内的文本时，您只需取消组合并克隆元素，将克隆的元素附加到画布并将文本设置为可编辑。

您需要处理像双击这样的事件来处理此行为，然后处理鼠标按下或与画布的其他交互以重新组合它们。

Answer 2

http://jsfiddle.net/4HE3U/1/
以上就是一个能让你满意的小提琴

基本上我已经制作了一组文本和矩形并将其添加到画布中。您只需要进行一项更改，即您可以使用一个文本框来获取当前的便笺文本内容，因为一旦我们添加任何组，我们就无法在线编辑 i-text 的文本。目前 IText 无法处理这些事件，因为如果它包含在一个组中，它们就不会传递给它。我认为这也是处理该问题的首选方式，因为它会使用户感到困惑——如果他开始编辑多个文本怎么办。这最终可能会一团糟。也许你可以稍微修改你的脚本来解决这个问题。

我添加了文本和矩形

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

canvas.hoverCursor = 'pointer';

var text = new fabric.IText("Enter Text Here ",{
      fontSize: 20,
      top: 100,
      left: 100,
      backgroundColor: '#faa',
      lockScalingX: true,
      lockScalingY: true,
      selectable: true
});
//alert(text.text);
  var rect   = new fabric.Rect({
    text_field: text,
    width: 200,
    height: 50,
    fill: '#faa',
    rx: 10,
    ry: 10,
    top: 100,
    left: 100
  });


var group = new fabric.Group([ rect, text ], {
  left: 100,
  top: 100,
  lockScalingX: true,
  lockScalingY: true,
  hasRotatingPoint: false,
  transparentCorners: false,
  cornerSize: 7
});

  canvas.add(group);
  //canvas.add(text);

canvas.on('object:moving', function (event){
   canvas.renderAll(); 
});

createListenersKeyboard();

function createListenersKeyboard() {
    document.onkeydown = onKeyDownHandler;
    //document.onkeyup = onKeyUpHandler;
}

function onKeyDownHandler(event) {
    //event.preventDefault();
    
    var key;
    if(window.event){
        key = window.event.keyCode;
    }
    else{
        key = event.keyCode;
    }
    
    switch(key){
        //////////////
        // Shortcuts
        //////////////
        // Copy (Ctrl+C)
        case 67: // Ctrl+C
            if(ableToShortcut()){
                if(event.ctrlKey){
                    event.preventDefault();
                    copy();
                }
            }
            break;
        // Delete (Ctrl+D)
        case 127: // Ctrl+D
            if(ableToShortcut()){
                if(event.deleteKey){
                    delet();
                }
            }
            break;            
        // Paste (Ctrl+V)
        case 86: // Ctrl+V
            if(ableToShortcut()){
                if(event.ctrlKey){
                    event.preventDefault();
                    paste();
                }
            }
            break;            
        default:
            // TODO
            break;
    }
}


function ableToShortcut(){
    /*
    TODO check all cases for this
    
    if($("textarea").is(":focus")){
        return false;
    }
    if($(":text").is(":focus")){
        return false;
    }
    */
    return true;
}

function copy(){
    if(canvas.getActiveGroup()){
        for(var i in canvas.getActiveGroup().objects){
            var object = fabric.util.object.clone(canvas.getActiveGroup().objects[i]);
            object.set("top", object.top+5);
            object.set("left", object.left+5);
            copiedObjects[i] = object;
        }                    
    }
    else if(canvas.getActiveObject()){
        var object = fabric.util.object.clone(canvas.getActiveObject());
        object.set("top", object.top+5);
        object.set("left", object.left+5);
        copiedObject = object;
        copiedObjects = new Array();
    }
}

function paste(){
    if(copiedObjects.length > 0){
        for(var i in copiedObjects){
            canvas.add(copiedObjects[i]);
        }                    
    }
    else if(copiedObject){
        canvas.add(copiedObject);
    }
    canvas.renderAll();    
}

function delet(){
        var activeObject = canvas.getActiveObject();
        canvas.remove(activeObject);
        console.log('after remove getActiveObject(): ', canvas.getActiveObject(), activeObject === canvas.getActiveObject());
        canvas.renderAll();    
}

<canvas id="fabric-canvas" width="400" height="400"></canvas>