把 DWG 加载到浏览器后图层开关解决了“看哪些内容”的问题。下一步通常是回答“这个对象是什么”用户点击一条线、一个圆或一段文字业务页面需要知道它的类型、图层、范围和几何属性。上一期介绍了图层显示与隐藏。这一期继续使用 UDEUTUM Data Engine公开 Web 示例拆开实体点选流程浏览器怎样把鼠标位置换算成图纸坐标怎样从实体空间索引找到候选对象以及属性面板展示了哪些数据。先看效果点击一条梁线本次仍使用 典型项目-1层梁平法施工图.dwg。公开的 UDE DWG SDK v0.4.0 免费版读取这份 917,465 字节的图纸后页面显示 14,619 个实体、28 个图层和 39,263 条线。截图中点击的是一条位于 S-BEAM 图层的直线属性面板显示了实体编号、线型、长度和起终点坐标。这里的属性来自显示结果对应的实体数据不是根据屏幕颜色或图层名称猜出来的。属性面板中的范围、长度和端点坐标可以继续用于对象检索、工程量统计、问题标记或与业务台账关联。一、图形数据和实体数据各自负责什么Web 示例把一次 DWG 处理拆成两类结果DWG ├─ render.bin → 浏览器绘制线、填充、文字和图层 └─ entities.bin → 实体类型、编号、图层、范围和属性render.bin 适合快速绘图浏览器先用它完成画面。entities.bin 保存点选需要的结构化实体信息页面在加载完成后建立空间索引。这样点击对象时不必重新上传或重新解析 DWG。如果只需要纯显示可以只加载图形数据如果页面需要点选、属性查询或对象关联就要同时准备实体数据。两者的坐标空间必须保持一致实体范围才能和屏幕上的图形对应起来。二、鼠标位置怎样变成图纸坐标查看器先取得绘图画布相对于页面的偏移再使用当前缩放比例和视图偏移量换算世界坐标。示例中的核心逻辑如下functionworldPoint(event){constrectelements.drawing.getBoundingClientRect();constxevent.clientX-rect.left;constyevent.clientY-rect.top;return{screenX:x,screenY:y,x:(x-renderer.offsetX)/renderer.scale,y:-(y-renderer.offsetY)/renderer.scale,};}屏幕坐标的 Y 轴向下而工程图纸坐标通常向上所以示例在换算时反转了 Y。缩放或平移后renderer.scale、offsetX 和 offsetY 会随视图变化不能把一次点击得到的像素位置直接当成图纸坐标保存。三、怎样从点击位置找到实体坐标换算完成后查看器用实体空间索引查询点击位置附近的候选对象再按图层可见性过滤functionselectAt(event){if(!grid||!renderer)return;constpointworldPoint(event);consthitsgrid.queryRect(point.x,point.y,5/renderer.scale).filter((entity)!isEntitySpatiallyClipped(entity));selectedhits.find((entity)entity.type!blockRefrenderer.isLayerVisible(entity.layer))||hits.find((entity)renderer.isLayerVisible(entity.layer))||null;showProperties(selected);redrawHighlight();}查询半径使用 5 / renderer.scale意味着缩放级别变化时屏幕上大致相同的点击容差仍能对应到图纸空间。候选对象可能重叠因此示例优先选择可见且不是块引用的实体实际业务可以在这里增加类型优先级、图层过滤或“候选对象列表”。四、属性面板展示哪些信息选中对象后示例先展示通用字段再根据实体类型展示几何属性functionshowProperties(entity){if(!entity)return;propertyRow(图层,entity.layer);propertyRow(颜色,entity.color||随层);propertyRow(范围,formatBounds(entity.bbox));for(const[key,value]ofObject.entries(entity.properties)){propertyRow(propertyNames[key]||key,value);}}信息作用实体类型区分直线、圆、圆弧、多段线、文字、填充、块引用等实体编号在当前结果中定位对象适合与高亮、业务记录关联图层、颜色、线型还原显示上下文辅助筛选和工程分类范围 bbox判断对象位置、做视野定位和空间检索几何属性直线的长度与端点、圆的半径、文字的内容和高度等截图中的直线属性包含 S-BEAM 图层、DASHED 线型、长度以及起点和终点坐标。不同实体类型拥有不同属性集合页面不应把直线字段套用到圆、文字或填充上。五、点选只改变查看器状态这次点击做了三件事记录当前选中的实体、绘制高亮框、刷新属性面板。它没有修改原始 DWG也没有把图层开关或实体数据写回文件。如果业务需要保存用户标记可以保存实体编号、图纸任务编号和业务备注如果需要再次打开后恢复高亮应同时保存图纸版本或任务摘要避免把不同转换结果中的编号混在一起。若要修改实体并生成新的 DWG则需要进入 UDE 商业版的编辑和 DWG 写出流程不能把查看器中的选中状态当成写回操作。六、启动示例并复现公开免费版的单个原始 DWG 上限为 3,000,000 字节。准备 64 位 Python 3.11 和 Microsoft Visual C x64 Runtime 后在已经准备好的 UDE-SDK v0.4.0 示例目录中执行cd.\UDE-SDK.\examples\web\run.ps1-Language python-Port 8082-OrderedPreview打开http://127.0.0.1:8082/?ordered1上传 DWG 并等待转换完成。然后点击“适应”让整张图进入视野。放大到线、圆或文字比较集中的区域。在图形上单击一个对象观察高亮框和左侧属性面板。平移或缩放后再次点击确认坐标换算仍跟随当前视图。关闭对象所在图层确认不可见对象不会被选中重新打开后再点选。示例页面还提供“图层”面板前一期已经说明图层显隐的实现。实体点选使用的是同一份图纸结果中的 entities.bin不会因为切换图层而重新转换。七、源码入口与下一期实体点选相关代码位于公开仓库的 Web 查看器目录文件重点examples/web/webgl/ordered_viewer.mjs鼠标事件、坐标换算、候选实体查询和属性面板examples/web/webgl/ordered_entities.mjsCAD2ENT 实体数据解析与空间索引examples/web/webgl/ordered_geometry.mjs图形数据与图层信息读取下一期继续讲图纸文字缺失或显示不对时字体目录和替代字体怎样配置。本文对应 UDE DWG SDK v0.4.0 FREE、Windows x64、C ABI 1.2。