面料JS - 斯普利特多行的iText

Question

我使用的面料JS爲我的項目，我想拆多行的iText像下面的圖片：

split multiple lines on IText

這裏是我的代碼：

var canvas = new fabric.Canvas("canvas", { preserveObjectStacking: true 
}); 

var text = new fabric.IText("Hello!\nSplit Me\nPlease....", { 
    fontSize: 20, 
    top: 80, 
    left: 100, 
    fontFamily: "Arial" 
}); 

canvas.add(text); 
canvas.renderAll(); 


$('#split').click(function() { 

    var object = canvas.getActiveObject(); 

    if(!object) return false; 

    if ((object.get('type') == 'i-text') && (object.getText().indexOf("\n") > 0)) { 

     var splitText = object.getText().split("\n"); 
     var group = new fabric.Group(); 
     var cloneObj = []; 

     for(var i=0;i<=splitText.length-1;i++) { 
      cloneObj[i] = fabric.util.object.clone(object); 
      cloneObj[i].setText(splitText[i]); 
      canvas.add(group); 
      canvas.add(cloneObj[i]); 
      group.addWithUpdate(cloneObj[i]); 
      canvas.renderAll(); 
     } 

     object.remove(); 
     canvas.setActiveGroup(group); 
     group.setCoords(); 
     canvas.renderAll(); 

    } 
}); 

這裏是jsfiddle：https://jsfiddle.net/m74ruzwq/2/

任何幫助，將不勝感激。提前致謝。

Answer 1

最好的方法是從結構中取出任何textLine，它已經拆分，爲每一行生成一個新對象，修復最高值，最後渲染。

var canvas = new fabric.Canvas("canvas", { preserveObjectStacking: true }); 
 

 
var text = new fabric.IText("Hello!\nSplit Me\nPlease....", { 
 
    fontSize: 20, 
 
    top: 80, 
 
    left: 100, 
 
    fontFamily: "Arial" 
 
}); 
 

 
canvas.add(text); 
 
canvas.renderAll(); 
 

 

 
$('#split').click(function() { 
 

 
\t \t var object = canvas.getActiveObject(); 
 
\t \t 
 
    if(!object) return false; 
 
    
 
\t \t if (object._textLines && object._textLines.length > 1) { 
 
     canvas.renderOnAddRemove = false; 
 
\t \t \t var group = new fabric.Group(); 
 
\t \t \t var cloneObj = []; 
 
     var options = object.toObject(); 
 
     group.canvas = canvas; 
 
     delete options.text; 
 
\t \t \t for(var i=0; i < object._textLines.length; i++) { 
 
\t \t \t \t var newObj = new fabric.IText(object._textLines[i], options); 
 
     newObj.top += i * object.fontSize * object.lineHeight; 
 
\t \t \t \t canvas.add(newObj); 
 
     group.addWithUpdate(newObj); 
 
\t \t \t } 
 
\t \t \t object.remove(); 
 
     group.setCoords(); 
 
     canvas.renderOnAddRemove = true; 
 
\t \t \t canvas.setActiveGroup(group); 
 
     canvas.renderAll(); 
 
\t \t } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.14/fabric.min.js"></script> 
 
<button id="split">Split</button> 
 
<canvas id="canvas" width="400" height="300" style="border: 1px solid #ccc"></canvas>

Answer 2

任何幫助。

這裏是的jsfiddle：​​

1按鈕分割爲組。 2按鈕取消組合。

var canvas = new fabric.Canvas("canvas", { preserveObjectStacking: true }); 

    var text = new fabric.IText("Hello!\nSplit Me\nPlease....", { 
     fontSize: 20, 
     top: 80, 
     left: 100, 
     fontFamily: "Arial" 
    }); 

    canvas.add(text); 
    canvas.renderAll(); 


    $('#split').click(function() { 

      var object = canvas.getActiveObject(); 

     if(!object) return false; 

      if ((object.get('type') == 'i-text') && (object.getText().indexOf("\n") > 0)) { 

       var splitText = object.getText().split("\n"); 
      var top = object.top 
       var group = new fabric.Group(); 
       var cloneObj = []; 
      canvas.add(group); 
       for(var i=0;i<=splitText.length-1;i++) { 
        cloneObj[i] = fabric.util.object.clone(object); 
        cloneObj[i].setText(splitText[i]); 
      cloneObj[i].setTop(top+cloneObj[i].height*i); 

       // canvas.add(cloneObj[i]); 
        group.addWithUpdate(cloneObj[i]); 
        canvas.renderAll(); 
       } 

       object.remove(); 
     // canvas.setActiveGroup(group); 
       group.setCoords(); 
       canvas.renderAll(); 

      } 
    }); 
     $('#ungroup').click(function() { 
     var group = canvas.getActiveObject(); 
     for(var i=0;i<= group._objects.length-1;i++) { 
     var cloneObj = fabric.util.object.clone(group._objects[i]); 
     cloneObj.setTop(group.top+cloneObj.height*i); 
     cloneObj.left = group.left; 
     cloneObj.setCoords(); 
     canvas.add(cloneObj); 
     } 
      canvas.remove(group); 
     canvas.renderAll(); 
      });