SVG技术在存储Tribon图纸中的研究

来源：互联网发布：linux ab url参数编辑：程序博客网时间：2024/05/12 09:23

SVG技术在存储Tribon图纸中的研究

by eattonton

摘要：传统CAD设计图纸的互联网化已经是个不可逆的趋势。Tribon作为应用最广泛的船舶设计软件之一，系统里面保存的图纸格式有限，且不能很顺畅的转换成其它格式。尤其在互联网化得今天，尤其显得很多不足。随着HTML5以及新的浏览器技术的出现，其中SVG作为一种矢量图显示技术的出现，给CAD图纸的显示带来的一种新的解决方法。此片文件将研究Tribon和SVG在图纸显示方面的关键技术。

关键词：Tribon，SVG，图纸

1. SVG概述

随着HTML5技术的发展，在浏览器中显示图形变得更加的丰富。除了以往在浏览器中以位图光栅的方式显示图片，现在可以使用矢量图进行显示。相比位图，矢量图已经在工程CAD设计领域得到广泛使用，并被业界所认可。现在借助HTML5技术，可以实现矢量图的显示，将使CAD设计的图纸从桌面，转变为互联网。这将是一种全新的数据交互方式。

在HTML5中可以使用SVG和canvas元素，进行矢量图的绘制。由于canvas是一个元素，内部提供了很多绘图接口。Canvas更像一种平台，而我们这里是讨论一种格式，存储Tribon中的图纸。所以选择SVG技术更加的合适。

可缩放矢量图形(Scalable Vector Graphics，简称SVG)是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法)。 SVG允许三种类型的图形对象：矢量图形形状（例如由直线和曲线组成的路径）、图像和文本。可以将图形对象（包括文本）分组、样式化、转换和组合到以前呈现的对象中。SVG 功能集包括嵌套转换、剪切路径、alpha 蒙板和模板对象。

　　SVG绘图是交互式和动态的。例如，可使用脚本来定义和触发动画。这一点与Flash相比很强大。Flash是二进制文件，动态创建和修改都比较困难。而SVG是文本文件，动态操作是相当容易的。而且，SVG直接提供了完成动画的相关元素，操作起来非常方便。

　　SVG与其他Web标准兼容，并直接支持文档对象模型DOM。这一点也是与HTML5中的canvas相比很强大的地方(这里注意，SVG内部也是用一个类似的canvas这样的东西来展示SVG图形，到后面你会发现很多特性和HTML5的canvas还有点像；文中如果没明确说明是SVG的canvas的话，都代指HTML5中的canvas元素)。因而，可以很方便的使用脚本实现SVG的很多高级应用。而且SVG的图形元素基本上都支持DOM中的标准事件。可将大量事件处理程序(如“onmouseover”和“onclick”)分配给任何SVG图形对象。虽然SVG的渲染速度比不上canvas元素，但是胜在DOM操作很灵活，这个优势完全可以弥补速度上的劣势。

SVG既可以说是一种协议，也可以说是一门语言；既是HTML的一个标准元素，也是一种图片格式。SVG并不是HTML5中的东西，但是也算页面时兴的技术之一。

2. SVG关键技术

2.1 独立SVG文件

独立SVG指的是通过使用svg文件扩展名来提供向量图形文件格式。在浏览器中嵌入这个svg文件就可以使用了。

2.1.1 独立的SVG文件/页面，定义的模板基本就像下面的一样：

把这样的文本文件保存成以svg为扩展名的文件，例如sun.svg，这样的文件可以直接用浏览器打开浏览，也可以作为引用嵌入到别的页面中。

2.1.2 HTML引用外部的SVG文件。

使用object或者img元素嵌入svg图形就可以了，例如下面的小例子：

<!DOCTYPE html>
<html>
<head>
  <title> My First SVG Page</title>
</head>
<body>
  <object data="sun.svg" type="image/svg+xml" width="300px" height="300px">
    
    <p>Your browser does not support SVG - please upgrade to a modern browser.</p>
  </object>
  <img src="sun.svg" alt="svg not supported!" />
</body>
</html>

2.2 图形的绘制

2.2.1 路径 - path元素

这个是最通用，最强力的元素了；使用这个元素你可以实现任何其他的图形，不仅包括上面这些基本形状，也可以实现像贝塞尔曲线那样的复杂形状；此外，使用path可以实现平滑的过渡线段，虽然也可以使用polyline来实现这种效果，但是需要提供的点很多，而且放大了效果也不好。这个元素控制位置和形状的只有一个参数：

d：一系列绘制指令和绘制参数(点)组合成。

绘制指令分为绝对坐标指令和相对坐标指令两种，这两种指令使用的字母是一样的，就是大小写不一样，绝对指令使用大写字母，坐标也是绝对坐标；相对指令使用对应的小写字母，点的坐标表示的都是偏移量。

(a).指令M,参数x y，将画笔移动到点(x,y);

(b).指令L,参数x y，画笔从当前的点绘制线段到点(x,y);

(c).指令A,参数rx ryx-axis-rotation large-arc-flag sweep-flag x y，画笔从当前的点绘制一段圆弧到点(x,y)。具体参数说明如下：

rx,ry 是弧的半长轴、半短轴长度；

x-axis-rotation 是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数代表顺时针转动的角度。但是固定为0，好奇怪的一个参数；

large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线。由于Tribon中的圆弧都是小角度，所以我们这里固定为0就行了；

sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向。Tribon中用幅值Amplitude的正负表示方向，Amplitude小于零表示顺时针，大于零表示逆时针；

x,y 是弧终端坐标。

2.2.2 文本 - text元素

SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度，而无须求助图像或其它插件。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。尽管SVG的文本渲染如此强大，但是还是有一个不足之处：SVG不能执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。

此外，可以使用 tspan 元素可以将文本元素分成几部分，允许每部分有各自的样式。

还有，在text元素中，空格的处理与HTML类似：换行和回车变成空格，而多个空格压缩成单个空格。如果想保留多个空格，可以在text元素的属性里面加入 xml:space='preserve'。

在图纸中文字的旋转，缩放是很正常的事情。在SVG中提供了transform这个属性，通过transform='matrix(a b c d e f)' 这个属性值的计算可以很方便的对文字进行旋转，缩放，移动的变换。

3. Tribon图纸存储为SVG格式

3.1 线段的绘制

Tribon的线段有直线，圆弧，多段线(直线+圆弧)。在转换成SVG格式的过程中，主要考虑直线和圆弧两种，因为多段线只是直线和圆弧的集合。直线可以理解，关键是圆弧。由于Tribon中的圆弧通过幅值Amplitude控制弧度值，并且幅值Amplitude的正负表示方向，Amplitude小于零表示顺时针，大于零表示逆时针。还要计算半径等值。计算完成后在进行转换。

3.2 文字的显示

Tribon中的文字是记录在一个Text类中，里面有文字的内容，高度，长宽比，位置，字体，旋转角度等信息。在SVG中也有类似的属性设置，不过这里要注意的是字体的位置，长宽比，旋转角度信息是通过SVG中的transform='matrix(a b c d e f)'来控制的。所以在转换的时候需要进行一个变换计算。

3.3 程序实现

下面就是一个根据Tribon中绘制的套料图，生成SVG之后。在浏览器中显示的界面。矢量图的显示，清晰明了。能够很完整的复原Tribon图纸的信息，并且可以随意的缩放，并在互联网中进行发布。

4. 小结

在一切事物都数字化得今天，图纸的数字化已经有很强大的基础。唯一遗憾的是以前的图纸无法在互联网这个平台有效的进行传播，也就是说电脑中设计的图纸，往往需要转成图片，再上传到互联网上进行查看。这样做并无多大益处。图纸的在线化，已经是互联网的趋势。通过上面的技术分析，借助SVG这种矢量图显示技术，传统的CAD设计软件设计的图纸也能够借助互联网平台，在设计，施工，管理中发挥更为强大的作用。

有兴趣的也可以email: eattonton@qq.com

0 0