跳至主要內容

预览视图组件

大约 4 分钟

预览视图组件

PreviewView 是一个轻量级的 CAD 实体预览组件，用于在对话框或侧边栏中独立显示实体，不影响主视图。

特性

  • 独立渲染：拥有独立的 PixiJS 应用和渲染上下文，不影响主视图
  • 完整支持：支持所有 CAD 实体类型，包括填充、线型、字体等
  • 交互操作：支持滚轮缩放、中键平移、中键双击全图显示
  • 两种模式：简单实体添加（addEntity）和完整文档加载（loadDocument）

基本使用

引入组件

import { PreviewView, LineEnt, CircleEnt, Point2D } from 'vjcad';

创建预览视图

// 创建预览视图实例
const preview = new PreviewView({
    backgroundColor: 0x1a242e,  // 背景色
    interactive: true,          // 启用交互
    defaultColor: 0x00ff00      // 默认绘制颜色（绿色）
});

// 添加到容器
document.getElementById('preview-container').appendChild(preview);

// 等待初始化完成
await preview.onLoad();

添加实体预览

// 创建实体
const line = new LineEnt(new Point2D(0, 0), new Point2D(100, 0));
const circle = new CircleEnt(new Point2D(50, 50), 30);

// 添加到预览（可指定颜色）
preview.addEntity(line);              // 使用默认颜色
preview.addEntity(circle, 0xff0000);  // 红色

// 全图显示
preview.zoomExtents();

从文档数据加载

// 文档数据格式
const dbDocument = {
    dbBlocks: [{
        blockId: 1,
        name: "*Model",
        lookPt: [0, 0],
        zoom: 1,
        items: [
            { type: "LINE", startPoint: [0, 0], endPoint: [100, 0], color: 1 },
            { type: "CIRCLE", center: [50, 50], radius: 30, color: 2 }
        ]
    }],
    dbLayers: [
        { id: 0, name: "0", color: 7 },
        { id: 1, name: "图层1", color: 1 }
    ]
};

// 加载文档数据
await preview.loadDocument(dbDocument, "*Model");

完整示例

在对话框中使用

import { PreviewView, LineEnt, CircleEnt, ArcEnt, Point2D } from 'vjcad';

// 创建对话框容器
const dialog = document.createElement('div');
dialog.style.cssText = `
    position: fixed;
    top: 50px;
    right: 20px;
    width: 300px;
    height: 250px;
    background: #2d3748;
    border: 1px solid #4a5568;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 1000;
    overflow: hidden;
`;

// 创建标题栏
const title = document.createElement('div');
title.textContent = '实体预览';
title.style.cssText = `
    padding: 8px 12px;
    background: #1a202c;
    color: white;
    font-size: 14px;
`;

// 创建预览容器
const previewContainer = document.createElement('div');
previewContainer.style.cssText = `
    width: 100%;
    height: calc(100% - 32px);
`;

dialog.appendChild(title);
dialog.appendChild(previewContainer);
document.body.appendChild(dialog);

// 创建预览视图
const preview = new PreviewView({
    backgroundColor: 0x1a242e,
    interactive: true,
    defaultColor: 0x00ff00
});
previewContainer.appendChild(preview);

// 等待初始化
await preview.onLoad();

// 添加实体
const line = new LineEnt(new Point2D(0, 0), new Point2D(80, 0));
const circle = new CircleEnt(new Point2D(40, 30), 20);
const arc = new ArcEnt(new Point2D(60, 0), 15, 0, Math.PI / 2);

preview.addEntity(line);
preview.addEntity(circle, 0xff0000);
preview.addEntity(arc, 0x00ffff);

// 全图显示
preview.zoomExtents();

// 关闭对话框时清理
function closeDialog() {
    dialog.remove();
}

加载现有文档数据

import { PreviewView } from 'vjcad';

const preview = new PreviewView();
container.appendChild(preview);
await preview.onLoad();

// 完整文档数据
const dbDocument = {
    dbBlocks: [{
        blockId: 1,
        name: "*Model",
        lookPt: [0, 0],
        zoom: 1,
        items: [
            // 矩形框
            { type: "LINE", startPoint: [0, 0], endPoint: [100, 0], color: 1, layerId: 0 },
            { type: "LINE", startPoint: [100, 0], endPoint: [100, 80], color: 1, layerId: 0 },
            { type: "LINE", startPoint: [100, 80], endPoint: [0, 80], color: 1, layerId: 0 },
            { type: "LINE", startPoint: [0, 80], endPoint: [0, 0], color: 1, layerId: 0 },
            // 内部圆
            { type: "CIRCLE", center: [50, 40], radius: 25, color: 3, layerId: 1 },
            // 对角线
            { type: "LINE", startPoint: [0, 0], endPoint: [100, 80], color: 2, layerId: 1 },
            { type: "LINE", startPoint: [100, 0], endPoint: [0, 80], color: 2, layerId: 1 }
        ]
    }],
    dbLayers: [
        { id: 0, name: "0", color: 7, lineType: "Continuous" },
        { id: 1, name: "构造线", color: 1, lineType: "Continuous" }
    ],
    dbTextStyles: [
        { name: "Standard", fontFamily: "Arial", height: 2.5 }
    ]
};

// 加载并显示
await preview.loadDocument(dbDocument, "*Model");

API 参考

构造函数

new PreviewView(config?: PreviewViewConfig)

PreviewViewConfig

属性类型默认值说明
backgroundColornumber0x1a242e背景色（十六进制）
interactivebooleantrue是否启用交互（缩放/平移）
defaultColornumber0xffffff默认绘制颜色

方法

方法参数返回值说明
onLoad()-Promise<void>等待组件初始化完成
addEntity(entity, color?)EntityBase, number?void添加单个实体（简化渲染）
addEntities(entities, color?)EntityBase[], number?void批量添加实体
loadDocument(dbDocument, blockName?)any, string?Promise<void>从文档数据加载（完整渲染）
clear()-void清空所有实体
zoomExtents()-void全图显示
setView(center, zoom)Point2D, numbervoid设置视图中心和缩放

属性

属性类型说明
zoomnumber当前缩放比例（只读）
viewCenterPoint2D当前视图中心（只读）
documentCadDocument | null已加载的文档（loadDocument 后可用）

交互操作

操作效果
滚轮上下缩放视图
中键拖动平移视图
中键双击全图显示

两种渲染模式

addEntity 模式（简化渲染）

  • 适用于快速预览少量实体
  • 使用固定颜色绘制，不依赖图层
  • 不支持复杂属性（线型、填充等）
preview.addEntity(line, 0xff0000);  // 指定颜色

loadDocument 模式（完整渲染）

  • 适用于预览完整文档数据
  • 支持图层颜色、线型、填充、文本样式等
  • 使用 EntityRenderer 完整渲染逻辑
  • 临时切换 Engine.activeDocument，渲染完成后恢复
await preview.loadDocument(dbDocument, "*Model");

注意事项

  1. 初始化等待：使用 await preview.onLoad() 确保组件完全初始化后再添加实体

  2. 资源清理：组件从 DOM 移除时会自动清理资源，无需手动处理

  3. 独立性：PreviewView 与主视图完全独立，不会影响 Engine.currentDoc 或主视图状态

  4. 容器尺寸：确保父容器有明确的宽高，否则预览区域可能显示异常

下一步