网页上用idrop控件做个DWG文件库

我觉得idrop是个好用又容易使用的东西。如果在网页上（或者对话框）上用idrop来放一些DWG文件，你就可以通过轻轻地一拽就可以把DWG文件拽进运行着的AutoCAD里并打开DWG文件。不仅仅是DWG格式，idrop也支持Revit文件和3D Max的文件。下面我给大家做个例子。

首先看看执行的效果：

左边是个网页（.htm文件），上面用idrop控件放置了一些DWG文件。右边是运行着的AutoCAD 2010，里面打开了从左边的网页上拽近来的文件（一张椅子）。

下面我介绍实现步骤：

第一步，我们先制作好自己的网页，比如我下面用到的idrop_dwg.htm，在网页里插入一个表格，在每个格子里插入idrop控件，并设置参数，例如：

 

[xhtml] view plaincopy

1. <object name="idrop" classid="clsid:21E0CB95-1198-4945-A3D2-4BF804295F78" style="height: 165px; width: 173px">  
2.               <param name="background" value="background.jpg">  
3.               <param name="proxyrect" value="0,0, 173,165">  
4.               <param name="griprect" value="0, 0, 173,165">  
5.               <param name="package" value="data/chair/chair.xml"/>  
6.               <param name="validate" value="1">  
7.               <embed width="173" height="165" background="background.jpg" proxyrect="0,0, 173,165" griprect="0, 0, 173,165" package="data/chair/chair.xml" validate="1" src="background.jpg" mce_src="background.jpg" name="idrop">  
8.               </embed>   
9.             </object>  

 

上面用到了一个background.jpg，是用在网页上做背景的。我其实就是用了一个白底的空白jpg图片。请注意上面用到的。很显然我们要准备一个叫做data的文件夹，还要有一个chair.xml文件。其实这个文件可以做的很简单，就下面几行：

 

[xhtml] view plaincopy

1. <?xml version="1.0"?>   
2. <package xmlns="x-schema:../idrop-schema.xml">   
3.     <proxy defaultsrc="data/chair/chair.gif"></proxy>   
4.     <dataset defaultsrc="data/chair/chair.dwg">   
5.         <datasrc clipformat="CF_IDROP.dwg">   
6.             <datafile src="data/chair/chair.dwg" mce_src="data/chair/chair.dwg"/>   
7.         </datasrc>  
8.     </dataset>    
9. </package>  

 

这个文件就是把chair.dwg文件嵌入到idrop控件里。请注意里面还用到了一个chair.gif文件。这个文件就是用来在网页上显示用的。还有一个文件idrop-schema.xml是用来定义上面的package的。

 

下一步，你就是要提供上面用到的DWG文件，比如我上面用到的chair.dwg，并且做一个DWG文件的预览图，取名叫chair.gif。idrop-schema.xml也很简单，如下：

 

[xhtml] view plaincopy

1. <?xml version="1.0"?>  
2.   
3. <!-- ********************************************************************** -->  
4. <!-- i-drop package schema                                                  -->  
5. <!--                                                                        -->  
6. <!-- The i-drop package is a description of a high-level "object" that can  -->  
7. <!-- be dropped into an i-drop aware application. The package lists native  -->  
8. <!-- file formats and web page proxy representations.                       -->  
9. <!-- ********************************************************************** -->  
10.   
11. <Schema name="idrop-13mar2000"  
12.     xmlns="urn:schemas-microsoft-com:xml-data"   
13.     xmlns:dt="urn:schemas-microsoft-com:datatypes">  
14.   
15. <!-- ********************************************************************** -->  
16. <!-- Attributes -->  
17.   
18. <AttributeType name="src" dt:type="uri" required="no">  
19.     <description>URL of a source file</description>  
20. </AttributeType>  
21.   
22. <AttributeType name="defaultsrc" dt:type="uri" required="no">  
23.     <description>URL of a default source file</description>  
24. </AttributeType>  
25.   
26. <AttributeType name="clipformat" dt:type="string" required="no">  
27.     <description>Custom defined clipboard format</description>  
28. </AttributeType>  
29.   
30. <AttributeType name="clsid" dt:type="uuid" required="no">  
31.     <description>Class ID of an ActiveX control</description>  
32. </AttributeType>  
33.   
34. <AttributeType name="codebase" dt:type="uri" required="no">  
35.     <description>URL to an ActiveX control distribution (ala object tag in HTML)</description>  
36. </AttributeType>  
37.   
38. <AttributeType name="name" dt:type="string" required="no">  
39.     <description>Name of a parameter (ala object tag in HTML)</description>  
40. </AttributeType>  
41.   
42. <AttributeType name="value" dt:type="string" required="no">  
43.     <description>Value of a parameter (ala object tag in HTML)</description>  
44. </AttributeType>  
45.   
46. <!-- ********************************************************************** -->  
47. <!-- Elements -->  
48.   
49. <ElementType name="package">  
50.     <description>i-Drop XML package file</description>        
51.     <element type="proxy" minOccurs="1" maxOccurs="1"/>     
52.     <element type="dataset" minOccurs="1" maxOccurs="1"/>   
53. </ElementType>  
54.   
55. <ElementType name="proxy">  
56.     <description>Stand-in for the dataset</description>  
57.     <attribute type="defaultsrc" required="yes"/>  
58.     <element type="caption" minOccurs="0" maxOccurs="1"/>  
59.     <element type="img" minOccurs="0" maxOccurs="*"/>  
60.     <element type="activex" minOccurs="0" maxOccurs="*"/>  
61. </ElementType>  
62.   
63. <ElementType name="caption">  
64.     <description>Caption to display with the proxy</description>  
65. </ElementType>  
66.   
67. <ElementType name="img">  
68.     <description>Bitmap image file</description>  
69.     <attribute type="src" required="yes"/>  
70. </ElementType>  
71.   
72. <ElementType name="activex">  
73.     <description>HTML-like definition of an ActiveX control</description>  
74.     <attribute type="clsid" required="yes"/>  
75.     <attribute type="codebase" required="no"/>  
76.     <element type="param" minOccurs="0" maxOccurs="*"/>  
77. </ElementType>  
78.   
79. <ElementType name="param">  
80.     <description>Parameter to an ActiveX control</description>  
81.     <attribute type="name" required="yes"/>  
82.     <attribute type="value" required="yes"/>  
83. </ElementType>  
84.   
85. <ElementType name="dataset">  
86.     <description>Collection of data files to choose from</description>  
87.     <attribute type="defaultsrc" required="yes"/>       
88.     <element type="datasrc" minOccurs="0" maxOccurs="*"/>  
89. </ElementType>  
90.   
91. <ElementType name="datasrc">  
92.     <description>Collection of data files to treat as one</description>   
93.     <attribute type="clipformat" required="no"/>  
94.     <element type="datafile" minOccurs="1" maxOccurs="1"/>  
95.     <element type="xreffile" minOccurs="0" maxOccurs="*"/>  
96. </ElementType>  
97.   
98. <ElementType name="datafile">  
99.     <description>Single data file (may have dependencies)</description>  
100.     <attribute type="src" required="yes"/>  
101. </ElementType>  
102.   
103. <ElementType name="xreffile">  
104.     <description>Externally referenced file</description>  
105.     <attribute type="src" required="yes"/>  
106. </ElementType>  
107.   
108. </Schema>  

 

最后，是把这些文件组织一下并在上面提到的文件中设置好合适的路径。比如在我的实例中用到的文件/文件夹结构如下：

Myidrop

    background.jpg

idrop_dwg.htm

data

chair

chair.dwg

chair.gif

chair.xml

mechanical

datalink.dwg

datalink.gif

datalink.xml

multileaders.dwg

multileaders.gif

multileaders.xml

 

到了这一步就OK了。打开idrop_dwg.htm文件就可以在网页上看你的DWG文件了，在文件上移动鼠标，你会看到一个墨水笔一样的图标，按下鼠标左健并拖动到一个AutoCAD中就可以打开该DWG文件了。

如果你的网页不能显示idrop，可能是你的IE安全设置把ActiveX控件堵住了。我的IE上面会出来一个提示，只要点一下鼠标选择允许堵截的内容，idrop就正确显示出来了。

 

上面用到的DWG文件路径可以某个服务器上的路径，用http就可以了。比如下面这个网站就用了服务器上的路径：

http://www.bouwstudio.nl/idrop.htm

更多关于idrop的内容，请参考http://www.autodesk.com/idrop