Text Entities

WebCAD supports two types of text entities: single-line text and multi-line text.

TextEnt Single-Line Text

import { TextEnt, Point2D } from 'vjcad';

const text = new TextEnt(
  new Point2D(50, 50),    // Insertion point
  'Sample text',           // Text content
  10,                      // Text height
  0,                       // Rotation angle
  'left',                  // Alignment
  'Arial',                 // Font
  256                      // Color
);
text.setDefaults();

// Modify properties
text.text = 'New text';  // or text.textString = 'New text'
text.height = 15;
text.rotation = Math.PI / 6;  // 30 degrees

TextEnt Properties

Property	Type	Description
insertionPoint	Point2D	Insertion point
text	string	Text content (alias for textString)
textString	string	Text content
height	number	Text height
rotation	number	Rotation angle (radians)
textAlignment	string	Alignment
styleName	string	Text style name
textStyle	TextStyle	Text style object (read-only, automatically obtained after setting styleName)

Alignment

Value	Description
left	Left-aligned
center	Center-aligned
right	Right-aligned
aligned	Aligned
middle	Middle
fit	Fit

MTextEnt Multi-Line Text

import { MTextEnt, Point2D } from 'vjcad';

const mtext = new MTextEnt(
  new Point2D(50, 50),    // Insertion point
  'Multi-line text content',
  10,                      // Text height
  0,                       // Rotation angle
  1,                       // Attachment (1=Top Left)
  1.0,                     // Line spacing factor
  'Arial',                 // Font
  256                      // Color
);
mtext.maxWidth = 200;      // Maximum width
mtext.setDefaults();

MTextEnt Properties

Property	Type	Description
insertionPoint	Point2D	Insertion point
text	string	Text content (alias for textString)
textString	string	Text content
contents	string	Rich text content (with format codes)
height	number	Text height
rotation	number	Rotation angle
maxWidth	number	Maximum width
textAttachment	number	Attachment point
lineSpacingFactor	number	Line spacing factor
styleName	string	Text style name
textStyle	TextStyle	Text style object (read-only, automatically obtained after setting styleName)

Attachment Points

Value	Description
1	Top Left
2	Top Center
3	Top Right
4	Middle Left
5	Middle Center
6	Middle Right
7	Bottom Left
8	Bottom Center
9	Bottom Right

Rich Text Formatting

MText supports rich text formatting:

// Rich text formatting
mtext.contents = '{\\fArial|b1;Bold text}\\PNormal text';

Common format codes:

Code	Description
\\P	Line break
\\fFontName;	Switch font
\\fFontName|b1;	Bold
\\fFontName|i1;	Italic
\\Hheight;	Set height
\\Ccolor;	Set color
\\U+XXXX	Unicode character

Text Styles

Text styles define the font and default properties for text.

TextStyle Properties

Property	Type	Description
name	string	Style name
fontFileName	string	Font file name (corresponds to the name in MainView fonts configuration)
bigFontFileName	string	Big font file name (used for SHX to handle CJK characters)
fixedHeight	number	Fixed height (0 means not fixed)
widthFactor	number	Width factor
obliqueAngle	number	Oblique angle (degrees)
isVertical	boolean	Whether vertical
isBackwards	boolean	Whether backwards
isUpsideDown	boolean	Whether upside down

Using Text Styles

There are two ways to use fonts and text styles:

Method 1: Use Font Name Directly (Recommended, Simple and Quick)

MainView automatically creates a TextStyle with the same name for each configured font, so you can directly use the font name as styleName without manually creating a TextStyle.

import { Engine, TextEnt, MTextEnt } from 'vjcad';

// Single-line text - use font name directly
const text = new TextEnt();
text.insertionPoint = [0, 100];
text.text = "Using Kaiti font";
text.height = 10;
text.styleName = "simkai";  // Use font name directly, no need to create TextStyle manually
text.setDefaults();

// Multi-line text - use SHX font
const mtext = new MTextEnt();
mtext.insertionPoint = [0, 50];
mtext.text = "SHX Font Text";
mtext.height = 8;
mtext.styleName = "_default";  // Use font name directly
mtext.setDefaults();

Engine.addEntities([text, mtext]);

Auto-Created TextStyles

After fonts are loaded, MainView automatically creates a TextStyle with the same name for each configured font. For example:

• A font configured with { name: "simkai", ... } will automatically create a TextStyle named "simkai"
• A font configured with { name: "_default", ... } will automatically create a TextStyle named "_default"

Method 2: Manually Create Custom TextStyle (For Advanced Settings)

When you need to customize style properties (such as widthFactor, obliqueAngle), create a TextStyle manually.

import { Engine, TextStyle, TextEnt, MTextEnt } from 'vjcad';

// Create custom text style
const kaitiStyle = new TextStyle();
kaitiStyle.name = "KaitiStyle";              // Custom style name
kaitiStyle.fontFileName = "simkai";          // Corresponds to the name in MainView fonts configuration
kaitiStyle.widthFactor = 1.5;                // Width factor 1.5
kaitiStyle.obliqueAngle = 15;                // Oblique 15 degrees

// Add to document
Engine.currentDoc.textStyles.add(kaitiStyle);

// Single-line text using custom style
const text = new TextEnt();
text.insertionPoint = [0, 100];
text.text = "Using Kaiti style";
text.height = 10;
text.styleName = "KaitiStyle";  // Use custom style name
text.setDefaults();

// Multi-line text using custom style
const mtext = new MTextEnt();
mtext.insertionPoint = [0, 50];
mtext.text = "Multi-line text\nUsing Kaiti style";
mtext.height = 8;
mtext.styleName = "KaitiStyle";  // Use custom style name
mtext.setDefaults();

Engine.addEntities([text, mtext]);

Font Configuration

Fonts need to be configured during MainView initialization:

import { MainView, initCadContainer } from 'vjcad';

const cadView = new MainView({
  appname: "WebCAD",
  version: "v1.0.0",
  serviceUrl: env.serviceUrl,
  accessToken: env.accessToken,
  fonts: [
    // TrueType font (woff/ttf/otf)
    { 
      path: "./fonts/simkai.woff",
      name: "simkai",              // Font name (also the auto-created TextStyle name)
      kind: "woff"
    },
    // SHX font (AutoCAD shape font)
    { 
      path: "./fonts/_default.shx",
      name: "_default",            // Font name (also the auto-created TextStyle name)
      kind: "shx"
    }
  ]
});

initCadContainer("map", cadView);
await cadView.onLoad();

// After fonts are loaded, you can use font names directly as styleName
const text = new TextEnt();
text.styleName = "simkai";     // Use TrueType font
text.styleName = "_default";   // Use SHX font

Font Type Notes

• TrueType fonts (woff/ttf/otf): Suitable for CJK display, visually appealing
• SHX fonts: AutoCAD compatible, high rendering efficiency, suitable for engineering drawings

Note

The name property in font configuration is very important:

1. It is the unique identifier for the font
2. MainView automatically creates a TextStyle with the same name for each font
3. You can directly use name as styleName in text entities

Getting Existing Styles

const doc = Engine.currentDoc;
const textStyles = doc.textStyles;

// Get text style
const style = textStyles.itemByName('Standard');

// Apply text style to text entity
text.styleName = 'Standard';

Next Steps

• Blocks and Inserts - Block, Insert
• Custom Entities - Creating custom entities
• Layer Management - Layer operations