猫史档案馆

标题：【极客小课堂】如何做出一个C1连续的贝塞尔曲线，位图和矢图的区别到底是什么？

 

当今计算机大概有两种图像，一种是位图，一种是矢图

位图其实上就是记录下每个像素点的信息，例如52Scr的黑洞云画板

画板的主要原理是把画板变成了一个一个的点，画完后把每一个点整合成数据存放在云列表中。唯一不足就是因为编程猫云的容量太小，所有每个像素点特别大。而且有时还会崩溃，不过这个作品的确很棒

 

但位图也有很多缺点，例如容量的。最致命的就是经不起放大。举个例子

这是一张少院士招募的图片，格式是位图，此时你只要把这张图给放大16倍，你就可以发现他是由像素点组成的。

 

而我们再拿矢图举个例子，我们渲染的网页就是矢图。所以我们将Google搜索框放大5倍看看会怎么样？

 

 

很显然，图片依旧清晰。尤其是搜索框的弧线和字体依旧清晰，这是因为字体（TTF）采用矢图，所以无论放大多少遍都不会出现像素块。而且容量小，而很多字体也只不过是对原字体的稍微改动，所以下载十分快

 

百度对矢图的解释是：

矢量图，也称为 面向对象的 图像或绘图图像，在 数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有 颜色、形状、 轮廓、大小和 屏幕位置等属性。 矢量图是根据几何特性来绘制图形， 矢量可以是一个点或一条线，矢量图只能靠 软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和 分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。     我们可以理解矢图只存储了一些点，而现实矢图就是通过存储的电来推算出原本的图像，这里成为线。 而今天我们说的就是贝塞尔曲线。他通过存储点来还原原本的线，缺点是如果点太多每个点对整条线的控制力度也会变小       贝塞尔曲线当然也分等级，C0，C1，C2，C3   C0，指在P0到P1中做线   C1就很有趣了，他的公式是： 我知道你看不懂，我也看不懂，所以我在jianshu.com找来了张图 你肯定看懂了这张图，如果还是看不懂我来解析下 我们有三个点：P0，P1，P2 而黑点的运动轨迹是绿线的中线，绿线的运动轨迹是在所有的P0到P1中的点和P1到P2中的点连线，而记录黑点运动的红线则是通过P0，P1，P2推算出的C1连续贝塞尔曲线。如果理解了这段话，那我就讲懂了一个你可能大学才会学到的公式   没错，如果只讲这个就太无聊了，我们要在编程猫中实现他   我们先简化下我们的思路： ABC分别对应公式中的P0,P1,P2 我们随机从AB中任意选一个点D，BC线中任意选一个点E，但是AD = BE，我们的职责是遍历所有的点 够了，我们先做吧 因为编程猫算力有限，我们不可能将AB - BC中的点算完，所有每条线平均记录100个点，两条线就是200个点。将这两百个点保存在四个列表中，使命就完成了。   我们利用这段代码，也就是第一张图中的绿线，遍历所有AB-BC的点，连成线，我们差不多久完成了   加以一些修饰，就成为了下面的成品 作品是开源的，希望大家可以做出记录下绿线中间像素运动轨迹的红线，这个作品才算做完。           感谢你可以看到现在，也感谢持续关注【极客小课堂】 Bye~~~     作品链接：https://shequ.codemao.cn/work/46278946