Line Entity (LineEnt)

About 5 min

Line Entity (LineEnt)

LineEnt is one of the most basic geometric entities in WebCAD, representing a line segment defined by a start point and an end point.

Online Examples

Example	Description	Link
Create Line	Basic LineEnt creation example	Online Demo{target="_blank"}
Line Properties	Get line length, angle, start/end points	Online Demo{target="_blank"}
Line Transform	Move, rotate, scale, mirror, stretch operations	Online Demo{target="_blank"}
Color Settings	Create lines with index color and RGB true color	Online Demo{target="_blank"}

Lines are the most fundamental drawing elements in CAD, used for drawing boundaries, outlines, construction lines, etc. LineEnt inherits from EntityBase and provides a rich set of geometric operation methods.

3D Coordinate Support

The Z coordinate of a line is stored in the Point2D.z property. Access and modify Z values via startPoint.z and endPoint.z, or use the startPointZ / endPointZ convenience properties.

Constructor

import { LineEnt, Point2D } from 'vjcad';

// Shorthand syntax (recommended)
const line1 = new LineEnt([0, 0], [100, 100]);

// Point2D syntax
const line2 = new LineEnt(
  new Point2D(0, 0),
  new Point2D(100, 100)
);

// Constructor with color
const line3 = new LineEnt([0, 0], [100, 0], 1);  // Color index (1=red)

// 3D line with Z coordinates
const line4 = new LineEnt([0, 0, 0], [100, 100, 50]);

// Default constructor (start at origin, end at (1,0))
const line5 = new LineEnt();

Shorthand Syntax

The constructor supports [x, y] or [x, y, z] array format for point coordinates, so you don't need to write new Point2D(...) every time.

Properties

Geometric Properties

Property	Type	Access	Description
`startPoint`	Point2D	Read/Write	Start point coordinates of the line (with optional z)
`endPoint`	Point2D	Read/Write	End point coordinates of the line (with optional z)
`startPointZ`	number	Read/Write	Convenience property for start point Z coordinate (equivalent to `startPoint.z`)
`endPointZ`	number	Read/Write	Convenience property for end point Z coordinate (equivalent to `endPoint.z`)

Computed Properties (Read-only)

Property	Type	Description
`Length`	number	Line length
`length`	number	Line length (lowercase alias for `Length`)
`angle`	number	Line angle (radians, 0-2π)
`midPoint`	Point2D	Midpoint of the line

import { LineEnt, Point2D } from 'vjcad';

const line = new LineEnt(new Point2D(0, 0), new Point2D(100, 100));

// Get geometric properties
console.log('Start point:', line.startPoint);        // Point2D(0, 0)
console.log('End point:', line.endPoint);          // Point2D(100, 100)
console.log('Length:', line.Length);            // 141.42...
console.log('Angle (radians):', line.angle);       // 0.785... (45°)
console.log('Angle (degrees):', line.angle * 180 / Math.PI);  // 45
console.log('Midpoint:', line.midPoint);          // Point2D(50, 50)

// Modify geometric properties
line.startPoint = new Point2D(10, 10);
line.endPoint.x = 200;  // You can directly modify coordinate components
line.endPoint.y = 200;

import { LineEnt, Point2D } from 'vjcad';

const line = new LineEnt([0, 0], [100, 100]);

// Shorthand syntax (recommended)
line.move([0, 0], [50, 50]);  // Translate the entire line by (50, 50)

console.log(line.startPoint);  // Point2D(50, 50)
console.log(line.endPoint);    // Point2D(150, 150)

rotate() - Rotate

import { LineEnt, Point2D } from 'vjcad';

const line = new LineEnt([0, 0], [100, 0]);

// Shorthand syntax (recommended)
line.rotate([0, 0], Math.PI / 2);  // Rotate 90 degrees around the origin

console.log(line.startPoint);  // Point2D(0, 0)
console.log(line.endPoint);    // Point2D(0, 100)

// Rotate 45 degrees around the midpoint
const midPoint = line.midPoint;
line.rotate(midPoint, Math.PI / 4);

scale() - Scale

import { LineEnt, Point2D } from 'vjcad';

const line = new LineEnt([0, 0], [100, 0]);

// Shorthand syntax (recommended)
line.scale([0, 0], 2);  // Scale up by 2x from the origin

console.log(line.Length);  // 200

// Scale down by 50% from the midpoint
line.scale(line.midPoint, 0.5);

mirror() - Mirror

import { LineEnt, Point2D } from 'vjcad';

const line = new LineEnt([0, 0], [100, 100]);

// Shorthand syntax (recommended)
line.mirror([0, 0], [100, 0]);  // Mirror along X-axis (Y=0)

console.log(line.startPoint);  // Point2D(0, 0)
console.log(line.endPoint);    // Point2D(100, -100)

// Mirror along an arbitrary line
line.mirror([0, 0], [1, 1]);  // Mirror along the 45° line

Edit Operations

reversePoint() - Reverse Direction

import { LineEnt, Point2D } from 'vjcad';

const line = new LineEnt(new Point2D(0, 0), new Point2D(100, 100));

console.log('Angle before reverse:', line.angle * 180 / Math.PI);  // 45°

line.reversePoint();  // Swap start and end points

console.log('Angle after reverse:', line.angle * 180 / Math.PI);  // 225°

trimFrontAtDist() - Trim from Start

import { LineEnt, Point2D } from 'vjcad';

const line = new LineEnt(new Point2D(0, 0), new Point2D(100, 0));
console.log('Original length:', line.Length);  // 100

// Trim 30 units from the start
line.trimFrontAtDist(30);

console.log('Start point after trim:', line.startPoint);  // Point2D(30, 0)
console.log('Length after trim:', line.Length);      // 70

trimBackAtDist() - Trim from End

import { LineEnt, Point2D } from 'vjcad';

const line = new LineEnt(new Point2D(0, 0), new Point2D(100, 0));

// Trim 20 units from the end
line.trimBackAtDist(20);

console.log('End point after trim:', line.endPoint);  // Point2D(80, 0)
console.log('Length after trim:', line.Length);    // 80

Grip Editing

The gripEdit() method handles grip point drag editing.

import { LineEnt, Point2D } from 'vjcad';

const line = new LineEnt(new Point2D(0, 0), new Point2D(100, 100));

// Grip types: "start" | "end" | "mid"

// Move start grip point
line.gripEdit(new Point2D(10, 10), "start");
console.log(line.startPoint);  // Point2D(10, 10)

// Move end grip point
line.gripEdit(new Point2D(200, 200), "end");
console.log(line.endPoint);    // Point2D(200, 200)

// Move mid grip point (translates the entire line)
line.gripEdit(new Point2D(150, 150), "mid");
// The entire line is translated, preserving length and angle

Bounding Box

import { LineEnt, Point2D, CoordinateSystemType } from 'vjcad';

const line = new LineEnt(new Point2D(0, 0), new Point2D(100, 100));

// Get WCS bounding box (default)
const wcsBBox = line.boundingBox();
console.log('Min point:', wcsBBox.pt1);  // Point2D(0, 0)
console.log('Max point:', wcsBBox.pt2);  // Point2D(100, 100)

// Get DCS bounding box (screen coordinates)
const dcsBBox = line.boundingBox(CoordinateSystemType.DCS);

Clone

import { LineEnt, Point2D } from 'vjcad';

const line = new LineEnt(new Point2D(0, 0), new Point2D(100, 100));
line.setDefaults();
line.color = 1;

// Create a deep copy
const lineCopy = line.clone();

// Modifying the copy does not affect the original entity
lineCopy.color = 3;
lineCopy.move([0, 0], [50, 0]);

console.log(line.color);       // 1
console.log(lineCopy.color);   // 3

Serialization

import { LineEnt, Point2D } from 'vjcad';

const line = new LineEnt(new Point2D(0, 0), new Point2D(100, 100));
line.setDefaults();

// Export to database format (2D line)
const dbData = line.toDb();
console.log(dbData);
// {
//   type: "LINE",
//   layerId: "0",
//   color: 256,
//   startPoint: [0, 0],
//   endPoint: [100, 100]
// }

// Line with Z coordinates
line.startPoint.z = 10;
line.endPoint.z = 20;
const dbData3d = line.toDb();
console.log(dbData3d);
// {
//   type: "LINE",
//   startPoint: [0, 0, 10],
//   endPoint: [100, 100, 20]
//   ...
// }

// Restore from database format
const newLine = new LineEnt();
newLine.fromDb(dbData);

Complete Examples

Drawing a Crosshair

import { Engine, LineEnt, Point2D } from 'vjcad';

function drawCrossHair(center: Point2D, size: number) {
  const halfSize = size / 2;
  
  // Horizontal line
  const hLine = new LineEnt(
    new Point2D(center.x - halfSize, center.y),
    new Point2D(center.x + halfSize, center.y)
  );
  
  // Vertical line
  const vLine = new LineEnt(
    new Point2D(center.x, center.y - halfSize),
    new Point2D(center.x, center.y + halfSize)
  );
  
  hLine.setDefaults();
  vLine.setDefaults();
  hLine.color = 1;  // Red
  vLine.color = 1;
  
  Engine.addEntities([hLine, vLine]);
}

drawCrossHair(new Point2D(100, 100), 50);

Drawing a Regular Polygon

import { Engine, LineEnt, Point2D } from 'vjcad';

function drawPolygon(center: Point2D, radius: number, sides: number) {
  const lines: LineEnt[] = [];
  const angleStep = (2 * Math.PI) / sides;
  
  for (let i = 0; i < sides; i++) {
    const angle1 = i * angleStep;
    const angle2 = (i + 1) * angleStep;
    
    const p1 = new Point2D(
      center.x + radius * Math.cos(angle1),
      center.y + radius * Math.sin(angle1)
    );
    const p2 = new Point2D(
      center.x + radius * Math.cos(angle2),
      center.y + radius * Math.sin(angle2)
    );
    
    const line = new LineEnt(p1, p2);
    line.setDefaults();
    lines.push(line);
  }
  
  Engine.addEntities(lines);
}

// Draw a regular hexagon
drawPolygon(new Point2D(100, 100), 50, 6);

Interactive Line Drawing

import { 
  Engine, 
  LineEnt, 
  Point2D, 
  PointInputOptions, 
  InputStatusEnum 
} from 'vjcad';

async function drawLineCommand() {
  // Get start point
  const opt1 = new PointInputOptions("Specify start point:");
  const result1 = await Engine.getPoint(opt1);
  
  if (result1.status !== InputStatusEnum.OK) return;
  const startPoint = result1.value as Point2D;
  
  // Get end point (with rubber band line)
  const opt2 = new PointInputOptions("Specify end point:");
  opt2.basePoint = startPoint;
  opt2.useBasePoint = true;
  
  const result2 = await Engine.getPoint(opt2);
  
  if (result2.status !== InputStatusEnum.OK) return;
  const endPoint = result2.value as Point2D;
  
  // Create line
  const line = new LineEnt(startPoint, endPoint);
  line.setDefaults();
  
  // Add to canvas
  Engine.addEntities(line);
  
  // Output info
  Engine.writeMessage(`Line created, length: ${line.Length.toFixed(2)}`);
}

FAQ

Q: How to get the direction vector of a line?

const line = new LineEnt(new Point2D(0, 0), new Point2D(100, 100));

// Direction vector
const dx = line.endPoint.x - line.startPoint.x;
const dy = line.endPoint.y - line.startPoint.y;

// Unit direction vector
const length = line.Length;
const unitX = dx / length;
const unitY = dy / length;

console.log(`Direction vector: (${unitX.toFixed(3)}, ${unitY.toFixed(3)})`);

Q: How to check if a point is on a line?

import { LineEnt, Point2D } from 'vjcad';

function isPointOnLine(line: LineEnt, point: Point2D, tolerance: number = 0.001): boolean {
  const d1 = distance(line.startPoint, point);
  const d2 = distance(point, line.endPoint);
  const lineLength = line.Length;
  
  return Math.abs(d1 + d2 - lineLength) < tolerance;
}

function distance(p1: Point2D, p2: Point2D): number {
  const dx = p2.x - p1.x;
  const dy = p2.y - p1.y;
  return Math.sqrt(dx * dx + dy * dy);
}

Q: How to extend a line?

import { LineEnt, Point2D } from 'vjcad';

function extendLine(line: LineEnt, extensionLength: number, fromEnd: boolean = true) {
  const angle = line.angle;
  
  if (fromEnd) {
    // Extend from the end point
    line.endPoint = new Point2D(
      line.endPoint.x + extensionLength * Math.cos(angle),
      line.endPoint.y + extensionLength * Math.sin(angle)
    );
  } else {
    // Extend from the start point (reverse direction)
    line.startPoint = new Point2D(
      line.startPoint.x - extensionLength * Math.cos(angle),
      line.startPoint.y - extensionLength * Math.sin(angle)
    );
  }
}

Next Steps

Circle Entity (CircleEnt) - Detailed guide on circle entities
Arc Entity (ArcEnt) - Detailed guide on arc entities
Polyline Entity (PolylineEnt) - Detailed guide on polyline entities

Line Entity (LineEnt)

Line Entity (LineEnt)

Online Examples

Overview

Constructor

Properties

Geometric Properties

Computed Properties (Read-only)

Methods

Geometric Transforms

move() - Move

rotate() - Rotate

scale() - Scale

mirror() - Mirror

Edit Operations

reversePoint() - Reverse Direction

trimFrontAtDist() - Trim from Start

trimBackAtDist() - Trim from End

Grip Editing

Bounding Box

Clone

Serialization

Complete Examples

Drawing a Crosshair

Drawing a Regular Polygon

Interactive Line Drawing

FAQ

Q: How to get the direction vector of a line?

Q: How to check if a point is on a line?

Q: How to extend a line?

Next Steps