meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
en:design_guide_text [2020/12/03 03:03]
JSCAD Editor 		en:design_guide_text [2022/04/14 08:32] (current)
rozek included "require" statements, corrected mistakes
Line 1: Line 1:
 ==== Text ==== ==== Text ====
  
-Text can be used in designs to create the outline of charaters, which can then be used to create either 2D or 3D shapes.+Text can be used in designs to create the outline of characters, which can then be used to create either 2D or 3D shapes.
  
 //NOTE: Only the ASCII characters can be used today.// //NOTE: Only the ASCII characters can be used today.//
Line 17: Line 17:
  
 <code javascript> <code javascript>
-let outlines = vectorChar('H'); +const { vectorChar } = require('@jscad/modeling').text 
-let outlines = vectorChar({ height: 50 }, 'i');+ 
 +const outlines = vectorChar('H'); 
 +const outlines = vectorChar({ height: 50 }, 'i');
 </code> </code>
  
Line 24: Line 26:
  
 <code javascript> <code javascript>
 +const { path2 } = require('@jscad/modeling').geometries
 +
 const segmentToPath = (segment) => { const segmentToPath = (segment) => {
-  return geometries.path2.fromPoints({close: false}, segment)+  return path2.fromPoints({close: false}, segment)
 } }
  
-let paths = outlines.segments.map((segment) => segmentToPath(segment))+const paths = outlines.segments.map((segment) => segmentToPath(segment))
 </code> </code>
  
Line 35: Line 39:
 === Text Strings === === Text Strings ===
  
-In addition to single characters, complete text strings can be converted to a series of outlines, i.e. small line segments. Text can be split into multiple lines by including '\n'. And of course, text can be aligned and spaced by specifying options.+In addition to single characters, complete text strings can be converted to a series of outlines, i.e. line segments. Text can be split into multiple lines by including '\n'. And of course, text can be aligned and spaced by specifying options.
  
 Defaults: Defaults:
Line 48: Line 52:
  
 <code javascript> <code javascript>
-let outlines = vectorText('JSCAD'); +const { vectorText } = require('@jscad/modeling').text 
-let outlines = vectorText({ yOffset: -90, height: 10, extrudeOffset: 2, input: 'JSCAD is awesome!' }); + 
-let outlines = vectorText({ height: 25, align: 'right', lineSpacing: 2.2, extrudeOffset: 2 }, 'JSCAD\nRocks!!');+const outlines = vectorText('JSCAD'); 
 +const outlines = vectorText({ yOffset: -90, height: 10, extrudeOffset: 2, input: 'JSCAD is awesome!' }); 
 +const outlines = vectorText({ height: 25, align: 'right', lineSpacing: 2.2, extrudeOffset: 2 }, 'JSCAD\nRocks!!'); 
 +</code> 
 + 
 +Again, you will have to convert the output of `vectorText` into a list of paths before it becomes actually useful: 
 + 
 +<code javascript> 
 +const { path2 } = require('@jscad/modeling').geometries 
 + 
 +const segmentToPath = (segment) => { 
 +  return path2.fromPoints({close: false}, segment) 
 +} 
 + 
 +const paths = outlines.map((segment) => segmentToPath(segment))
 </code> </code>
  
 === Using Other Fonts === === Using Other Fonts ===
  
-The default font was provided from the [[https://github.com/lautr3k/jscad-vector-fonts | JSCAD Vector Font project]]. This project includes several fonts that can be used immediately (fonts/vector/*), as well as a utility to convert singe-line fonts.+The default font ([[http://paulbourke.net/dataformats/hershey/|hershey simplex]]) was provided from the [[https://github.com/lautr3k/jscad-vector-fonts | JSCAD Vector Font project]]. This project includes several 'compiled' fonts that can be used immediately, as well as a utility to convert singe-line fonts.
  
-Other fonts can be used when creating the text outlines. Here are the steps.+Once the custom 'compiled' font is availabe, here are the steps to use it.
  
-  - Download one or more font files from the fonts/vector directory +  - Create a new project 
-  - Include the font file in the design +  - Copy the custom 'compiled' font into the project 
-  - Reference the font object+  - Require the custom font inside the project design
   - Specify the 'font' in the options to vectorChar() or vectorText()   - Specify the 'font' in the options to vectorChar() or vectorText()
  
-//Note: Font objects append 'Font' to the font name, e.g. camBamStick1**Font**.//+<code javascript> 
 +const { path2 } = require('@jscad/modeling').geometries 
 +const { vectorText } = require('@jscad/modeling').text
  
-Default: +const myfont = require('./fonts/vector/cncVector') // CUSTOM FONT
-  * font: [[http://paulbourke.net/dataformats/hershey/|hershey simplex]]+
  
-<code javascript> +const segmentToPath = (segment) => { 
-include('https://www.openjscad.org/fonts/camBamStick1.js'); +  return path2.fromPoints({close: false}, segment)
-  +
-function main (params) { +
-  let myfont = camBamStick1Font; // font object (! NOTE the "Font" suffix) +
-  let text = vectorText({font: myfont, height: 5},'OpenJSCAD'); +
-  return csgFromSegments(text);+
 } }
-  + 
-function csgFromSegments (segments) { +const main = () => { 
-  let output = []; +  const outlines = vectorText({height: 42, align: 'right', font: myfont}, 'JSCAD\nROCKS!!') 
-  segments.forEach(segment => output.push( +  const paths = outlines.map((segment) => segmentToPath(segment)) 
-    rectangular_extrude(segment, { w:2, h:1 }) +  return paths
-  )); +
-  return union(output);+
 } }
 +
 +module.exports = {main}
 </code> </code>
  
-**//Special Note: These fonts are NOT TrueType fonts. There are libraries that create outlines from TrueType (and other) fonts.//**+**//Special Note: These fonts are 'single-line' fonts, NOT TrueType fonts. There are libraries that create outlines from TrueType (and other) fonts.//**