Introduction
About 3 min
Introduction
WebCAD Overview
WebCAD is a professional-grade web-based CAD engine built with TypeScript, providing complete 2D CAD drawing capabilities. It features a modern architecture design with high-performance rendering, a comprehensive plugin system, and rich API interfaces, suitable for various web applications that require precise drawing and CAD functionality.
Core Capability Comparison
| Capability | WebCAD | Traditional Desktop CAD | Other Web CAD |
|---|---|---|---|
| Deployment | Runs directly in browser | Requires client installation | Runs in browser |
| DWG Compatible | Full read/write support | Native support | Partial support |
| Development | TypeScript/JavaScript | AutoLISP/.NET | Varies |
| Plugin System | Complete lifecycle management | Mature | Limited |
| Entity Types | Rich (20+ types) | Complete | Basic |
| Performance | GPU-accelerated rendering | Native performance | Average |
| Cross-Platform | All platform browsers | Primarily Windows | All platforms |
| Collaboration | Native support | Requires plugins | Partial support |
| Offline Use | PWA support | Full support | Partial support |
Key Features
Vector Graphics Engine
WebCAD employs a high-performance vector graphics rendering engine that provides:
- GPU-Accelerated Rendering: Utilizes WebGL technology for smooth graphics display
- Adaptive Detail: Automatically adjusts rendering precision based on zoom level
- Large Drawing Support: Optimized rendering strategy supporting millions of entities
- Precise Geometry: Supports high-precision coordinate and geometric calculations
Supported entity types:
| Entity Type | Class Name | Description |
|---|---|---|
| Line | LineEnt | Line segment defined by two points |
| Circle | CircleEnt | Circle defined by center and radius |
| Arc | ArcEnt | Arc segment, supports multiple creation methods |
| Polyline | PolylineEnt | Combination of continuous line and arc segments |
| Ellipse | EllipseEnt | Ellipse and elliptical arc |
| Spline | SplineEnt | Smooth free-form curve |
| Dot | DotEnt | Point marker |
| Hatch | HatchEnt | Pattern fill and solid fill |
| Text | TextEnt | Single-line text annotation |
| MText | MTextEnt | Multi-line formatted text |
| Insert | InsertEnt | Instance of a block definition |
| Image | ImageRefEnt | External image reference |
| Custom Entity | CustomEntityBase | User-defined entity types |
DWG Compatibility
WebCAD provides full compatibility with AutoCAD DWG format:
- Read DWG/DXF: Supports multiple versions of DWG and DXF file formats
- Write DWG/DXF: Saves drawings in standard formats
- Entity Property Compatibility: Color, layer, linetype, lineweight and other properties are fully preserved
- Blocks and External References: Supports block definitions and external references
- Text Styles: Supports TrueType and SHX fonts
Plugin System
A comprehensive plugin system supports feature extensions:
- Lifecycle Management: Complete lifecycle including load, activate, deactivate, and unload
- Command Registration: Register custom commands within plugins
- UI Extensions: Add Ribbon menus, toolbar buttons
- Event Listening: Respond to system events
- Plugin Dependencies: Declare and manage inter-plugin dependencies
Event-Driven Architecture
An event-based architecture provides flexible extensibility:
- Before/After Event Pairs: Cancel before execution, respond after execution
- Rich Event Types: Document, entity, command, view and many more event categories
- Event Parameters: Each event carries detailed context information
- Cancel Mechanism: Before events support canceling subsequent operations
Undo/Redo System
Complete undo/redo functionality:
- Operation History: Records all undoable operations
- Batch Operations: Multiple operations can be merged into a single undo step
- Entity State: Automatically saves entity state before modification
- Command Integration: Command execution automatically integrates undo support
Coordinate System
Supports multiple coordinate systems:
- WCS (World Coordinate System): Absolute coordinate reference system
- UCS (User Coordinate System): Customizable working coordinate system
- DCS (Display Coordinate System): Screen display coordinate system
Technical Architecture Overview
Tech Stack
| Technology | Purpose | Description |
|---|---|---|
| TypeScript | Core development language | Type-safe with excellent developer experience |
| WebGL | Graphics rendering | GPU-accelerated 2D rendering |
| WebAssembly | Geometry calculations | High-performance geometric computations |
| Lit | UI components | Lightweight Web Components |
Use Cases
Engineering Design
- Mechanical Drawings: Supports precise engineering drafting
- Architectural Floor Plans: Floor layouts, structural drawings
- Electrical Schematics: Circuit design and wiring diagrams
Online Collaboration
- Drawing Review: Multi-user online viewing and annotation
- Version Management: Drawing version tracking and comparison
- Real-time Collaboration: Multiple users editing simultaneously
Industry Applications
- Surveying & GIS: Map annotation and measurement
- Interior Design: Floor plans and renovation design
- Process Flows: Flowcharts and process design
- Pipeline Design: Pipeline network layout design
Integration & Embedding
- Business System Integration: Embed as a component in business systems
- Document Management: Integration with document management systems
- IoT Visualization: Device layout and monitoring
Browser Support
| Browser | Minimum Version | Recommended Version |
|---|---|---|
| Chrome | 80+ | Latest |
| Firefox | 75+ | Latest |
| Edge | 80+ | Latest |
| Safari | 13+ | Latest |
Performance Tip
For best performance, use the latest version of Chrome or Edge and ensure hardware acceleration is enabled.
Next Steps
- Quick Start - Get started with WebCAD
- Architecture Overview - Learn about the system architecture
- Engine System - Dive into the core API