说明在网页中引用控件在p.net使用控件打开服务器上的dwg文件保存dwg到服务器设置服务器上目录权限网页交互绘直线
说明

控件在网页使用,使用Html + JavaScript调用控件,在客户端运行,对于后台服务器使用Asp,php,java等语言开发都可以。支持IE所有版本,QQ,360浏览器(极速模式也支持),谷歌浏览只支持4.5版前的版本。


我们提供CAB安装包,在ie中自动下载安装。

在网页中引用控件

从我们网站首页下载最新安装包,安装包大概有150M,是个rar自解压文件,里面包括了所有帮助文件、例子和语言调用的运行程序。界面如下:


首页网页下载.png


在此教程中,我们下载网页中的控件(点击此处下载),下载成功后得界面如下:


下载.png


下载的文件是一个压缩文件,双击解压之后,以管理员身份运行“RegMxDrawX.bat”注册控件到系统中。界面如下:


管理员运行.png


注册成功后,弹出注册成功弹框。界面如下:


注册成功.png


控件是个ocx,Id为74A777F8-7A8F-4e7c-AF47-7074828086E2


Html中引用控件需要添加代码如下:


<object classid="clsid: 74A777F8-7A8F-4e7c-AF47-7074828086E2" id="MxDrawXCtrl"  codeBase=http://www.mxcad.net:2080/MxDrawX52.CAB#version=4.0.0.1  width=100% height=90%> 
  <param name="_Version" value="65536">
  <param name="_ExtentX" value="24262">
  <param name="_ExtentY" value="16219">
  <param name="_StockProps" value="0">
  <param name="IsRuningAtIE" value="1">
  <param name="DwgFilePath" value="">
  <param name="ShowCommandWindow" value="1">
  <param name="ShowToolBars" value="1">
  <param name="ShowModelBar" value="1">
  <param name="Iniset" value="">
  <param name="ToolBarFiles" value="">
  <param name="ShowMenuBar" value="1">
  <param name="EnableUndo" value="1">
  <param name="ShowPropertyWindow" value="1">
</object>


使用参考例子samples\ie\mxocx.js引用控件添加代码如下:


<script language="javascript" type="text/javascript" src="mxocx.js"></script>
<script type="text/javascript">LoadMxDrawX("","","http://www.mxcad.net:2080/MxDrawX52.msi");</script>


<object>标记中各个部分的含义如下:


  • id=" MxDrawXCtrl "标识控件的JavaScript编程标识,通过document.all("MxDrawXCtrl ")即可得到对控件对象的引用。

  • clsid: 74A777F8-7A8F-4e7c-AF47-7074828086E2标识控件的唯一标识。浏览器通过这个clsid来判断访问网页的客户机是否已经安装控件。

  • codebase="http://www.mxcad.net:2080/MxDrawX52.CAB#version=4.0.0.1"


在网页上自动安装CAB包,http://www.mxcad.net:2080/MxDrawX52.CAB是CAB包在服务器上的位置。version=4.0.0.1是控件版本号,如果这个版本号取的比文件属性中版本号低,则不会在ie中自动下载提示更新安装,如果比文件属性中的版本号高,则会总是提示更新安装。


这个版本号可以查看mxdrawx.ocx文件的属性得到,最新版已经升级到version=9.0.0.1,界面如下:


版本属性.png


参考例子目录:

在p.net使用控件

“参考例子”sample\AspNet\AspNet.sln”,演示了网页调用控件、打开图纸、保存图纸到服务器、参数化绘图、交互绘图等功能。运行效果如下:


Asp.net.png

打开服务器上的dwg文件

1.1 修改服务器设置,支持dwg文件下载


打开IIS的设置界面,在网站上面点击右键,弹出菜单,选择“属性”菜单命令。弹出网站设置界面,点击“HTTP头”的Tab选项。界面如下:


Asp.net.png


点击“文件类型”按钮,弹出设置界面,增加一个新的dwg文件类型,点击确定。界面如下:


Asp.net.png


1.2 DwgFilePath


控件自动打开DWG文件的属性,在控件的属性窗口中设置该值为dwg文件的路径,控件打开时自动打开dwg文件,网页调用代码:


<param name="DwgFilePath" value="http://www.mxcad.net:2080/test.dwg" >


在网中调用时该变量支持相对路径。 相对服务器路径:DwgFilePath=~/my.dwg,相对当前网页路径DwgFilePath=./my.dwg。该变量支持ftp路径 DwgFilePath=ftp://192.168.1.133/11.dwg。支持assic字符串的十六进制编码,用"<>"扩起来的路径,控件就认为这是十六进制编码 如:传 <2E2F33343234332E647767>表示传 ./34243.dwg。


1.3 OpenWebDwgFile


调用这个函数,直接打开网上的DWG ,DXF, DWF文件。网络路径如:http://www.mxcad.net:2080/test.dwg


支持assic字符串的十六进制编码,用"<>"扩起来的路径,控件就认为这是十六进制编码 如可以传 <2E2F33343234332E647767>表示传 ./34243.dwg。在网页中,需要等到控件初始化完成后,才能调用该函数打开dwg文件。


在网页增加控件初始化完成函数如下:


//初始化
function InitMxDrawX() {
var mxOcx = document.getElementById("MxDrawXCtrl");
    if (mxOcx) {
        if (!mxOcx.IsIniting()) 
        {
            clearInterval(mxtime);
            // 控件初始化完成,需要在启动做的事,在这里做
            // 启动时打开文件
            mxOcx.OpenWebDwgFile("http://www.mxcad.net:2080/test.dwg");
           
        }
    }
}
mxtime = setInterval(InitMxDrawX, 100);

   

保存dwg到服务器

控件支持在网页中绘图,编辑dwg文件,并把修改后的dwg文件保存到服务器。


SaveDwgToURL


该函数模拟一个文件表单提交,上传文件,在服务器端有个专门的程序来处理文件的上传。


COM接口:


VARIANT_BOOL SaveDwgToURL(  
BSTR pszServerUrl,             //服务器网址地址,如:www.mxdraw.com,如果传空,程序自动取当前网
//页的服务器.
BSTR pszServerProgramUrl,    //服务器的文件上传处理程序,如:upload.asp
BSTR pszComponentName,     //HTML组件名称,相当于一个HTML页面的Form中的中的file1
BSTR pszPort);                  //服务处理端口. 如:_T("80")


详细例程参考sample/AspNet中"保存dwg文件到服务器"按钮,向服务器发送的上传文件请求,使用Fiddler工具能看见上传数据包, 因为Fiddler的问题, Fiddler工具查看本地服务器请求内容时,本地服务器ip地址需要写成http://127.0.0.1,而不能写成http://localhost


如下代码调用:


if (!mxOcx.SaveDwgToURL("http://127.0.0.1.", "/Save.aspx", "ComponentName", "6046")) {
       // 得到服务器返回错误
        var ret = MxDrawXCtrl_Obj.Call("Mx_GetLastError","");
        alert(ret.AtString(0));
    }
    else {
        alert("成功");
}


上面代码相当于如下Html代码的调用:


<form action="Save.aspx"method="post" enctype="multipart/form-data">
    <input id="File1" type="file" name="ComponentName" /><br />
    <input id="Submit1" type="submit" value="submit" />
</form>


服务器上,接收上传文件并保存的代码,Asp.net:


namespace AspNet
{
    public partial class Save : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            System.Web.HttpFileCollection uploadFiles = Request.Files;
            System.Web.HttpPostedFile theFile;
            if (uploadFiles.Count == 0)
            {
                Response.Write("Save failed!!!");
                return;
            }
            else
            {
                try
                {
                    int i = 0;
                    for (; i < uploadFiles.Count; )
                    {
                        theFile = uploadFiles[i];
 
                        // uploadFiles.GetKey(0)对应着
                        // SaveDwgToURL(getcurpath(), "/Save.aspx", "test.dwg","");中的Test.Dwg
                        theFile.SaveAs(Server.MapPath(uploadFiles.GetKey(0)) );
                        Response.Write("Save OK!");
                        i++;
                        return;
                    }
                }
                finally
                {
                    
                }
            }
 
            Response.Write("Save failed!!!");
          
        }
    }
}


例如 ASP.net + MVC调用:


var dwgName = $("#dwgList option:selected").text();
            var hostName = window.location.hostname;
            var port = window.location.port;
            var path = "http://" + hostName + ":" + port;
            alert(hostName+"==="+path);
            if (!mxOcx.SaveDwgToURL(path, "Home/SaveDwgFile/?key=" + Math.random() + "&flag=" + flag, dwgName, ""))
            {
                alert(path);
                var ret = mxOcx.Call("Mx_GetLastError", "");
                alert(ret.AtString(1));
            }
            else
            {
                //alert("保存成功");
            }


服务器上,接收上传文件并保存的代码Servlet:


MxForm mf = (MxForm)actionForm;
        InputStream is = mf.getFile().getInputStream();
        File destFile = new File("D:\civilize\code\web","test.dwg");
        OutputStream os = new FileOutputStream( destFile );
        byte[] buffer = new byte[400];
        int length = 0;
         while( (length = is.read(buffer)) > 0 ) {
            os.write(buffer,0,length);
        }
        mf.getFile().destroy();
        is.close();
        os.close();
        return null;
        // MxForm代码:
        import org.apache.struts.action.ActionForm;
        import org.apache.struts.upload.FormFile;
 
        public class MxForm extends ActionForm {
            private FormFile file;
        public FormFile getFile() {
                return file;
            }
            public void setFile(FormFile file) {
            this.file = file;
            }
        }

   

设置服务器上目录权限

控件中的ASP例程,上传保存的文件放在updata目录下,在服务器上必须设置其写权限,才能保存成功。设置步骤如下:


1.打我的“电脑窗口”,点击“工具”->“文件夹选项”,弹出文件夹选项窗口。

2.勾选“使用共享向导”选项,界面如下:


共享向导.png

网页交互绘直线

放入一个绘直线按钮:


<input type="button" value="绘制直线" onclick="myclick()">


Myclick函数代码:所有与用户交互的函数,需要在控件的命令事件中调用,具体原因参考文档“梦想控件19-命令执行原理.doc


function myclick()
{   
//  下面的DoCommand(1)调用程序将跳到DoCommandEventFunc(iCmd)执行
document.getElementById("MxDrawXCtrl").DoCommand(1);
}
定义一个控件命令执行函数:
function DoCommandEventFunc(iCmd)
{
     if (iCmd == 1) 
     {
          // 绘直线代码
var mxOcx = document.all.item("MxDrawXCtrl");
        mxOcx.focus();
var point1 = mxOcx.GetPoint(false,0,0,"\n 点取开始点:");
if(point1 == null)
{
      return;
}
var point2 = mxOcx.GetPoint(true,point1.x,point1.y,"\n 点取结束点:");
if(point1 == null)
{
      return;
}
         // 直线的id
         var lineId = mxOcx.DrawLine(point1.x,point1.y,point2.x,point2.y);
}
}


设置命令执行函数到控件属性如下:


document.getElementById("MxDrawXCtrl").ImplementCommandEventFun = 
DoCommandEventFunc;


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312;no-cache">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>MxDraw控件</title>


</head>

<body topmargin="0" leftmargin="0">



<p>
<input type="button" value="绘制直线" onclick="myclick()">


</p>


<p align="center">

   <object classid="clsid:74A777F8-7A8F-4e7c-AF47-7074828086E2" id="MxDrawXCtrl"  codebase="http://www.mxdraw.com/MxDrawX52.CAB#version=7.0.0.1" width=100% height=90%> 
  	   <param name="_Version" value="65536">
  	   <param name="_ExtentX" value="24262">
  	   <param name="_ExtentY" value="16219">
  	   <param name="_StockProps" value="0">
	    <param name="IsRuningAtIE" value="1">
	    <param name="EnablePrintCmd" value="1">
	    <param name="ShowStatusBar" value="1">
	    <param name="ShowMenuBar" value="1">
	    <param name="ShowToolBars"  value="1">
	    <param name="ShowCommandWindow" value="1">
	    <param name="ShowModelBar" value="1">
	    <param name="Iniset" value="AutoActive=N,LoadMrx=PropertyEditor">
        <param name="ToolBarFiles" value="MxDraw-ToolBar.mxt,MxDraw-ToolBar-DrawParam.mxt,MxDraw-ToolBar-Draw.mxt,MxDraw-ToolBar-Edit.mxt">
<SPAN STYLE="color:red">不能装载CAD控件。请确认你可以连接网络或者检查浏览器的选项中安全设置。<a href="http://www.mxdraw.com/MxDrawX52.msi">http://www.mxdraw.com/MxDrawX52.msi 安载CAD控件</a></SPAN>
  </object>
<script>

function myclick()
{
        
	//  下面的DoCommand(1)调用程序将跳到DoCommandEventFunc(iCmd)执行
	document.getElementById("MxDrawXCtrl").DoCommand(1);
}


function DoCommandEventFunc(iCmd)
{
    	if (iCmd == 1) 
    	{
		var mxOcx = document.all.item("MxDrawXCtrl");
       		mxOcx.focus();
		var point1 = mxOcx.GetPoint(false,0,0,"\n 点取开始点:");
		if(point1 == null)
		{
	   	 	return;
		}
		var point2 = mxOcx.GetPoint(true,point1.x,point1.y,"\n 点取结束点:");
		if(point1 == null)
		{
	   	 	return;
		}
                // 直线的id
                var lineId = mxOcx.DrawLine(point1.x,point1.y,point2.x,point2.y);

                // 为新写的直线写一个字符串扩展数据
                var database = mxOcx.GetDatabase();
                var ent = database.ObjectIdToObject(lineId);

               
        	
		
	}
      
}

document.getElementById("MxDrawXCtrl").ImplementCommandEventFun = DoCommandEventFunc;
</script>

</p>



</html>

 


在QQ,360浏览器的极速模式(Chrome内核模式)下运行控件


控件提供NPAPI的插件模块,NPAPI dll在控件MxDrawX.ocx所在目录下,名为npactivex.dll,修改注册表路径:值如下,注意xxxpath替换成你本机上npactivex.dll所在路径:


[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\MozillaPlugins\@mxdraw.com/saleinfo]

"Description"="MxDraw  plugin"

"Path"="xxxpath\\npactivex.dll"

"ProductName"="MxDraw  plugin"

"Version"="1.0.0.0"


[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\MozillaPlugins\@mxdraw.com/saleinfo\MimeTypes]


[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\MozillaPlugins\@mxdraw.com/saleinfo\MimeTypes\application/mxdraw-activex]

"Description"="MxDraw  plugin"


或者,运行Bin\vc100\RegistMxDrawX.exe,点击注册按钮,自动完成注册表修改,然后用浏览器打开samples\ie\iedemoTest.htm,或者直接打开网址:http://www.mxdraw.com/iedemoqq360.html


界面如下:


360.png


Chrome浏览器下运行控件


当前谷歌浏览只支持4.5版前的版本,下面用的到插件我们有离线安装包,如需要可以联系QQ:827867134,如果公司项目如果一定要用最新的Chrome浏览器,我们建议你们使用QQ浏览器极速模式,他们使用的是最新Chrome内核。


  1. 1.chrome4.5版前得版本安装一个扩展就可以使chrome支持activex了,名字叫ActiveX for Chrome。

    下载地址:https://chrome.google.com/extensions/detail/lgllffgicojgllpmdbemgglaponefajn/


2.把需要访问的网址,加入插件设置中,点击“选项”,界面如下:


chrome扩展选项.png


3. 把需要访问的网址,加入插件设置中,界面如下:


chrome添加.png


4.运行效果,界面如下:




修改服务器设置,支持dwg文件下载


运行ISS管理器点击网站对象,点击Default Web Site,界面如下:


第一步设置.png


点击“MIME类型”按钮,界面如下:


第二步设置.jpg


点击右边界面中的“添加”按钮,添加文件扩展名为.dwg,界面如下:


第三步设置       


点击“确定”后,列表中出现如下字符则表示添加成功,界面如下:


成功.jpg

MxDraw
MxDraw是由梦想凯德基于AutoDesk CAD平台开发的软件,拥有完全自主的核心技术和知识产权。MxDraw致力于为各企业提供最优秀的CAD平台整体解决方案。
技术服务
TEL:400-888-5703
185-8173-1060
QQ:827867134,6884123
产品购买
TEL:400-888-5703
185-8173-1060
QQ:827867134,6884123
用户交流
QQ群1:827867134
QQ群2:827867134
QQ群3:827867134