FabricJS 텍스트 개체에 새 줄을 추가하는 중

Question

FabricJS의 textBackgroundColor에 패딩을 추가 할 수 없다는 것을 알고 있습니다 (패딩이 있지만 textBackgroundColor에 영향을주지 않습니다). 그래서 텍스트의 모양을 해킹하려고합니다. 패딩이 있다는 인상을주기 위해서.

텍스트 개체 내의 각 줄 끝에 공백을 자동으로 추가하여이 작업을 수행하고 있습니다. 그것은 우아하지는 않지만 가까이옵니다.

그러나 1 문제에 봉착하고 내 코드가 약간 엉망이되었습니다.

이제 새 줄을 추가하면 (return을 치는) 예상대로 작동하지 않습니다.

커서가 문자 뒤에 나타나서 새로운 행을 얻기 위해 2 회 리턴해야합니다. 그러면 빈 줄이 추가됩니다.

무엇이 잘못 되었나요? 어떻게 다시 되돌릴 수 있습니까?

빈 줄 버그를 해결할 줄 알았는데 줄에 하나 이상의 문자가 포함되어있는 경우에만 공백을 추가하는 것이 좋겠지 만이를 달성 할 수 없었습니다.

는 여기에 내가 패딩을 얻기 위해 텍스트에 텍스트를 추가 생각하지 않습니다 내 Fiddle

JS

var canvas = new fabric.Canvas('mycanvas'); 
var activeObject = canvas.getActiveObject(str1); 

var objects = canvas.getObjects(); 
var concatstr = ''; 
var res; 
var str; 
var str1; 
var abcd; 
canvas.on('text:changed', function() { 
    var concatstr = ''; 
    var activeObject = canvas.getActiveObject(); 
    var txtsa = jQuery.trim(activeObject.text); 
    values = txtsa.split('\n'); 

    jQuery.each(values, function(index, val) { 
    jQuery.trim(val); 
    concatstr += " " + val + " " + "\\n"; 
    }); 
    var temp = concatstr.replace(/ +/g, ' '); 
    var final = temp.replace(/\\n/g, "\n"); 

    activeObject.setText(final); 
}); 

var text1 = new fabric.IText(' Text ', { 
    top: 100, 
    left: 100, 
    textBackgroundColor: '#000', 
    fontSize: 30, 
    lineHeight: 0.9, 
    fill: 'white', 
    fontWeight: 'bold', 
    textAlign: 'center', 
    fontFamily: 'Helvetica Nue, Helvetica, Sans-Serif, Arial, Trebuchet MS', 
}); 

canvas.add(text1); 
canvas.renderAll(); 

Answer 1

수있는 좋은 솔루션입니다.

공백을 추가하고 키 누르기에 대한 질문 인 경우에도 배경색에 패딩을 추가하는 다른 방법을 보여줍니다.

fabric.Object.prototype._renderBackground = function(ctx) { 
 
     if (!this.backgroundColor) { 
 
     return; 
 
     } 
 
     var dim = this._getNonTransformedDimensions(); 
 
     ctx.fillStyle = this.backgroundColor; 
 

 
     ctx.fillRect(
 
     -dim.x/2 - 10, 
 
     -dim.y/2 - 10, 
 
     dim.x + 20, 
 
     dim.y + 20 
 
    ); 
 
     // if there is background color no other shadows 
 
     // should be casted 
 
     this._removeShadow(ctx); 
 
    }; 
 

 
var canvas = new fabric.Canvas('mycanvas'); 
 
var activeObject = canvas.getActiveObject(str1); 
 

 
var objects = canvas.getObjects(); 
 
var concatstr = ''; 
 
var res; 
 
var str; 
 
var str1; 
 
var abcd; 
 

 
var text1 = new fabric.IText(' Text ', { 
 
    top: 100, 
 
    left: 100, 
 
    backgroundColor: '#000', 
 
    fontSize: 30, 
 
    lineHeight: 0.9, 
 
    fill: 'white', 
 
    fontWeight: 'bold', 
 
    textAlign: 'center', 
 
    fontFamily: 'Helvetica Nue, Helvetica, Sans-Serif, Arial, Trebuchet MS', 
 
}); 
 

 
canvas.add(text1); 
 
canvas.renderAll();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script> 
 

 
<canvas id="mycanvas" width="1000" height="1000"></canvas>

기본 backgroundColor로 함수를 오버라이드 (override)를 참조로

은 매우 간단합니다. 라이브러리의 모든 사용자에게 옵션을 추가하기는 어렵지만 프로토 타입 변경을 통해 사용자 정의 동작을 쉽게 얻을 수 있습니다.