Skip to main content

Hatch Patterns

About 4 min

Hatch Patterns

A complete guide to using hatch entities (HatchEnt), including built-in patterns, custom patterns, and boundary creation.

Overview

WebCAD includes 80+ built-in hatch patterns, covering ANSI, ISO, JIS standards and various material patterns.

Basic Usage

Creating a Hatch

const { HatchEnt, PolylineEnt, Engine, Edge, Edges, EdgeType } = vjcad;

// 1. Create closed boundary
const boundary = new PolylineEnt();
boundary.addVertex([0, 0]);
boundary.addVertex([100, 0]);
boundary.addVertex([100, 60]);
boundary.addVertex([0, 60]);
boundary.isClosed = true;
boundary.setDefaults();

// 2. Create hatch entity
const hatch = new HatchEnt();
hatch.patternName = "SOLID";  // Pattern name
hatch.patternScale = 1;       // Pattern scale

// 3. Create boundary from polyline
const edge = new Edge();
edge.edgeType = EdgeType.Polyline;
edge.bulgePoints = boundary.bulgePoints.clone();

const edges = new Edges();
edges.add(edge);

// 4. Set boundary
hatch.setLoops(edges);
hatch.setDefaults();
hatch.color = 3;  // Green

// 5. Add to canvas
Engine.addEntities([boundary, hatch]);
Engine.zoomExtents();

Hatch Properties

PropertyDescription
patternNamePattern name (e.g. "SOLID", "ANSI31")
patternScalePattern scale (default 1)
patternAnglePattern angle (degrees)
colorFill color

Built-in Patterns

Get All Pattern Names

const patternManager = Engine.patternManager;
const allPatternNames = patternManager.getAllPatternNames();
console.log(`Total ${allPatternNames.length} hatch patterns`);

Solid Fill

PatternDescription
SOLIDSolid fill

ANSI Patterns (American Standard)

PatternDescription
ANSI31Iron, brick and stone (45° diagonal)
ANSI32Steel
ANSI33Bronze, brass and copper
ANSI34Plastic and rubber
ANSI35Fire brick and refractory material
ANSI36Marble, slate and glass
ANSI37Lead, zinc, magnesium and insulation (cross diagonal)
ANSI38Aluminum

AR Patterns (Architectural)

PatternDescription
AR-B8168x16 block brick running bond
AR-B816C8x16 block brick running bond (with mortar joints)
AR-B888x8 block brick running bond
AR-BRELMStandard brick English bond
AR-BRSTDStandard brick running bond
AR-CONCRandom dots and stone pattern (concrete)
AR-HBONEHerringbone pattern
AR-PARQ1Parquet flooring pattern
AR-RROOFRoof shingle pattern
AR-RSHKERoof wood shake pattern
AR-SANDRandom dot pattern (sand)

ISO Patterns (International Standard)

PatternDescription
ACAD_ISO02W100Dashed line
ACAD_ISO03W100Dash space line
ACAD_ISO04W100Long dash dot line
ACAD_ISO05W100Long dash double dot line
ACAD_ISO06W100Long dash triple dot line
ACAD_ISO07W100Dot line
ACAD_ISO08W100Long dash short dash line
ACAD_ISO09W100Long dash double short dash line
ACAD_ISO10W100Dash dot line
ACAD_ISO11W100Double dash dot line
ACAD_ISO12W100Dash double dot line
ACAD_ISO13W100Double dash double dot line
ACAD_ISO14W100Dash triple dot line
ACAD_ISO15W100Double dash triple dot line

JIS Patterns

PatternDescription
JIS_LC_8LC pattern (@8)
JIS_LC_8ALC pattern (@8 variant)
JIS_LC_20LC pattern (@20)
JIS_LC_20ALC pattern (@20 variant)
JIS_RC_10RC pattern (@10)
JIS_RC_15RC pattern (@15)
JIS_RC_18RC pattern (@18)
JIS_RC_30RC pattern (@30)
JIS_STN_1EStone pattern (@1)
JIS_STN_2.5Stone pattern (@2.5)
JIS_WOODWood pattern

Material Patterns

PatternDescription
ANGLEAngle steel
BOXBox steel
BRASSBrass
BRICKBrick
BRSTONEBrick and stone
CLAYClay
CORKCork
CROSSCross shape
DASHDashed
DOLMITGeological
DOTSDots
EARTHEarth
ESCHEREscher pattern
FLEXFlexible material
GRASSGrass
GRATEGrate
GRAVELGravel
HEXHexagon
HONEYHoneycomb
HOUNDHoundstooth
INSULInsulation
LINEParallel horizontal lines
MUDSTMudstone
NETHorizontal/vertical grid
NET3Net 0-60-120
PLASTPlastic
PLASTIPlastic (variant)
SACNCRConcrete
SQUARESmall squares
STARSSix-pointed stars
STEELSteel
SWAMPSwamp
TRANSHeat transfer material
TRIANGEquilateral triangles
ZIGZAGZigzag
GOST_GLASSGlass (GOST)
GOST_WOODWood (GOST)
GOST_GROUNDGround (GOST)

Boundary Types

Polyline Boundary

const boundary = new PolylineEnt();
boundary.setPoints([[0, 0], [60, 0], [60, 50], [30, 70], [0, 50]]);
boundary.isClosed = true;
boundary.setDefaults();

const edges = new Edges();
const edge = new Edge();
edge.edgeType = EdgeType.Polyline;
edge.bulgePoints = boundary.bulgePoints.clone();
edges.add(edge);

hatch.setLoops(edges);

Circle Boundary

const { CircleEnt } = vjcad;

const circle = new CircleEnt([100, 50], 30);
circle.setDefaults();

const edges = new Edges();
const edge = new Edge();
edge.edgeType = EdgeType.Circle;
edge.center = circle.center.clone();
edge.radius = circle.radius;
edges.add(edge);

hatch.setLoops(edges);

Hatch with Hole (Outer Boundary + Inner Boundary)

// Outer boundary (rectangle)
const outerRect = new PolylineEnt();
outerRect.setPoints([[0, 0], [100, 0], [100, 80], [0, 80]]);
outerRect.isClosed = true;
outerRect.setDefaults();

// Inner boundary (circular hole)
const innerCircle = new CircleEnt([50, 40], 20);
innerCircle.setDefaults();

// Create Edges (outer boundary + inner boundary)
const allEdges = new Edges();

// Outer boundary
const outerEdge = new Edge();
outerEdge.edgeType = EdgeType.Polyline;
outerEdge.bulgePoints = outerRect.bulgePoints.clone();
allEdges.add(outerEdge);

// Inner boundary (hole)
const innerEdge = new Edge();
innerEdge.edgeType = EdgeType.Circle;
innerEdge.center = innerCircle.center.clone();
innerEdge.radius = innerCircle.radius;
allEdges.add(innerEdge);

// Set boundaries
hatch.setLoops(allEdges);

Pattern Scale

Auto-Calculate Scale

const { calculateHatchPatternScale } = vjcad;

// Calculate boundary size
const bbox = boundary.boundingBox();
const boundsSize = Math.max(bbox.maxX - bbox.minX, bbox.maxY - bbox.minY);

// Get pattern definition
const patternDef = Engine.patternManager.getPattern(patternName);

// Auto-calculate appropriate scale
const autoScale = calculateHatchPatternScale(boundsSize, patternName, patternDef);

hatch.patternScale = autoScale;

Manual Scale Setting

hatch.patternScale = 2;   // Scale up 2x
hatch.patternScale = 0.5; // Scale down to half

Custom Patterns

PAT Format Description

*PatternName,PatternDescription
angle,xOrigin,yOrigin,deltaX,deltaY[,linetype definition...]
  • angle: Line drawing direction (degrees), 0=horizontal right, 90=vertical up
  • xOrigin/yOrigin: Starting point coordinates of the first line
  • deltaX: Offset along the line direction
  • deltaY: Offset perpendicular to the line direction (row spacing)
  • linetype definition: Optional dash pattern (positive=solid, negative=gap, 0=dot)

Register Custom Pattern

// PAT format string
const patString = `*MY_PATTERN,My custom pattern
45,0,0,0,5
135,0,0,0,5`;

// Parse PAT format
function parsePatternString(patString) {
    const lines = patString.trim().split('\n');
    const headerMatch = lines[0].match(/^\*([^,]+),(.*)$/);
    
    const name = headerMatch[1].trim();
    const description = headerMatch[2].trim();
    
    const patternLines = [];
    for (let i = 1; i < lines.length; i++) {
        const line = lines[i].trim();
        if (!line || line.startsWith(';')) continue;
        
        const parts = line.split(',').map(p => parseFloat(p.trim()));
        patternLines.push({
            angle: parts[0],
            xOrigin: parts[1],
            yOrigin: parts[2],
            deltaX: parts[3],
            deltaY: parts[4],
            dashes: parts.slice(5)
        });
    }
    
    return { name, description, lines: patternLines };
}

// Register pattern
const patternDef = parsePatternString(patString);
Engine.patternManager.registerPattern(patternDef, "custom");

PatternManager API

Get Manager

const patternManager = Engine.patternManager;

Common Methods

// Get all pattern names
const allNames = patternManager.getAllPatternNames();
const categoryNames = patternManager.getAllPatternNames("builtin");

// Get pattern definition
const patternDef = patternManager.getPattern("ANSI31");
console.log(patternDef.name);
console.log(patternDef.description);
console.log(patternDef.lines);  // Line definition array

// Check if pattern exists
const exists = patternManager.hasPattern("MY_PATTERN");

// Register custom pattern
patternManager.registerPattern(definition, "custom");

// Get categories
const categories = patternManager.getCategories();

// Get statistics
const stats = patternManager.getStatistics();

Complete Example: Pattern Table

const { 
    HatchEnt, PolylineEnt, TextEnt, 
    Engine, Edge, Edges, EdgeType 
} = vjcad;

const patternManager = Engine.patternManager;
const allPatternNames = patternManager.getAllPatternNames();

const COLS = 6;
const CELL_WIDTH = 80;
const CELL_HEIGHT = 60;
const PADDING = 10;

function createEdgesFromPolyline(polyline) {
    const edges = new Edges();
    const edge = new Edge();
    edge.edgeType = EdgeType.Polyline;
    edge.bulgePoints = polyline.bulgePoints.clone();
    edges.add(edge);
    return edges;
}

const allEntities = [];

allPatternNames.forEach((patternName, i) => {
    const col = i % COLS;
    const row = Math.floor(i / COLS);
    const x = col * (CELL_WIDTH + PADDING);
    const y = -row * (CELL_HEIGHT + PADDING + 20);
    
    // Boundary
    const boundary = new PolylineEnt();
    boundary.addVertex([x, y]);
    boundary.addVertex([x + CELL_WIDTH, y]);
    boundary.addVertex([x + CELL_WIDTH, y + CELL_HEIGHT]);
    boundary.addVertex([x, y + CELL_HEIGHT]);
    boundary.isClosed = true;
    boundary.setDefaults();
    allEntities.push(boundary);
    
    // Hatch
    const hatch = new HatchEnt();
    hatch.patternName = patternName;
    hatch.patternScale = patternName === "SOLID" ? 1 : 5;
    hatch.setLoops(createEdgesFromPolyline(boundary));
    hatch.setDefaults();
    hatch.color = patternName === "SOLID" ? 3 : 2;
    allEntities.push(hatch);
    
    // Label
    const label = new TextEnt();
    label.insertionPoint = [x, y - 8];
    label.text = patternName;
    label.height = 5;
    label.setDefaults();
    allEntities.push(label);
});

Engine.addEntities(allEntities);
Engine.zoomExtents();

Command Method

// HATCH command: select boundary and fill
await Engine.editor.executerWithOp('HATCH');

// HATCHEDIT command: edit existing hatch
await Engine.editor.executerWithOp('HATCHEDIT');