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/11/30 23:57]
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 7: Line 7:
 === Single Characters === === Single Characters ===
  
-A single character can be converted into an outline, i.e. small line segments. The character ''height'' as well as the character position can be requested by specifying options. The ''height'' is the height of UPPERCASE characters.+A single character can be converted into an outline, i.e. an array of line segments. The character ''height'' as well as the character position can be requested by specifying options. Note: The ''height'' is the height of UPPERCASE characters.
  
 Defaults: Defaults:
Line 17: Line 17:
  
 <code javascript> <code javascript>
-let char1 = vectorChar('H'); +const { vectorChar } = require('@jscad/modeling').text 
-let char2 = vectorChar({ height: 50 }, 'i');+ 
 +const outlines = vectorChar('H'); 
 +const outlines = vectorChar({ height: 50 }, 'i');
 </code> </code>
  
-The above example only creates the outlines of the characters. In order to convert to something useful, the following can be used to extrude a rectangle along the outlines, i.e. segments of each character. This example creates 3D shapes from the outlines of each character.+The above examples only create the outlines of the character. In order to convert to something useful, the following can be used to convert the outlines (segments) into paths.
  
 <code javascript> <code javascript>
-let shape1 = csgFromSegments(char1.segments); +const { path2 } = require('@jscad/modeling').geometries
-let shape2 = csgFromSegments(char2.segments);+
  
-function csgFromSegments (segments) { +const segmentToPath = (segment) => { 
-  let output = []; +  return path2.fromPoints({close: false}, segment)
-  segments.forEach(segment => output.push( +
-    rectangular_extrude(segment, { w:2, h:1 }) +
-  )); +
-  return union(output);+
 } }
 +
 +const paths = outlines.segments.map((segment) => segmentToPath(segment))
 </code> </code>
 +
 +And of course, the paths can be used to create additional shapes, including 3D shapes of the characters.
  
 === 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 51: Line 52:
  
 <code javascript> <code javascript>
-let text1 = vectorText('OpenJSCAD'); +const { vectorText } = require('@jscad/modeling').text 
-let text2 = vectorText({ yOffset: -90, height: 10, extrudeOffset: 2, input: 'OpenJSCAD\nLOVE<3' }); + 
-let text3 = vectorText({ height: 25, align: 'right', lineSpacing: 2.2, extrudeOffset: 2 }, 'OpenJSCAD\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 ===
  
-Other fonts can be used when creating the text outlines. Here are the steps.+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.
  
-  - Download one or more font files from the fonts/vector directory +Once the custom 'compiled' font is availabe, here are the steps to use it. 
-  - Include the font file in the design + 
-  - Reference the font object+  - Create a new project 
 +  - Copy the custom 'compiled' font into the project 
 +  - 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.//**