2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析 第十一篇 绘画系统分析（2）：渐变（Gradient）

2021SC@SDUSC

今天来看一下绘画系统的第二个部分“渐变”，这一部分主要有三个文件组成，借由这三个文件来实现我们平时见到的颜色渐变的同类功能。

首先就是渐变主文件

var Gradient = function Gradient(colorStops) {
  this.colorStops = colorStops || [];
};

一开头是一个非常常见的声明，当获取到该指令时便会调用渐变。

Gradient.prototype = {
  constructor: Gradient,
  addColorStop: function addColorStop(offset, color) {
    this.colorStops.push({
      offset: offset,
      color: color
    });
  }
};

然后就是构造梯度，定义colorstop（颜色渐变）的基本参数，color是颜色参数，offest来表示位置，也就是在渐变过程中特定位置的颜色。

这个js文件主要提供了渐变的基本参数定义和调用功能。

而剩下的两个文件分别是两种渐变方式：线性梯度（linear gradient）和径向梯度（radial gradient）

线性梯度顾名思义就是从原位置向特定方向进行颜色渐变。

var LinearGradient = function LinearGradient(x, y, x2, y2, colorStops, globalCoord) {
 
  this.x = x == null ? 0 : x;
  this.y = y == null ? 0 : y;
  this.x2 = x2 == null ? 1 : x2;
  this.y2 = y2 == null ? 0 : y2; 

  this.type = 'linear'; 

  this.global = globalCoord || false;
  Gradient.call(this, colorStops);
};

在此构造函数中不应再执行任何操作。因为渐变可以通过'color:{type:'linear'，colorStops:…}`来声明，其中将不调用此构造函数。

其中规定了总共六个参数，前四个参数分别是 x, y, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置且会调用该函数，其中x,y,x2,y2在判断不为空的情况下导入且可以被克隆。最后在重新调用dradient，将this中的参数和颜色渐变参数导入实现颜色渐变。

接着就是径向渐变，也就是从圆心开始向四周进行扩散式的渐变。

var RadialGradient = function RadialGradient(x, y, r, colorStops, globalCoord) {

  this.x = x == null ? 0.5 : x;
  this.y = y == null ? 0.5 : y;
  this.r = r == null ? 0.5 : r; 
  this.type = 'radial'; 

  this.global = globalCoord || false;
  Gradient.call(this, colorStops);
};

同样的，在此构造函数中也不应再执行任何操作。因为渐变依旧可以通过'color:{type:'radial'，colorStops:…}`来声明，其中将不调用此构造函数。前三个参数分别是圆心 x, y 和半径，取值同线性渐变，但是，这里是的 globalCoord 缺省为 false，此时该三个值是绝对的像素位置。最后在重新调用dradient，将this中的参数和颜色渐变参数导入实现颜色渐变。

渐变的内容就这么多，主要是参考了echart的渐变功能，同样的使用了echart的渐变模块来实现自身的功能，因此实现的比较容易。