Javascript Fabric.js便笺类型文本换行

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

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

有人能更新我的小提琴作品吗

欢迎提出建议。问候

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

以上是一把能让你满意的小提琴

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

我添加了文本和矩形

var canvas=newfabric.canvas（'fabric-canvas'）；
canvas.hoverCursor='pointer'；
var text=new fabric.IText（“在此处输入文本”{
尺寸：20，
前100名，
左:100,，
背景颜色：“#faa”，
lockScalingX：对，
lockScalingY：是的，
可选：真
});
//警报（text.text）；
var rect=new fabric.rect({
文本字段：文本，
宽度：200，
身高：50，
填写：“#faa”，
处方:10,，
ry:10，
前100名，
左：100
});
var group=new fabric.group（[rect，text]{
左:100,，
前100名，
lockScalingX：对，
lockScalingY：是的，
hasRotatingPoint:false，
透明角：错误，
尺码：7
});
canvas.add（组）；
//canvas.add（文本）；
canvas.on（'对象：移动'，函数（事件）{
canvas.renderAll（）；
});
createListenersKeyboard（）；
函数createListenersKeyboard（）{
document.onkeydown=onKeyDownHandler；
//document.onkeyup=onkeyupchandler；
}
函数onKeyDownHandler（事件）{
//event.preventDefault（）；
var键；
if（window.event）{
key=window.event.keyCode；
}
否则{
key=event.keyCode；
}
开关（钥匙）{
//////////////
//捷径
//////////////
//复制（Ctrl+C）
案例67://Ctrl+C
if（ableToSortcut（））{
if（event.ctrlKey）{
event.preventDefault（）；
复制（）；
}
}
打破
//删除（Ctrl+D）
案例127://Ctrl+D
if（ableToSortcut（））{
if（event.deleteKey）{
删除（）；
}
}
打破
//粘贴（Ctrl+V）
案例86://Ctrl+V
if（ableToSortcut（））{
if（event.ctrlKey）{
event.preventDefault（）；
粘贴（）；
}
}
打破
违约：
//待办事项
打破
}
}
函数ablethortcut（）{
/*
TODO检查所有案例是否存在此问题
如果（$（“textarea”）.是（“：focus”））{
返回false；
}
如果（$（“：text”）.是（“：focus”））{
返回false；
}
*/
返回true；
}
函数副本（）{
if（canvas.getActiveGroup（））{
for（canvas.getActiveGroup（）.objects中的变量i）{
var object=fabric.util.object.clone（canvas.getActiveGroup（）.objects[i]）；
object.set（“top”，object.top+5）；
object.set（“左”，object.left+5）；
复制对象[i]=对象；
}                    
}
else if（canvas.getActiveObject（））{
var object=fabric.util.object.clone（canvas.getActiveObject（））；
object.set（“top”，object.top+5）；
object.set（“左”，object.left+5）；
复制对象=对象；
copiedObjects=新数组（）；
}
}
函数粘贴（）{
如果（复制对象的长度>0）{
for（复制对象中的变量i）{
canvas.add（复制对象[i]）；
}                    
}
else if（复制对象）{
canvas.add（复制对象）；
}
canvas.renderAll（）；
}
函数delet（）{
var activeObject=canvas.getActiveObject（）；
canvas.remove（activeObject）；
console.log（'after remove getActiveObject（）：'，canvas.getActiveObject（），activeObject==canvas.getActiveObject（））；
canvas.renderAll（）；
}

---

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

---

您需要处理类似双击的事件来处理此行为，然后使用画布处理鼠标向下或其他交互来重新组合它们

不，这行不通。我需要两个对象相互绑定，并且具有可编辑功能。然而，当你回答的时候，我深深地投入到织物中&意识到这是不可能的。

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