Question

我正在尝试使用结构画布制作粘滞便笺类型实用程序。它将有助于用作注释器。

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

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

建议表示赞赏。此致...

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

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

http://jsfiddle.net/4HE3U/1/
以上是一个可以满足你的小提琴

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

我添加了Text和Rectangle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

您需要处理双击等事件来处理此行为，然后使用画布处理mousedown或其他交互性以重新组合它们。

Fabric.js Sticky Note类型文本换行

2 个答案: