网页CAD的mxdraw库实现autocad中的圆.docx

《网页CAD的mxdraw库实现autocad中的圆.docx》由会员分享，可在线阅读，更多相关《网页CAD的mxdraw库实现autocad中的圆.docx（14页珍藏版）》请在第一文库网上搜索。

1、网页CAD的mxdraw库实现Autocad中的圆I刖言Web端显示CAD图纸的应用场景很广泛，单纯的浏览DWG逐渐满足不了用户的实际需求，浏览的同时再加上简单的绘制和批注更符合大家的应用场景，接下来我们讲一下如何利用MXdraW库实现AutoCAD中的画圆命令。首先我们知道DWG图纸要在网页上显示需要安装转换程序，在测试开始之前，我们要熟悉转换方法和原理，请查看快速入门(文档首页MXDraW云图快速入门MXDraW云图快速入门视频土快速入门(最近更新时间：202%07-3111:54:00)主要功能下载开发包如何在自己系统中浏览dwg文件在线看CAD图纸的原理是：CAD图纸文件上传到服务后台

2、后，调用我们的格式转换程序，把CAD图纸文件转换成我们的CA阅览格式Wgh文件，然后把该文件传给前台JS程序加载显示CAD图纸.为了对大的CAD图纸异步加载，CAD文件成多个Wgh文件.DWG文件格式转换有两个方法：运行演示|如何在自己系统中浏览dwg文件|编辑模式原理说明浏览模式原理说明1iUnX转换CAD文件到浏览格式1iUnX转换CAD文件到编辑格式方法1：调用我们后面服务转换，详细参考：https:he1p.mxdraw.Com?Pid=II5二方法2：调用MXFiIeCOnVert.exe转换，软件安装目录下：C:UsersMxDrawDocumentsMxKdMxDrawC1oud

3、ServerBinRe1easeMxFi1eConvert.exe有一个MXFi1eCOnVerteXe程序，使用它对CAD图纸做格式转换.调用:windows:node.exemxconvert.jse:/1.dwg或node.exemxconvert.jsconvertfi1e=e:/1.dwgIinUx:./nodeMxconvept.jstp1.dwg或./nodeInXConVert.jsconvertfi1e=tnp1.c1wgJAVA3女口何调用MXWeConVerteXe碎CAD文式，代码女口下：1 importjava.io.BufferedReader;2 importja

4、va.io.IOException;3 importjava.io.InputStream;4 importjava.io.InputStreamReader;5 importjava.io.OutputStream;6 pub1icc1assMyTest7 /后面java程序，调用我们exe程序转换dwg文件格式.8 pub1icstaticStringCa11MxFi1eConvert(StringsDwgFi1e)口/我们转所程序路径.10Stringcommand=,CUsersMxDrawDEVDocumentsMxKdMxDrawC1oudServerBinRe1easeMxFi1

5、eConvert.exe;11Runtimern=Runtine.getRunime();12Processprocess=nu11;/转换参数。StringSJsonParain=srupath:+sDvgF:11e+如果还有疑问可以查看：章节，如下图：MxDraw帮助全部文档：文档页MxDraw*WnxdrawiOmg1酢预览，9眦MXDMa1前端mxdrawmxcad库预览胡强图纸，七m-一NaImxdraw前端库预览图纸K晌-XdrawfOmXCaaJe题EwWg乍用麓是氏心圣运，也可以唉电一些批注M他图形，先遂行安装，如果烧再！工程化的砒，清先前这!国1Ut泪，mRrwMiSMa的文

6、档，g廨由EdrM查.节说明，然一阴一下访澳后的IB砌!mxdra，6显示的罗口庵台使用NOde15调用罗QAP1新建工程BEXdQW餐g顼览3mxc3d在送W图旺便用的那码白npmiit-ypmcreatevite1atestnpwinsta11xdrawCA=GIS森成说明这里物At用ETm一个前先便BtT目录v*z1qw的后行1以下:关于MxDbCirdeShapemxdraw库是一款用于绘制CAD图形的JavaScript库，它提供了一系列的图形形状类，可以实现类似于Aut。Cad的绘图功能，在此之前先看一下圆弧形状类的描述：MxDbCircIeShape圆（弧）形状类https:/m

7、xcadx.gitee.io/mxdrawapidocs/c1asses/MxDbCirc1eShape.htm1基于这个形状类，我们可以实现类似autocad绘制圆的功能，首先我们先通过继承类的方式，为圆提供可以改变这个圆的夹点，代码如下：importMxDbCircIeShapefrommxdraw;c1assMxDbCircIeextendsIvixDbCircIeShape*是否闭合到中心位置VisC1osedToCenter=fa1se* 返回自定义对象的夹点.* param* returnsArrayVgetGripPoints()constx,y,z=this.center;计算

8、圆的上下左右夹点1etupPoint=newTHREE.Vector3(x,y+this.radiuszz),downPoint=newTHREE.Vector3(xzy-this.radiuszz),IeftPoint=newTHREE.Vector3(x-this.radiuszy,z),rightPoint=newTHREE.Vector3(x+this.radiuszy,z);returnthis.centerzupPointzdownPointzIeftPointzrightPoint;)* 移动自定义对象的夹点.* param* returnsboo1ean* /moveGripP

9、ointsAt(index:number,offset:THREE.Vector3)constcenter;upPointzdownPointzIeftPointzrightPoint=this.getGripPoints();/改变上下左右的夹点则改变radius半径if(index=0)this.center=center.add(offset);if(index=1)this.radius=upPoint.add(offset).distanceTo(this.center);if(index=2)this.radius=downPoint.add(offset).distanceTo(

10、this.center);if(index=3)this.radius=1eftPoint.add(offset).distanceTo(this.center);if(index=4)this.radius=ghtPoint.add(offset).distanceTo(this.center);returntrue;)属性列表如下：属性名类型描述centerVector3圆心坐标radiusnumber圆半径StartAngIenumber弧开始角度endAng1enumber弧结束角度c1ockwiseboo1ean是否以顺时针方向创建（扫过）弧线isC1osedToCenterboo1

11、ean是否闭合到中心位置需要注意的是，MXDbCirdeShaPe继承自MxDb日IiPSeShape(https:mxcadx.gitee.io/mxdrawapidocs/c1asses/MXDbEI1iPSeShaPe.htm1),因止匕MxDbCircIeShape也拥有MxDbEIIipseShape的所有属性。我们只需要知道圆心和半径就可与直接绘制一个圆了。绘制圆的方法方法1：两点绘制圆参考代码如下：importMrxDbgUiPrPointzMxFunzMxDbCircIeShapezMcEdGetpointWorIdDrawObjectzfrom,mxdraw;constdra

12、wCircIeAtTwoPoints=async()=constgetPoint=newMrxDbgUiPrPointO;constcirc1e=newMxDbCircIeO;/直接确定圆心circ1e.center=awaitgetPoint.go()getPoint.setUserDraw(CurrentPoint:THREE.Vector3,pWor1dDraw:McEdGetpointWorIdDrawObject)=/根据圆心和圆弧上任意一点确定半径circ1e.radius=Circ1exenterdistanceTo(CurrentPoint)pWor1dDraw.drawCus

13、tomEntity(circ1e);/再绘制一根圆弧和圆心的连接线表示现在正在确定半径pWor1dDraw.draw1ine(circ1e.center;CurrentPoint);)；/确定最后绘制的圆的半径circ1e.radius=circ1e.center.distanceTo(awaitgetPoint.go()MxFun.getCurrentDraw().addMxEntity(CircIe);)drawCirdeAtTwoPoints()方法2:三点绘制圆通过三元一次方程组求解圆心的坐标的具体步骤如下：1)假设圆心的坐标为(ex,cy,cz),将三个点的坐标代入圆的一般方程，得到

14、三个方程：a1*ex+b1*cy+c1*Cz+d1=0a2*ex+b2*cy+c2*cz+d2=0a3*ex+b3*cy+c3*cz+d3=02)将三个方程进行整理，得到以下形式的方程：(a1*b2*c3-a1*b3*c2-a2*b1*c3+a2*b3*c1+a3*b1*c2-a3*b2*c1)*ex+(b1*c2*d3-b1*c3*d2-b2*c1*d3+b2*c3*d1+b3*c1*d2-b3*c2*d1)*cy+(a1*b2*d3-a1*b3*d2-a2*b1*d3+a2*b3*d1+a3*b1*d2-a3*b2*d1)*cz+(a1*b2*c3-a1*b3*c2-a2*b1*c3+a2*b3*c1+a3*b1*c2-a3*b2*c1)=03）根据方程的系数，将ex、cy和cz的系数分别除以（a1*b2*c3-a1*b3*c2-a2*b1*c3+a2*b3*c1+a3*b1*c2-a3*b2*c1),得到ex、cy和cz的值。将得到的cxscy和cz的值作为圆心的坐标，返回一个新的THREE.Vector3对象。