jscad text 다운로드 - jscad text 소스 코드 다운로드

jscad text

글꼴 다운로드

1.0.0

다운로드

jscad 텍스트

TTF 글꼴을 사용하여 텍스트 윤곽선 만들기

이 프로젝트에는 TTF 글꼴을 사용하여 텍스트의 2D 윤곽선을 생성하는 기능 세트가 포함되어 있습니다.

개요

JSCAD 프로젝트는 텍스트 윤곽선을 만들 때 TTF 글꼴을 사용하는 기능을 제공하지 않습니다(SIMPLEX 글꼴만 지원합니다.) 따라서 JSCAD를 지원하기 위해 특별한 기능 세트가 만들어졌습니다.

참고: TTF 글꼴의 특성으로 인해 이 라이브러리는 JSCAD 웹 UI를 통해 사용할 수 없습니다. 계속 읽어보세요...

기본적으로 이 라이브러리는 'opentype.js' 라이브러리에 의존합니다. 이것은 매끄러운 작업을 수행하는 정말 멋진 라이브러리입니다. 글꼴의 압축을 풀고, 내용을 읽고, SVG와 같은 구조를 생성합니다.

하지만 그 전에도 TTF 글꼴 파일을 사용할 수 있어야 합니다. 모든 운영 체제에는 하나 이상의 글꼴이 함께 제공되며, 해당 글꼴을 찾으면 사용할 수 있습니다. 글꼴은 웹사이트에서도 다운로드할 수 있습니다.

두 가지 예가 있습니다. 하나는 로컬 글꼴 파일을 읽는 것이고 다른 하나는 Google Fonts에서 글꼴을 다운로드하는 것입니다.

설치

Node.js 기반 프로젝트의 경우 NPM을 사용하여 이 패키지를 설치할 수 있습니다.

 npm install jscad-text

독립 실행형 프로젝트의 경우 이 패키지를 다운로드하여 구성 요소로 포함할 수 있습니다.

GitHub에서 패키지 다운로드
내용의 압축을 풀면 'jscad-text'라는 디렉토리가 생성됩니다.
'jscad-text' 디렉토리를 더 큰 프로젝트에 복사하세요.

예

각 샘플은 소규모 독립형 NPM 프로젝트입니다. 로컬폰트와 구글폰트.

로컬 글꼴 프로젝트

이 프로젝트는 글꼴을 로컬 파일에서 읽으므로 사용하기 가장 쉽습니다. 좋은 글꼴을 찾아 해당 파일을 localFont 폴더에 복사하면 됩니다.

MacOS: /Library/Fonts 또는 /System/Library/Fonts 참조
윈도우:
리눅스:

설정:

 npm install
cd localfont
ln -s ../../jscad-text ./jscad-text
cd ..

실행:

 npm run example

그리고 브라우저를 사용하여 'localfont/index.svg'를 엽니다.

index.js의 내용을 수정하여 글꼴 파일의 경로를 변경하거나, textToPaths() 함수에 대한 옵션을 변경할 수 있습니다. 이는 일반적인 JSCAD 디자인이기도 하며 경로를 통해 원하는 작업을 수행하도록 조정할 수 있습니다.

Google 글꼴 프로젝트

이 프로젝트는 Google Fonts 웹사이트에서 글꼴을 얻습니다. 거기 가서 멋진 글꼴 '패밀리'를 찾아 이름을 적어보세요.

인터넷에서 글꼴을 다운로드하는 데 'node-fetch'라는 또 다른 멋진 라이브러리가 사용되고 있습니다.

설정:

 cd googlefont
npm install
ln -s ../../jscad-text ./jscad-text

실행:

 npm run cli

그리고 브라우저를 사용하여 'text.svg'를 엽니다.

프로젝트

아직 거기...

따라서 프로젝트(JSCAD 디자인) 내에서 이 라이브러리를 사용하는 방법은 다음과 같습니다.

아직 생성되지 않은 경우 프로젝트에 대한 새 폴더를 생성합니다. (이 예시에서는 폴더 이름으로 'newproject'를 사용하고 있습니다.)

이 라이브러리를 다운로드하고 압축을 푼 후 모든 항목을 프로젝트 폴더에 복사하세요. 위의 녹색 코드를 클릭하고 ZIP 다운로드를 선택하세요.

이제 글꼴을 찾아서 프로젝트 폴더에 복사하세요.

프로젝트 폴더 안에 index.js라는 파일을 생성하고 다음 코드를 추가합니다.

 const { primitives } = require('@jscad/modeling')

const { loadFontFromData, textToPaths } = require('./jscad-text-master')

const fs = require('fs')

const main = (params) => {
  const data = fs.readFileSync('newproject/Habana.ttf') // CHANGE THIS TO THE FONT FILE NAME

  const font = loadFontFromData(data)

  const paths = textToPaths({font, segments: 144}, 'JSCAD ROCKS!!')

  return paths
}

module.exports = { main }

거의 다 왔습니다. 이제 여기에서 opentype.js 라이브러리를 다운로드하세요. https://github.com/opentypejs/opentype.js 내용의 압축을 풀고 opentype.js/dist/opentype.js를 newproject/jscad-text-master/src/opentype.js에 복사합니다.

완료!

이제 프로젝트 폴더를 JSCAD 웹사이트로 끌어서 놓기만 하면 됩니다.