谷歌浏览器打开DWG图纸,实现圆转多边形功能(在线CAD开发教程)

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
函数计算FC,每月15万CU 3个月
云原生网关 MSE Higress,422元/月
简介: 本文介绍了如何使用在线CAD SDK实现圆转多边形功能。首先,需搭建绘图环境和添加命令行交互。接着,通过mxcad库,根据用户输入的边数实现两种转换方式:内接于圆(目标圆为多边形外接圆)和外切于圆(目标圆为多边形内切圆)。具体实现包括选中圆、获取边数、选择转换方式,然后根据用户选择绘制多边形。最终展示了转换效果。

前言

在线CAD SDK的集成过程中,甲方客户可能有实现圆转多边形功能的需求,作为开发者如何利用WEB CAD SDK展现此功能效果呢?本章节我们重点讲述一下。

环境搭建

  1. 搭建绘图环境,创建一个mxcad项目,具体操作请参考[mxcad|快速入门]。
  2. 在项目中添加命令行,实现功能的动态交互功能,具体操作请参考[mxcad|命令行]。

基于mxcad库实现圆转多边形功能

圆转多边形功能是根据用户输入的边数将目标圆转变成正多边形,其中转变方式分两种情况,一种是转换后的正多边形内接于目标圆,一种是转换后的正多边形外切于圆。下面我们将分别介绍如何实现这两种转换方式。

1.内接于圆:即目标圆为多边形的外接圆,它与多边形的每个顶点都相接。因此我们可以通过在目标圆上均匀取点找到多边形的所有顶点,最后通过多段线闭合连接成多边形,如下图:
image-20240402105127132.png

2.外切于圆:即目标圆为多边形的内切圆,它与多边形的每条边都相切,且与多边形的中心在同一直线上。因此我们可以通过获取多边形的外切圆反向绘制多边形。根据多边形条数求得多边形的每个内角度数,再根据目标圆的半径值可求的多边形外切圆半径值:目标圆半径 / sin(90 - (360 / (num * 2))),如下图所示:
image-20240402110513671.png

使用mxcad库实现完整圆转多边形功能

  1. 首先选中目标对象,选择时筛选出圆对象,参考代码如下:

    // 选中圆
    let filter = new MxCADResbuf();
    filter.AddMcDbEntityTypes("CIRCLE");
    let aryId = await MxCADUtility.userSelect("选择要转成多边形的对象", filter);
    if (aryId.length == 0) {
         
         
        return;
    }
    
  2. 通过命令行交互让用户设置多边形边数,默认为正五边形。

    let getNum = new MxCADUiPrInt();
    getNum.setMessage('设置多边形边数');
    let num = await getNum.go() || 5;
    getNum.clearLastInputPoint()
    if (!num) return;
    
  3. 然后让用户根据需求选择内接于圆或外切于圆的圆转多边形转换方式,默认选择内接于圆方式。

    const getPoint = new MxCADUiPrPoint();
    getPoint.setMessage("\n输入选项")
    getPoint.setKeyWords("[内接于圆(I)/外切于圆(C)]")
    getPoint.clearLastInputPoint()
    await getPoint.go();
    let tollType = 'inside'
    if (getPoint.isKeyWordPicked("i")) tollType = 'inside'
    if (getPoint.isKeyWordPicked("c")) tollType = 'outside'
    
  4. 最后根据用户输入关键字确定转换方式,绘制多边形。

    let mxcad = MxCpp.getCurrentMxCAD();
    aryId.forEach(async (id) => {
   
   
        let event: any = await id.getMcDbEntity();
        let cricle = event as McDbCircle;
        let arr1: McGePoint3d[] = [];
        if (tollType === 'inside') {
   
   
            //    多边形内切圆
            for (let i = 0; i < num; i++) {
   
   
                let point = cricle.getPointAtDist(cricle.getLength().val / num * i);
                if (point.ret) arr1.push(point.val)
            }
            let pl1 = new McDbPolyline();
            arr1.forEach(i => {
   
   
                pl1.addVertexAt(i)
            })
            pl1.isClosed = true;
            mxcad.drawEntity(pl1);
        } else if (tollType === 'outside') {
   
   
            //  多边形外切圆
            /**
             * 知道三个角加一条边求其他两边
             * 一条边:r
             * 三个角 90 360/num*2 
             */
            let angle = 90 - (360 / (num * 2))
            let sinValue = Math.sin(angle * Math.PI / 180); // 返回0.5
            let R = cricle.radius / sinValue;
            let r = new McDbCircle();
            r.center = cricle.center;
            r.radius = R;
            let arr2: McGePoint3d[] = [];
            for (let i = 0; i < num; i++) {
   
   
                let point = r.getPointAtDist(r.getLength().val / num * i);
                if (point.ret) arr2.push(point.val)
            }
            let pl2 = new McDbPolyline();
            arr2.forEach(i => {
   
   
                pl2.addVertexAt(i)
            })
            pl2.isClosed = true;
            mxcad.drawEntity(pl2);
        }
        event.erase()
    })

实现效果如下:
image-20240402112211243.png

相关文章
|
8天前
|
人工智能 API 数据库
Browser Use:开源 AI 浏览器助手,自动完成网页交互任务,支持多标签页管理、视觉识别和内容提取等功能
Browser Use 是一款专为大语言模型设计的智能浏览器工具,支持多标签页管理、视觉识别、内容提取等功能,并能记录和重复执行特定动作,适用于多种应用场景。
134 0
Browser Use:开源 AI 浏览器助手,自动完成网页交互任务,支持多标签页管理、视觉识别和内容提取等功能
|
5月前
|
存储 缓存 前端开发
前端谷歌浏览器面版属性
【8月更文挑战第19天】前端谷歌浏览器面版属性
57 0
|
3月前
|
Web App开发 安全 中间件
谷歌、火狐、Edge等浏览器如何使用ActiveX控件
allWebPlugin 是一款为用户提供安全、可靠且便捷的浏览器插件服务的中间件产品,支持 Chrome、Firefox、Edge 和 360 等浏览器。其 V2.0.0.20 版本支持一个页面加载多个插件,并解决了插件与浏览器之间的焦点问题。用户可通过“信息化系统 + allWebPlugin + 插件 + 浏览器”的解决方案实现 ActiveX 插件的无缝集成。下载地址见文末,安装包含详细说明。
|
2月前
|
Web App开发 API Windows
取接口访问者信息[IP,浏览器,操作系统]免费API接口教程
此API用于获取访问者的IP地址、浏览器和操作系统信息,支持70多种浏览器和操作系统。通过POST或GET请求至`https://cn.apihz.cn/api/ip/getapi.php`,需提供用户ID和KEY。返回结果包括状态码、消息、IP、浏览器和操作系统信息。示例:{&quot;code&quot;:200,&quot;ip&quot;:&quot;175.154.88.178&quot;,&quot;browser&quot;:&quot;Chrome&quot;,&quot;os&quot;:&quot;Windows 10&quot;}。详情见官网文档。
|
3月前
|
Web App开发 前端开发 JavaScript
为什么浏览器兼容性在开发网站时很重要?
浏览器兼容性在网站开发中确实非常重要。
|
5月前
|
Web App开发
Chrome——谷歌浏览器chrome如何模拟其他客户端
Chrome——谷歌浏览器chrome如何模拟其他客户端
118 1
Chrome——谷歌浏览器chrome如何模拟其他客户端
|
5月前
|
Web App开发 JavaScript 前端开发
浏览器内小脚本开发
【8月更文挑战第31天】
98 1
|
5月前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
1225 1
|
5月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
385 8
|
5月前
|
存储 JavaScript
纯Vue实现网页日常任务清单小功能(数据存储在浏览器)
这篇文章介绍了如何使用纯Vue实现一个网页日常任务清单的小功能,数据存储在浏览器中以保持数据持久化。文章内容包括功能描述、效果演示、核心代码修改方法,以及已经打包好的项目源码下载链接。作者还提供了友情提示,指出了数据存储到浏览器的核心代码部分,方便读者快速理解和应用。