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

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

标签：
WEB3D /
CADSVG /
矢量

2665

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

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文件

注意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>

第一行包含了 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-width:1;stroke:black"/>

</svg>

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-width:1;stroke:black"/>

        </svg>

     </body>

</html>

<img>链接方式引用

<html>

    <body>

    <img src="svgDemo.svg" width="100" height="100"/>

    <img src="svgDemo.svg"/>

    </body>

</html>

结果如图（左为Chrome、右为Microsoft Edge）

在Chrome浏览器中可以看出，<img>标签的默认大小是 300 x 150。

<a>链接方式引用

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

<html>

    <body>

        <a href="test.svg">转到SVG图像</a>

    </body>

</html>

CSS的background属性引用

<html>

    <body>

        <div style="width:500;height:500;background:yellow url(test.svg) repeat"/>

    </body>

</html>

<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>

结果如下图所示

从图中可以看出，在当前版本的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水平

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

WEB 3D SVG CAD 向量几个实施
一.他们所有的发展.从地上爬起来 VML+SVG发展矢量地图.你并不需要导入第三方的图片作为背景,直接在地图编辑器可以在底图内容编辑,由于岩石.巷道.煤层.画水.础地图样子再在其上面画出智慧线等设备, ...
WEB 3D SVG CAD 向量几个实施（转）
一.他们所有的发展.从地上爬起来 VML+SVG发展矢量地图.你并不需要导入第三方的图片作为背景,直接在地图编辑器可以在底图内容编辑,由于岩石.巷道.煤层.画水.础地图样子再在其上面画出智慧线等设 ...
分享关于搭建高性能WEB服务器的一篇文章
这篇文章主要介绍了Centos5.4+Nginx-0.8.50+UWSGI-0.9.6.2+Django-1.2.3搭建高性能WEB服务器的相关资料,需要的朋友可以参考下(http://m.0813s ...
为了确认是您本人在申请搬家，请在原博客发表一篇标题为《将博客搬至CSDN》的文章，并将文章地址填写在上方的"搬家通知地址"中
为了确认是您本人在申请搬家,请在原博客发表一篇标题为<将博客搬至CSDN>的文章,并将文章地址填写在上方的"搬家通知地址"中
在知乎上看到 Web Socket这篇文章讲得确实挺好，从头看到尾都非常形象生动，一口气看完，没有半点模糊，非常不错
在知乎上看到这篇文章讲得确实挺好,从头看到尾都非常形象生动,一口气看完,没有半点模糊,非常不错,所以推荐给大家,非常值得一读. 作者:Ovear链接:https://www.zhihu.com/que ...
Python爬取CSDN博客文章
0 url :http://blog.csdn.net/youyou1543724847/article/details/52818339Redis一点基础的东西目录 1.基础底层数据结构 2.win ...
JAVA爬虫挖取CSDN博客文章
开门见山,看看这个教程的主要任务,就去csdn博客,挖取技术文章,我以<第一行代码–安卓>的作者为例,将他在csdn发表的额博客信息都挖取出来.因为郭神是我在大学期间比较崇拜的对象之一.他 ...
无插件纯web 3D机房（第四季：大型园区、地球仪效果和其他扩展应用）
前言初次见面的朋友们大家好,这篇文章是"无插件纯web 3D机房"系列的第四季,感兴趣的朋友可从头开始观看,以下是正确的阅读顺序: 无插件纯web 3D机房(第一季:从零开始搭建 ...
fw:学好Python必读的几篇文章
学好Python必读的几篇文章 from:http://blog.csdn.net/hzxhan/article/details/8555602 分类: python2013-01-30 11:52 ...

随机推荐

POJ 1287 Networking（最小生成树裸题有重边）
Description You are assigned to design network connections between certain points in a wide area. Yo ...
模拟主库创建数据文件，dg备库空间不足时问题处理
本篇文档测试目的: 模拟实际环境中,主库对表空间添加数据文件,备库空间不足,最终导致MRP进程自动断开,处理方式. 1.问题环境模拟 1)正常情况下的dg 主库创建数据文件,备库接受日志,自动创建表空 ...
12.2 关闭DLM 自动收集统计信息 (SCM0)ORA-00600之[ksliwat: bad wait time]
一.报错日志 db_alert ORA-: ??????, ??: [ksliwat: bad wait time], [], [], [], [], [], [], [], [], [], [], ...
AMM调整为ASMM命令（关闭memory_target自动管理方式）
客户生产系统,AIX oracle 11.2.0.4 数据库版本,2节点RAC. 操作系统内存,均为125G,调整前,使用oracle memory_target自动调整分配方式,memory_max ...
Linux 对文件进行加密存放
/********************************************************************** * Linux 对文件进行加密存放 * 说明: * Gi ...
Python之路，第二十篇：Python入门与基础20
python3 面向对象4 supper 函数 supper(type, obj) 返回绑定超类的实例(要求obj必须为type类型的实例) supper() 返回绑定的超类的实例,等同于(cl ...
paddle——docker实践
Docker image阅读:https://github.com/PaddlePaddle/book/blob/develop/README.cn.md docker run -d -p 8888: ...
由testcase数据之分析
一.获取data来源 1.利用openpyxl从excel表格获取数据,相较于xlrd,openpyxl可以将表格里的样式也传递过来的优势 xlrd ----------------- ht ...
Bow and Arrow Rigging in Blender
https://www.youtube.com/watch?v=jpsd0Aw1qvA 新建骨架,由如下图3部分组成: Bone.000.Top ~ Bone.015.Top (上半部分16节骨骼) ...
mvc core2.1 Identity.EntityFramework Core 配置 (一）
https://docs.microsoft.com/zh-cn/aspnet/core/security/authentication/customize_identity_model?view=a ...

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

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