在线CAD前端mxdraw和mxcad库预览和编辑DWG图纸

这篇具有很好参考价值的文章主要介绍了在线CAD前端mxdraw和mxcad库预览和编辑DWG图纸。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

DWG格式是AutoCAD软件的独有格式文件,通常是通过桌面端的CAD软件打开,如果要在网页内打开CAD图纸,则需要提前将CAD图纸用梦想CAD控件提供的后台程序转换成wgh格式,再进行网页浏览。

其中转换方法和原理请查看快速入门的《如何在自己系统中浏览dwg文件》章节,如下图所示:

cad文件在线预览,前端,在线CAD,html5,javascript,网页CAD

mxdraw 前端库浏览CAD图纸

mxdraw 的作用就是浏览CAD图纸,也可以绘制一些批注或者其他图形,首先进行安装,如果你没有前端工程化的基础,请先看前端工程化基础知识,mxdraw有详细的文档,建议点击mxdraw 查看使用说明,然后我们讲一下转换后的图纸用mxdraw库显示的步骤:

1)新建工程

这里我们就用vite来创建一个前端工程化的项目,先创建一个目录vite-mxdraw 然后进入命令行输入以下命令:

# 初始化项目
npm init -y


# 创建vite 项目
npm create vite@latest


# 安装mxdraw库
npm install mxdraw

更多关于创建vite项目的说明,请参考: 开始 | Vite 官方中文文档

2)使用mxdraw

在vite创建的项目中你选择了其中一种框架,而mxdraw它是不依赖于任何框架的,所以我们只需要在canvas元素创建完成后就可以直接使用mxdraw提供的方法,在页面中直接显示转换后的图纸文件。

一般情况下我们不要只使用一个canvas元素,而是定义一个父级元素,并且这个父级的高度一定需要是固定的(不能使用百分比单位),宽度也必须有(可以是百分比单位),像下面这样:

<div style="width: 100%;height: 90vh"><canvas id="myCanvas"></canvas></div>

然后我们可以在js/ts文件(根据前端框架的不同写的位置也不一样,但是只要canvas元素创建挂载,那么就可以使用下面的代码),输入如下代码:

import { MxFun } from "mxdraw"
MxFun.createMxObject({
canvasId: "myCanvas", // canvas元素的id
cadFile: "./demo/buf/$hhhh.dwg",
useWebsocket: false,
});

这里cadFile 对应的就算转换后的文件缩写,它会自动去请求转换后对应的多个文件,详细的入门文档请参考:快速入门 | mxdraw

浏览CAD在线DEMO:embedmxcad,浏览效果如下图:

cad文件在线预览,前端,在线CAD,html5,javascript,网页CAD

mxcad 前端库在线编辑DWG图纸

CAD图纸文件格式比较复杂,有的文件又特别大,不能直接在网页里面进行编辑,所以需要梦想CAD控件提供的后台转换程序提前转换成mxweb格式,传送给前台编辑,其中转换方法和原理请查看快速入门的《编辑模式原理说明》章节,如下图所示:

cad文件在线预览,前端,在线CAD,html5,javascript,网页CAD

如果只是在网页中显示、批注图纸,mxdraw前端库就足够了,如果需要直接修改源图纸,就必须用到mxcad这个库,mxcad依赖mxdraw库,为mxdraw库赋予了编辑图纸的能力。

要使用mxcad,同样需要先有转换后的图纸文件,但这个文件和mxdraw显示的转换后的图纸文件是不一样的,下文只是简单尝试使用mxcad,如果你希望更多的使用它,建议你直接查看mxcad文档 。

1)先初始化项目和创建vite项目

与使用mxdraw是一样,建议使用vite作为打包工具,如果使用其他打包工具或者不使用打包工具请直接查看mxcad文档 ,mxcad是基于WebAssembly的,我们需要找到vite.config.ts文件如果没有就在根目录创建一个,输入如下代码:

import { defineConfig } from "vite"


export default defineConfig({
    server: {
        headers: {
          "Cross-Origin-Opener-Policy": "same-origin",
          "Cross-Origin-Embedder-Policy": "require-corp",
        }
    }
})


服务器配置了这样的响应头,我们才能使用,如果不配置也可以,但打开图纸期间会阻塞js线程,详细的使用请查看mxcad文档。

2)编辑CAD图纸

安装好mxcad后,我们就可以直接使用可以在页面中显示并编辑cad图纸,输入如下代码:

import { createMxCad } from "mxcad"
createMxCad({
    canvas: "#myCanvas",
    locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/2d/${fileName}`, import.meta.url).href,
    fileUrl: new URL("../assets/test.mxweb", import.meta.url).href
}).then((mxcad)=> {
    // 我想换一个文件显示?
    // mxcad.openWebFile(new URL("../assets/test2.mxweb", import.meta.url).href)
    // 保存文件?必须放在用户操作的事件(如点击)中调用它,因为这个行为必须是用户操作去触发
    // mxcad.saveFile()
})

fileUrl 以及openWebFile的参数都是指的转换后的文件,如何转换文件在mxcad文档中有对应的说明,而更详细的可以看快速入门文档中的相关内容。

在线编辑CAD图纸DEMO链接:快速入门 | mxcad,效果图如下:

cad文件在线预览,前端,在线CAD,html5,javascript,网页CAD

如果你仍然无法完成图纸展示或者编辑,建议在github上看我们写好的对应示例源码,然后直接git clone 我们在github上提供的示例代码来参考或者进行开发。

mxdraw相关示例:https://github.com/mxcad/mxdraw-sample

mxcad相关示例: https://github.com/mxcad/mxcad_docs/tree/master/examples

如果你不了解git 请参考:Git - 安装 Git (git-scm.com)

注意:使用mxcad 你需要克隆的是https://github.com/mxcad/mxcad_docs仓库,而不是https://github.com/mxcad/mxcad_docs/tree/master/examples ,具体如何启动这些示例,在示例项目中有详细说明。文章来源地址https://www.toymoban.com/news/detail-759758.html

到了这里,关于在线CAD前端mxdraw和mxcad库预览和编辑DWG图纸的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 网页CAD二次开发(在线CAD SDK)用到的数学库

    在CAD二次开发中, 正确的使用数学库是十分重要的, 我们不需要会很多数学知识, 只要会普通的四则运算和调用mxcad提供的api即可,通过[快速入门]了解了打开图纸后,如果要对图形进行处理,就需要各种计算, mxcad提供了一些类来参与计算或者表示一些数据结构,相关的API查询

    2024年02月20日
    浏览(42)
  • 前端实现在线预览、编辑Office文档(vue版)

    使用插件:Spire.Cloud在线Office文档编辑器(官网:冰蓝科技在线编辑) 无需安装,在 index.html 里面引入即可 重点:支持在线创建、编辑、保存和打印 Office (Word / Excel / PPT) 文档 助您轻松实现高效率、无纸化办公 使用浏览器打开:https://cloud.e-iceblue.cn/,点击右上角头像注册/登

    2024年02月12日
    浏览(64)
  • DWG图纸在SOLIDWORKS软件里如何使用?

    经常有工程师咨询DWG图纸在SOLIDWORKS软件里如何使用,其实这涉及到DWG图纸在SOLIDWORKS软件里的重用问题, SOLIDWORKS支持对DWG图纸的重用 ,常用的有三种方法: 1.作为原始DWG图纸查看 作为原始DWG图纸查看是指使用SOLIDWORKS软件直接打开DWG图纸,并进行查看,便于没有安装任何2D制

    2024年02月14日
    浏览(47)
  • 【CAD】【动态块】CAD设置动态块

    在CAD软件中,有许多与块相关的快捷键可用于快速创建、编辑或使用块。以下是一些常用的块相关快捷键: 2.1.1 创建块BLOCK “B”命令(BLOCK),然后选择要制作成块的对象,按下“Enter”键,输入块的名称即可创建块。 2.1.2 插入块INSERT 2.1.3 编辑块BEDIT 2.1.4 重命名块RENAME “组

    2024年02月08日
    浏览(30)
  • CAD坐标有哪些输入方式?来看看这些CAD坐标输入方式!

    在CAD设计过程中,有时需要通过已知坐标点来画图,有时又需要通过已知角度和距离来画图,在这种情况下,由于已知条件不同,所以便需要用不同的方式来定位点。那么,你知道CAD坐标有哪些输入方式吗?本文小编来给大家分享一下浩辰CAD软件中输入CAD坐标的几种方式吧!

    2024年02月10日
    浏览(44)
  • 云CAD:如何将传统CAD工具移植到云计算环境

    传统的计算机辅助设计(CAD)工具已经存在多年,它们主要用于设计和制造领域,帮助专业人士进行三维建模、模拟和分析。然而,随着云计算技术的发展,越来越多的企业和组织开始将其业务移植到云计算环境,以便更好地利用资源、提高效率和降低成本。在这篇文章中,我

    2024年04月25日
    浏览(36)
  • Python与CAD系列基础篇(一)操作AutoCAD与读写CAD文件

    对于Python与CAD进行联动而言,首要的就是建立Python与AutoCAD软件的连接以及操作CAD文件。 作为本系列文章的开篇,将介绍:①如何通过python连接到AutoCAD软件;②如何使用python进行cad文件的读写。两者的区别是①通过win32com.client或pyautocad连接AutoCAD进行处理(需要AutoCAD软件,可

    2024年02月04日
    浏览(44)
  • Cad 3D设计手机App:Cad建模号(WuWeido)实用性操作一

    作:FangPH_FXD 阵列 所谓阵列就是指一个变数,它包括了连续数个变数(资料型态相同),简单说就是按照一定的规律复制粘贴同一个物体,布满规定的范围。 该软件具体操作如下: 比如在距离原点坐标x=100;y=0;z=0位置画一个立方体10*10*10。如图  点菜单:移动复制   选择该立方体

    2023年04月10日
    浏览(38)
  • 怎么把高版本CAD转换成低版本?CAD版本转换方法分享

    某些情况下,较新的CAD软件版本可能不被较旧的CAD软件版本所支持。如果你需要与使用较旧版本CAD的人进行交流、共享或协作,将高版本CAD转换为低版本可以确保文件能够顺利打开和编辑。那么问题来了,怎么将高版本CAD转换成低版本呢?教大家几种好用的版本转换方法,一

    2024年02月17日
    浏览(38)
  • 【CAD二次开发】给CAD添加TRUSTEDPATHS避免dll插件信任弹窗

    找到配置文件目录,遍历下面的每个配置文件; 找到 Variables 下的 TRUSTEDPATHS 项目;在后面添加新的目录即可,多个目录使用分号分隔;

    2024年02月07日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包