2017-11-23 1 views
0

enter image description hereFabricJS 텍스트 상자는 - 커서 위치는 특정 글꼴

위의 이미지에서 커서가 마지막에 있어야 올바르게 설정되지 않지만, 어떤 이유로, 그것은 마지막 문자 앞에 배치됩니다. 이것은 특정 글꼴에서만 발생합니다.

사용자 글꼴이로드되는 방식과 관련이 있다고 생각하지 않습니다.이 이미지는 http://fabricjs.com/loadfonts에서 가져 왔습니다. 또한 라이브러리의 마지막 버전이 사용되고 있습니다.

  1. 변경 "파시 피코"에 대한 글꼴 - 가족 :

    는 다음을 수행해야하는 문제를 재현합니다.
  2. 텍스트 상자를 클릭하여 편집 모드로 들어갑니다.
  3. 입력을 시작하십시오.

경우에 따라 마지막 문자조차도 테두리 상자 바깥으로 이동합니다. 이것은 _measureChar() 함수가 실행되는 방식과 관련이 있다고 생각하지만 변경해야 할 항목이 무엇인지 확신 할 수 없습니다.

미리 감사드립니다.

편집 : 더 많은 테스트를 수행했으며 IE에는이 문제가없는 것 같습니다. 이 문제는 Chrome 및 Firefox에서 나타납니다. 문자는 각 브라우저에서 렌더링되는 방법 또한 이상하다 : enter image description here

+0

파시 피코 네, 나는이 이유가 될 수있다 생각하는 일부 잘못된 측정 – AndreaBogazzi

+0

수 있으며, 몇 가지 이상한 커닝이있다. 또한 IE에서 문제가 나타나지 않는 것으로 나타났습니다. 또한 각 문자의 모양이 브라우저간에 일관성있는 것으로 보이지 않습니다. 내 질문에이를 표시 할 이미지를 추가하여 업데이트했습니다. – five

+0

이 문제는 https://github.com/kangax/fabric.js/issues/3588과 관련이 있다고 생각합니다. – five

답변

0

이 (canvas.requestRenderAll 전에 코드 아래에 추가)

fabric.charWidthsCache[this.value] = {}; 
canvas.getActiveObject()._initDimensions(); 
canvas.getActiveObject().setCoords(); 
+0

requestRenderAll()이 호출되기 직전에이 코드를 onInput() 메서드에 추가했지만 커서 위치가 여전히 올바르게 설정되지 않았습니다. – five

+0

plz 그래서 jsfiddle을 추가하십시오. 시도해 보겠습니다. –

+0

https://jsfiddle.net/f1v3/f12841gc/ "Times New Roman"을 선택하면 문제가 없습니다. 내가 지정한 텍스트를 포함하여 onInput() 함수를 수정하는 Textbox 하위 클래스를 만들었습니다. – five