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

 更新时间:2021年10月21日 08:58:53   作者:vjmap  
这篇文章介绍JavaScript创建修改CAD图形,创建修改CAD图形,一般是基于AutoCAD进行二次开发,ObjectARX是AutoDesk公司针对AutoCAD平台上的二次开发而推出的一个开发软件包,它提供了以C++为基础的面向对象的开发环境及应用程序接口,能真正快速的访问AutoCAD图形数据库

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();
/** 来源于哪个图,会在此图的上面进行修改或新增删除,格式如 形式为 mapid/version,如 exam/v1 . */
doc.from = "basketballCourt/v1";
 
// 修改或删除实体是通过传递 `objectid` 实体句柄,如果没有 `objectid` 则表示新增
let modifyEnts = [
    /*修改*/
    new vjmap.DbCircle({
        objectid: "71",// 实体句柄,如传了实体句柄,是表示修改或删除此实体. 
        colorIndex: 2
    }),
    /*删除*/
    new vjmap.DbText({
        objectid: "73",// 实体句柄,如传了实体句柄,是表示修改或删除此实体. 
        delete: true // 表示删除
    }),
    /*新增(没有传 objectid )*/
    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图形内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符

    TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符

    这篇文章主要介绍了TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符,typeScript 支持面向对象的所有特性,比如类、接口等,下文详细内容,需要的小伙伴可以参考一下
    2022-02-02
  • 前端JavaScript算法找出只出现一次的数字

    前端JavaScript算法找出只出现一次的数字

    这篇文章主要为大家介绍了前端JavaScript算法找出只出现一次的数字的算法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 8个工程必备的JavaScript代码片段

    8个工程必备的JavaScript代码片段

    这篇文章小编主要给大家介绍是8个工程中必须必备的JavaScript代码片段,需要的小伙伴可以参考下面文章的具体内容,对你有用的话建议收藏哦
    2021-09-09
  • Immer 功能最佳实践示例教程

    Immer 功能最佳实践示例教程

    这篇文章主要为大家介绍了Immer功能最佳实践示例教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 微信小程序 教程之模板

    微信小程序 教程之模板

    这篇文章主要介绍了微信小程序 模板的相关资料,并附实例代码,需要的朋友可以参考下
    2016-10-10
  • delete 语法的本质深入解析

    delete 语法的本质深入解析

    这篇文章主要为大家介绍了delete 语法的本质深入解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • ant-design的upload组件中实现粘贴上传实例详解

    ant-design的upload组件中实现粘贴上传实例详解

    这篇文章主要为大家介绍了ant-design的upload组件中实现粘贴上传实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 项目中使用TypeScript的TodoList实例详解

    项目中使用TypeScript的TodoList实例详解

    这篇文章主要为大家介绍了项目中使用TypeScript的TodoList实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • JS中的every()对空数组总返回true原理分析

    JS中的every()对空数组总返回true原理分析

    这篇文章主要为大家介绍了JS中的every()对空数组总返回true原理分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 一文详解webpack中loader与plugin的区别

    一文详解webpack中loader与plugin的区别

    这篇文章主要为大家介绍了一文详解webpack中loader与plugin的区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02

最新评论