FabricJs : IText가 여분의 패딩을 추가합니다.

Question

FabricJs를 사용하여 텍스트 레이어를 만들었지 만 정렬 선에 문제가 있습니다. 텍스트 레이어는 레이어 경계와 실제 텍스트 사이에 추가 빈 공간이 만들어집니다. 필자가 달성하고자하는 것은 정렬 선이 텍스트 제한에 맞지만 패딩이 0 (기본 값)으로 설정된 경우에도 빈 공간을 포함하여 정렬됩니다.

저는 해킹 된 해결책을 찾아 레이어에 -7px 패딩을 추가하려고 시도했지만 여전히 이상하게 보입니다.

var iText2 = new fabric.IText('Text with negative padding', { 
    fontFamily: 'Arial', 
    left: 100, 
    top: 250, 
    fill: "#000000", 
    stroke: "", 
    padding: -7, 
    transparentCorners: true 
}); 

JSFiddle는 : https://jsfiddle.net/grieverll/5gabg92k/

Answer 1

나는 해키 솔루션을 함께했다. fabricJS에서 AligningGuidelines 함수를 수정하여 iText 레이어에서 다르게 작동합니다.

  if (activeObject.typeL == 'TEXT' && !activeTransformed) { 
       activeObjectHeight -= (activeObjectHeight/2.2); 
       activeTransformed = true; 
      } 

      if (canvasObjects[i].typeL == 'TEXT') { 
       objectHeight -= (objectHeight/2.2); 

      } 

      if (canvasObjects[i].typeL !== 'TEXT' && activeObject.typeL !== 'TEXT') { 
       //Default function code 
      } 

기본적으로 활성 개체가 다른 개체 또는 텍스트 레이어에 정렬되어 있으면 수정 된 높이가됩니다.