jscad text

texto jscad

Crie contornos de texto usando fontes TTF

Este projeto contém um conjunto de funções que produzem contornos 2D de texto usando fontes TTF.

Visão geral

O projeto JSCAD não oferece a capacidade de usar fontes TTF ao criar contornos de texto (ele suporta apenas fontes SIMPLEX). Portanto, um conjunto especial de funcionalidades foi criado para complementar o JSCAD.

NOTA: Devido à natureza das fontes TTF, esta biblioteca não pode ser usada por meio da JSCAD Web UI. Continue lendo...

Basicamente, esta biblioteca depende da biblioteca ‘opentype.js’. É uma biblioteca muito legal que faz algumas coisas interessantes; descompacta a fonte, lê o conteúdo e produz estruturas semelhantes a SVG.

Mas antes mesmo disso, um arquivo de fonte TTF deve estar disponível. Todos os sistemas operacionais vêm com uma ou mais fontes, e elas podem ser usadas, se você conseguir encontrá-las. As fontes também podem ser baixadas de sites.

Existem dois exemplos; um que lê arquivos de fontes locais e outro que baixa fontes do Google Fonts.

Índice

• Instalação
• Exemplos
• Projetos
• Nota Especial
• Licença

Instalação

Para projetos baseados em Node.js, este pacote pode ser instalado usando NPM.

 npm install jscad-text

Para projetos independentes, este pacote pode ser baixado e incluído como um componente.

• Baixe o pacote do GitHub
• Descompacte o conteúdo, que produzirá um diretório chamado 'jscad-text'
• Copie o diretório ‘jscad-text’ para o projeto maior

Exemplos

Cada um dos exemplos é um pequeno projeto NPM independente; fonte local e googlefont.

Projeto de fonte local

Este projeto é o mais fácil de usar, pois as fontes são lidas em arquivos locais. Basta encontrar uma fonte legal e copiar o arquivo para a pasta localFont.

• MacOS: consulte /Library/Fonts ou /System/Library/Fonts
• Janelas:
• Linux:

Configurar:

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

Execução:

 npm run example

E abra 'localfont/index.svg' usando qualquer navegador.

O conteúdo de 'index.js' pode ser modificado para alterar o caminho para o arquivo de fonte ou alterar as opções da função textToPaths(). Este também é um design JSCAD típico e pode ser modificado para fazer o que quiser com os caminhos.

Projeto de fontes do Google

Este projeto obtém fontes do site Google Fonts. Basta ir até lá, encontrar uma boa 'família' de fontes e escrever o nome.

Outra biblioteca legal chamada ‘node-fetch’ está sendo usada para baixar a fonte da internet.

Configurar:

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

Execução:

 npm run cli

E abra 'text.svg' usando qualquer navegador.

Projetos

Ainda está aí...

Então, veja como usar esta biblioteca dentro de um projeto (design JSCAD).

Se ainda não, crie uma nova pasta para o projeto. (Este exemplo usa 'newproject' como nome da pasta.)

Baixe esta biblioteca, descompacte e copie tudo para a pasta do projeto. Clique no CÓDIGO verde acima e selecione Baixar ZIP.

Agora, encontre uma fonte e copie-a para a pasta do projeto.

Dentro da pasta do projeto, crie um arquivo chamado index.js e adicione o código a seguir.

 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 }

Quase lá. Agora baixe a biblioteca opentype.js aqui; https://github.com/opentypejs/opentype.js Descompacte o conteúdo e copie opentype.js/dist/opentype.js para newproject/jscad-text-master/src/opentype.js

Feito!

Agora basta arrastar e soltar a pasta do projeto no site JSCAD.

Nota Especial

ESTE PROJETO SÓ FUNCIONA COM JSCAD V2.

Consulte o Guia do usuário para obter algumas dicas.

Licença

A Licença MIT (MIT)