레퍼런스 p5.Font

p5.Font

글꼴을 그리는 클래스.

예제

구문

p5.Font([pInst])

매개변수

pInst
P5:

p5 인스턴스 포인터.

메서드

textBounds

글꼴을 사용하여 작성된 텍스트의 경계 상자(bounding box)를 반환합니다.

경계 상자는 텍스트 문자열을 포함할 수 있는 가장 작은 직사각형입니다. font.textBounds()는 경계 상자의 위치와 크기를 포함하는 객체를 반환합니다. 예를 들어 font.textBounds('p5*js', 5, 20)를 호출하면 다음과 같은 형식의 객체가 반환됩니다. { x: 5.7, y: 12.1 , w: 9.9, h: 28.6 }. xy 속성은 경계 상자의 왼쪽 상단 모서리의 좌표입니다.

첫 번째 매개변수 str은 텍스트 문자열입니다. 두 번째와 세 번째 매개변수인 xy는 텍스트의 위치입니다. 기본적으로, 이들은 경계 상자 좌하단의 좌표로 설정합니다. 더 많은 텍스트 정렬 방법은 textAlign()를 참조하십시오.

네 번째 매개변수 fontSize는 선택 사항입니다. 경계 상자를 결정하는 데 사용되는 글꼴 크기를 설정합니다. 기본적으로, font.textBounds()는 현재의 textSize()를 사용합니다.

textToPoints

글꼴을 사용하여 작성된 텍스트의 윤곽을 나타내는 점 배열을 반환합니다.

배열의 각 점 객체에는 점의 위치와 방향을 나타내는 세 가지 속성이 있습니다. 예시로, { x: 10, y: 20, alpha: 450 }가 있습니다.

첫 번째 매개변수 str은 텍스트 문자열입니다. 두 번째와 세 번째 매개변수인 xy는 텍스트의 위치입니다. 기본적으로, 이들은 경계 상자 좌하단의 좌표를 설정합니다. 더 많은 텍스트 정렬 방법은 textAlign()를 참조하십시오.

네 번째 매개변수 fontSize는 선택 사항입니다. 텍스트의 글꼴 크기를 설정합니다. 기본적으로, font.textToPoints()는 현재의 textSize()를 사용합니다.

다섯 번째 매개변수인 options도 선택 사항입니다. font.textToPoints()는 다음과 같은 속성을 가진 객체가 들어갈 수 있습니다:

sampleFactor는 텍스트의 경로 길이와 샘플 수의 비율입니다. 기본값은 0.1입니다. 값이 높으면 경로를 따라 더 많은 점을 생성하며 더 정밀합니다.

simplifyThreshold는 0이 아닌 숫자로 설정되면 공선점(collinear point)을 제거합니다. 이 값은 두 가지 모서리가 공선(collinear)인지를 결정할 때 사용할 임계 각도를 나타냅니다.

Notice any errors or typos? Please let us know. Please feel free to edit src/typography/p5.Font.js and open a pull request!

관련 레퍼런스