文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

前端通过JavaScript创建修改CAD图形详情

2024-04-02 19:55

关注

1、现状

创建修改CAD图形,一般是基于AutoCAD进行二次开发,ObjectARXAutoDesk公司针对AutoCAD平台上的二次开发而推出的一个开发软件包,它提供了以C++为基础的面向对象的开发环境及应用程序接口,能真正快速的访问AutoCAD图形数据库。 与以往的 AutoCAD 二次开发工具 AutoLISP 和ADS不同,ObjectARX应用程序是一个DLL(动态链接库),共享AutoCAD的地址空间,对AutoCAD进行直接函数调用。所以,使用ARX编程的函数的执行速度得以大大提高。ARX 类库采用了标准的C++类库的封装形式,这也大大提高了程序员编程的可靠度和效率。

运用ObjectARX进行二次开发,必须首先设置好ObjectARX的开发环境。常用的开发环境是Microsoft Visual C++ 6.0 Microsoft visual studio 2005Microsoft visual studio 2008Microsoft visual studio 2010。同时,还需要安装ObjectARX SDK

Visual C++、ObjectARX等开发语言和环境肯定吓跑了不少开发者。那对于一些简单的场景,如只要根据数据自动成图或者在现在的图形上做一些很简单的修改,有没有一个简单的办法或语言和开发环境?

2、JS新建修改CAD图形

唯杰地图在前端实现了常用的AutoCAD实体封装,能通过JavaScript脚本创建新的CAD图形。

2.1 支持的CAD实体类型

类名称 说明
DbLine 直线
DbCurve 曲线
Db2dPolyline 二维折线
Db3dPolyline 三维多段线
DbPolyline 多段线
BlockReference 块参照
DbArc 圆弧
DbCircle
DbEllipse 椭圆
DbHatch 填充
Text 单行文本
DbMText 多行文本
RasterImage 栅格图片
DbShape 型实体
Spline 样条曲线
Wipeout 遮罩实体
Dimension 标注
Db2LineAngularDimension 角度标注[两条线]
Db3PointAngularDimension 角度标注[三点]
DbAlignedDimension 对齐标注
DbArcDimension 圆弧标注
DbDiametricDimension 直径标注
DbOrdinateDimension 坐标标注
DbRadialDimension 半径标注
DbRadialDimensionLarge 半径折线标注
DbRotatedDimension 转角标注
DbLayer 图层
DbTextStyle 文字样式
DbDimStyle 标注样式
DbLinetypeStyle 线型样式
DbBlock 块定义
DbDocument 数据库文档

下面以新建一个篮球场示意图以例,相关代码如下:


(async () => {
 // --新建地图--在后台新建CAD图,然后在前端打开
 // js代码
 let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
 let doc = new vjmap.DbDocument();
 let entitys = [];
 let line1 = new vjmap.DbLine();
 line1.start = [0, 0]
 line1.end = [0, 15]
 entitys.push(line1)
 
 let line2 = new vjmap.DbLine();
 line2.start = [0, 14.1]
 line2.end = [2.99, 14.1]
 entitys.push(line2)
 
 let line3 = new vjmap.DbLine();
 line3.start = [0, 0.9]
 line3.end = [2.99, 0.9]
 entitys.push(line3)
 
 let line4 = new vjmap.DbLine();
 line4.start = [0, 9.95]
 line4.end = [5.8, 9.95]
 entitys.push(line4)
 
 let line5 = new vjmap.DbLine();
 line5.start = [0, 5.05]
 line5.end = [5.8, 5.05]
 
 let hatch = new vjmap.DbHatch();
 hatch.pattern = "SOLID";
 hatch.color = 0xB43F32;
 hatch.points = [line4.start, line4.end, line5.end, line5.start];
 entitys.push(hatch);
 entitys.push(line4)
 entitys.push(line5)
 
 let line6 = new vjmap.DbLine();
 line6.start = [5.8, 5.05]
 line6.end = [5.8, 9.95]
 entitys.push(line6)
 
 let arc1 = new vjmap.DbArc();
 arc1.center = [5.7963, 7.504];
 arc1.radius = 1.8014;
 arc1.startAngle = 270 * Math.PI / 180.0;
 arc1.endAngle = 90 * Math.PI / 180.0;
 entitys.push(arc1)
 
 let arc2 = new vjmap.DbArc();
 arc2.center = [5.7963, 7.504];
 arc2.radius = 1.8014;
 arc2.startAngle = 90 * Math.PI / 180.0;
 arc2.endAngle = 270 * Math.PI / 180.0;
 //arc2.linetype = "DASHED"
 entitys.push(arc2)
 
 let arc3 = new vjmap.DbArc();
 arc3.center = [1.575, 7.5];
 arc3.radius = 6.75;
 arc3.startAngle = 282 * Math.PI / 180.0;
 arc3.endAngle = 78 * Math.PI / 180.0;
 entitys.push(arc3)
 
 let block = new vjmap.DbBlock();
 block.name = "ball";
 block.origin = [0, 0]
 block.entitys = entitys;
 doc.appendBlock(block);
 
 let blockRef1 = new vjmap.DbBlockReference();
 blockRef1.blockname = "ball";
 blockRef1.position = [0, 0];
 doc.appendEntity(blockRef1);
 
 let blockRef2 = new vjmap.DbBlockReference();
 blockRef2.blockname = "ball";
 blockRef2.position = [28, 15];
 blockRef2.rotation = Math.PI;
 doc.appendEntity(blockRef2);
 
 let otherEnts = [
  new vjmap.DbLine({
   start: [0, 15],
   end: [28, 15]
  }),
  new vjmap.DbLine({
   start: [0, 0],
   end: [28, 0]
  }),
  new vjmap.DbLine({
   start: [14, 0],
   end: [14, 15],
   colorIndex: 1
  }),
  new vjmap.DbCircle({
   center:[14, 7.5],
   radius: 1.83,
   color: 0xFF0000
  }),
  new vjmap.DbText({
   position: [14, 16],
   contents: "篮球场示意图",
   colorIndex: 1,
   horizontalMode: 4,
   height: 1,
  })
 ]
 
 doc.appendEntity(otherEnts);
 
 // js代码
 let res = await svc.updateMap({
  mapid: "basketballCourt",
  filedoc: doc.toDoc(),
  mapopenway: vjmap.MapOpenWay.Memory,
  style: vjmap.openMapDarkStyle() // div为深色背景颜色时,这里也传深色背景样式
 })
 if (res.error) {
  message.error(res.error)
 }
 let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
 let prj = new vjmap.GeoProjection(mapExtent);
 
 var map = new vjmap.Map({
  container: 'map', // container ID
  style: svc.rasterStyle(),
  center: prj.toLngLat(mapExtent.center()),
  zoom: 2,
  renderWorldCopies: false
 });
 map.attach(svc, prj);
 map.fitMapBounds();
 
 map.addControl(new vjmap.NavigationControl());
 map.addControl(new vjmap.MousePositionControl({showZoom: true}));
 
 map.enableLayerClickHighlight(svc, e => {
  e && message.info(`type: ${e.name}, objectid: ${e.objectid}, layer: ${e.layerindex}`);
 })
})();


创建完后,Web显示如下:

把创建的DWG图形,在AutoCAD里面可以打开此图:

2.2 修改或删除

修改通过from属性设置 来源于哪个图,会在此图的上面进行修改或新增删除,格式如 形式为 mapid/version,如 exam/v1 .

删除的话,指定图中实体的objectID

示例代码如下:


let doc = new vjmap.DbDocument();

doc.from = "basketballCourt/v1";
 
// 修改或删除实体是通过传递 `objectid` 实体句柄,如果没有 `objectid` 则表示新增
let modifyEnts = [
    
    new vjmap.DbCircle({
        objectid: "71",// 实体句柄,如传了实体句柄,是表示修改或删除此实体. 
        colorIndex: 2
    }),
    
    new vjmap.DbText({
        objectid: "73",// 实体句柄,如传了实体句柄,是表示修改或删除此实体. 
        delete: true // 表示删除
    }),
    
    new vjmap.DbMText({
        position: [14, -2],
        contents: "我是多行文本",
        colorIndex: 3,
        attachment: 2,
        height: 1,
    })
]
doc.appendEntity(modifyEnts);
 
// js代码
let res = await svc.updateMap({
    mapid: "newBasketballCourt",
    filedoc: doc.toDoc(),
    mapopenway: vjmap.MapOpenWay.Memory,
    style: vjmap.openMapDarkStyle() // div为深色背景颜色时,这里也传深色背景样式
})


结果如下:

可以访问 demo地址 https://vjmap.com/guide/newmap.html 去体验下效果

3、应用场景

适用于在前端有数据,需要在线创建或基于现在CAD图形进行修改或删除;如可获取全国的GeoJson数据创建一个CAD图形;对于一些经常变化的数据如工程进度图纸根据进度数据实时绘制生成DWG图纸等场景;对于专业复杂的图形绘制或编辑工作,建议使用ObjectARX对AutoCAD进行二次开发实现!

到此这篇关于前端通过JavaScript创建修改CAD图形详情的文章就介绍到这了,更多相关前端通过JavaScript创建修改CAD图形内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯