[转CSDN多篇文章]WEB 3D SVG CAD 矢量 几种实现方案

WEB 3D SVG CAD 矢量 几种实现方案

原创 2014年10月24日 08:34:11

一、全部自己开发，从底层开始

VML+SVG开发矢量地图，不需要导入第三方图片作为背景，直接在地图编辑里可以编辑基础地图内容，如进行岩石、巷道、煤层、水域等绘画，在画好基础地图样子再在其上面画出智慧线等设备，所有操作显示等都用SVG来实现，形成的SVG地图自然就是纯矢量地图。

二、基于WEBGL和3DMAX开发

WEBGL+3DMAX开发3D效果，WEBGL是从OpenGL演进来的WEB上展示3D效果的技术，可以用3DMAX像开发3D游戏场景一样开发立体3D场景，在WEB上可以使用WEBGL显示3D地图。

三、基于VectorDraw开发

 VectorDraw开发矢量+3D，VectorDraw是一个矢量3D图形库，是欧美一个小公司开发的比较不错的关于矢量画图的一些工具和类库等，不仅可以打开CAD文件还支持其他矢量对象在任何支持HTML5平台上显示。

四、基于Flash开发

Flash开发矢量+3D，Flash发展历史比较悠久，功能比较强大是网页上显示语音动画等首选，近年来随着Flash的发展其功能也日渐强大，有不少2D地图和3D动画等使用Flash开发，效果也很好。

五、基于kabeja类库开发

kabeja是一个欧美公司开发的关于矢量CAD等图和矢量SVG等转换的JAVA类库，目前该类库最新版本时0.4，并且08年以后没有更新，但该类库功能依旧比较强大，如可以实现CAD到PDF、SVG、JPG等等的后台转换，由于该类库是JAVA类库刚好可以和大多数WEB开发的JAVA互相使用。唯一遗憾的是kabeja资料甚少，国内几乎没有，国外也是有的可怜，如果要用kabeja开发，首先要看懂kabeja的源码。

 ------------------------------------------------------------------

网页调用AutoVue浏览DWG文件

发表于2013 年 10 月 21 日由boitboy

能打开所有3D文件AutoVue SolidModel Pro 19.3中文绿色特别版 能直接打开所有的3D图档 ，包括：ProEngineer、Unigraphics、SolidWorks、Catia、SolidEdge、Autodesk等各种软件的3D文件。支持超过400种不同档案的档案格式，包括2D & 3D、CAD、EDA、office文本

通过下面的代码我们可以在网页中调用AutoVueX.ocx

浏览CAD的DWG文件

<html>
<head>
</head>
<body>
<object id=”xxxx” visible=”true” classid=”CLSID:B6FCC215-D303-11D1-BC6C-0000C078797F” type=”application/x-oleobject” width=”800″ height=”600″>
<param name=”SRC” value=”test.dwg”> 
</object>
</body></html>

注意test.dwg表示需要浏览的DWG文件的路径，支持网络路径

AutoVue19.3下载:http://pan.baidu.com/s/1taCQN

-------------------------------------------------------------------------

SVG简介

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 
SVG 使用 XML 格式定义图像。

SVG与其他图像格式相比，SVG的优势在于

  • SVG 可被非常多的工具读取和修改（比如记事本）
  • SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
  • SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
  • SVG 可以与 Java 技术一起运行
  • SVG 是开放的标准
  • SVG 文件是纯粹的 XML

一个简单的SVG实例

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >

<svg xmlns="http://www.w3.org/2000/svg" width="130" height="80" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="rgb(0,100,255)" stroke-opacity="0.5" fill-opacity="0.5" />
</svg>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

这里写图片描述

  • 第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是”独立的”，或含有对外部文件的引用。 
    standalone=”no” 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

  • 第二行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“。该 DTD 位于 W3C，含有所有允许的 SVG 元素（DTD，即文档类型定义，作用是定义 XML 文档的合法构建模块）省略该行对显示并不会有影响。

  • SVG 代码以 元素开始，包括开启标签 和关闭标签 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

使用SVG

SVG可以单独显示

  • 完整版如上例所示
  • 最简的SVG形式，除了“SVG标签”和“xmlns名空间”其他声明标签均可省略。
<svg xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="100" style="fill:red;stroke-1;stroke:black"/>
</svg>
  • 1
  • 2
  • 3

SVG可以嵌入HTML中显示

嵌入的方式有7种，分别是：

  • 代码直接嵌入
  • <img>链接方式引用
  • <a>链接方式引用
  • CSS的background属性引用
  • <embed>
  • <object>
  • <iframe>

代码直接嵌入

<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg">
            <line x1="0" y1="0" x2="200" y2="200" style="stroke-1;stroke:black"/>
        </svg>
     </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

<img>链接方式引用

<html>
    <body>
    <img src="svgDemo.svg" width="100" height="100"/>
    <img src="svgDemo.svg"/>
    </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

结果如图（左为Chrome、右为Microsoft Edge） 
这里写图片描述

在Chrome浏览器中可以看出，<img>标签的默认大小是 300 x 150。 
这里写图片描述

<a>链接方式引用

该方法只会显示链接文本，只有当用户单击链接，才能跳转至SVG图像。

<html> 
    <body> 
        <a href="test.svg">转到SVG图像</a>
    </body> 
</html>
  • 1
  • 2
  • 3
  • 4
  • 5

这里写图片描述

CSS的background属性引用

<html> 
    <body> 
        <div style="500;height:500;background:yellow url(test.svg) repeat"/>
    </body> 
</html>
  • 1
  • 2
  • 3
  • 4
  • 5

这里写图片描述

<embed>、<object>、<iframe>

<html>
    <body>
        <embed src="svgDemo.svg" type="image/svg+xml" /> 
        <object data="svgDemo.svg" type="image/svg+xml" /> 
        <iframe src="svgDemo.svg" />
    </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

结果如下图所示

这里写图片描述

这里写图片描述

从图中可以看出，在当前版本的Chrome浏览器中

  • <embed>标签默认的大小是 300 x 150
  • <object> 标签默认的大小是 300 x 150
  • <iframe>标签默认的大小是 304 x 154，因为iframe有边框，边框线宽是 2。

这都说明了：在我的Chrome浏览器上svg矢量图形默认的大小是 300 x 150，如果矢量图像大于该值，会被裁剪。

另外还需要注意的一点是：即使都是Chrome浏览器也会因不同版本而给svg设置不同的默认大小，所以为了确保图像能正常显示，最好手动给svg指定width和height属性。

-----------------------------------------

最近做客户项目，客户需要CAD图形显示于Web上，看了好多的方案，要么用AutoCAD的接口开发，要么用第三方的ActiveX开发，还有一款AutoVue能看各种图形，但是价格灰常贵，按客户端数量购买，这这就不符合客户的需要。

找了一圈，发现了一个基于HTML5技术的VectorDraw web library组件，无需客户端，能实现简单在线编辑，支持浏览时的放缩，看起来效果还不错。

由于基于HTML5，所以还能在移动设备上浏览CAD图形。

但DWG和DXF文件格式过于复杂，必须把原先的DWG和DXF等转换成VDS文件。

大家需要看在线演示的可以看这里：http://www.vdraw.com/javascript-examples/vectordraw-javascript-samples/

其它的资料

VectorDraw Developer Framework (VDF) 是一个CAD图形引擎库，程序员可用于其应用程序的可视化。 通过所提供的功能，用户可以很轻松的创建、编辑、管理、导出和导入以及打印2D/3D的图形和图形文件。它广泛应用于ERP、文档管理、CAD/CAM /CAE应用程序、GIS和地理应用程序、CNC机器、空间&资源管理和任何需要矢量或栅格图形友好输出的应用程序。

VectorDraw支持以下这些格式的矢量和栅格图像的输入和输出：DWG, .DXF, .DGN, .WMF, .EMF, .VDML, .VDCL, .BMP, .JPG, .TIFF, .GIF, .PNG, .TGA。以下这几种格式只支持输出：.PDF, .DWF, .SVG, .HPGL。

部分功能：

  • 3D 轨道
  • 缩放和平移
  • 3D视图
  • 过滤器对象
  • 支持UCS
  • 内置格式(VDML, VDCL)
  • 支持自定义对象和自定义操作
  • 自定义图形对象
  • 对真彩色的支持
  • 本地DXF导入/导出
  • 支持本地 SVG 和PDF的导出
  • 所有资源可以全球化
  • 可合并XREF的(外部引用)实体和依赖符，作为当前绘制的一部分
  • 支持不对称公差、尺寸覆盖值和格式化的尺寸文本
  • Hatch Pattern对象（有63种）
  • 导出常数值，便于Vectordraw对象和编程的管理
  • 支持的格式包括DWG/DXF(2010以上）、DGN (v8）、DWF格式（采用VectorDraw File Converter转换)
  • 大量的用户编辑命令（如移动、删除、旋转、修剪、复制等）
  • 二维曲线组合(排除、相交、结合、Exclusive Disjunction XOR)
  • 支持各种编程环境(Visual Studio 2010 , 2008 , 2005 , Delphi , Visual Basic 6 , C++ 6)

3D室内设计图

VectorDraw Developer Framework (VDF)示例下载

3D功能：

    • 呈现类型：Wire 2D、Wire 3D、Hide、Shade、Shade On、Render(applying materials, transparency & lights)
    • 视图：透视、垂直
    • 灯光、3D部分剪切、透明、多用户坐标系
    • vdGroundSurface Object支持Mapped Images Over Surfaces，以生成一个Photorealistic Ground Surface Using Aerial Photos
    • 用Delanay算法计算一列点的表面和Countour水平
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liangqihui/p/8446279.html