JavaScript 的新领域 - 动态图片处理（SVG）-1

look_w

背景当 JavaScript 被 Netscape 公司发明出来时，它被用来做一些琐细的事情，比如校验表单、计算日期、提示用户；随着 Web 的迅速发展，这种轻巧而灵活的语言被委以越来越多的任务，动态地修改页面内容，一致地处理事件，甚至无刷新地和服务器交互。然而，与传统的客户端编程相比，JavaScript 操作的对象限制在 DOM 模型之内，无法进行图形编程。所以长久以来，我们在设计网页时都仅仅是在“搭积木”，而且这些积木只有一种形状——长方形。这些长方形的积木就是应用在 HTML 元素上的“盒子”模型（box model）。每个盒子有边框 （border），边缘（margin）和填充（padding）。我们只能控制这些盒子的大小和有限的样式。这些方块的集合对于构建一个传统的文档页面已经足够了。但是 Web 的流行已经使网页承担的任务远远超出了传递文字信息。哪里有流行，哪里就有需求，哪里也就有创新。网页的美工设计已经使静态页面的美观程度丝毫不逊色于传统的客户端程序的界面。而创造更加互动的用户界面更是使在页面上创建和修改图片的可能十分吸引人。于是，两种技术应运而生，使得 JavaScript 的功能扩展到图形领域。
数字化图片的两种方案在介绍这两种技术之前，我们先来看看图片的数字化。将图片存储为数据有两种方案。其一为位图，也被称为光栅图。即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。每个点发出的光有独立的频率和强度，反映在视觉上，就是颜色和亮度。这些信息有不同的编码方案，在互联网上最常见的就是 RGB。根据需要，编码后的信息可以有不同的位 (bit) 数——位深。位数越高，颜色越清晰，对比度越高；占用的空间也越大。另一项决定位图的精细度的是其中点的数量。一个位图文件就是所有构成其的点的数据的集合，它的大小自然就等于点数乘以位深。位图格式是一个庞大的家族，包括常见的 JPEG/JPG, GIF, TIFF, PNG, BMP。
第二种方案为矢量图。它用抽象的视角看待图形，记录其中展示的模式而不是各个点的原始数据。它将图片看成各个“对象”的组合，用曲线记录对象的轮廓，用某种颜色的模式描述对象内部的图案（如用梯度描述渐变色）。比如一张留影，被看成各个人物和背景中各种景物的组合。这种更高级的视角，正是人类看世界时在意识里的反映。矢量图格式有 CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML 等等。
矢量图中简单的几何图形，只需要几个特征数值，就可以确定。比如三角形，只需要确定三个顶点的坐标。圆只需要确定圆心的坐标和半径。描述它的函数已知的曲线也只需要几个参数就能够确定。如正弦曲线、各种螺线等等。如果用位图记录这些几何图案，则需要包含组成线条的各个像素的数据。除了大大节省空间，矢量图还具有完美的伸缩性。因为记录的是图形的特征，图形的尺寸任意变化时，都只是做着相似变换，不会出现模糊和失真。相反位图的图片放大到超出原有大小时，各个像素点之间出现空缺，即使用某种算法填充，也会出现模糊锯齿等现象，不如矢量图精确。因而矢量图很适合用于记录诸如符号、图标等简单的图形。而位图则适合于没有明显规律的、颜色丰富细腻的图片。