从零手撕一个网页版图形编辑器之线性渐变（4）

longx13

已于 2024-06-25 08:02:42 修改

阅读量853

点赞数 29

文章标签：编辑器 canva可画 javascript

于 2024-06-23 16:16:21 首次发布

本文链接：https://blog.csdn.net/longx13/article/details/139899658

版权

本编辑器（土豆猫图形编辑器）社区版代码已开源，开源库地址：
https://gitee.com/longhan13/lgxmap_community.git
https://gitcode.com/longx13/lgxmap_community.git

本编辑器（土豆猫图形编辑器）专业版已发布到个人网站：

土豆猫图形试验台

正文开始之前，先安利CSDN的一个好东西：inscode,可以在线编辑、在线发布、在线运行。为了便于大家相互学习交流，我把本编辑器社区版后台功能做了阉割，做成了一个学习版，已发布在inscode上，大家可以直接线上体验，线上修改代码，在线看到效果，非常方便（本文的截图都是用它画出来的）地址：InsCode - 让你的灵感立刻落地

矢量图形中，用于填充封闭区域有多种方式：实体填充、图案填充、渐变填充，渐变填充又分线性渐变填充和辐射渐变填充。本文讲解本编辑器中经常用到的一种填充模式：线性渐变填充。效果如下图：

图1 渐变填充效果实例

我们首先看canvas渐变填充createLinearGradient定义：createLinearGradient(x0, y0, x1, y1)-创建一个从起点（x0,y0）到终点（x1,y1）的线性渐变填充，返回一个线性CanvasGradient对象，创建对象成功后，再调用返回对象的CanvasGradient的addColorStop（offset,color）来创建渐变光圈，所谓光圈就是一个用户指定的颜色，canvas绘制时就在相邻光圈指定的颜色中按canvas颜色渐变算法进行渐变，offset是一个从0到1的浮点数，表示从起点（x0,y0）到该光圈处的距离相对于整根渐变线段（由（x0,y0）到（x1,y1）决定）长度比，等于0表示起点，等于1表示终点，等于0.5则表示中点（(x0 + y0)/2,(x1 + y1)/2）,以此类推。例如下面这段代码就可以绘制出一根类似圆柱效果的矩形来：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let gradient = ctx.createLinearGradient(0, 0, 50, 0);
gradient.addColorStop(0, "blue");
gradient.addColorStop(0.5, "white");
gradient.addColorStop(1, "pink");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 50, 300);

讲到这里，如果只是为了解渐变原理，那就够了，但实际的图形软件应用中，渐变填充是图形对象的一个属性或属性值（本编辑器中线性渐变是填充属性的一个取值），例如图形发生了移动、旋转、缩放等行为，相应地，渐变也要跟着变化，所以我们了解其原理后还要知道怎么把它真正应用到自己的项目中，本文的下面章节将讲解本编辑器的实现方式。

首先，我们把渐变作为一个类对象定义出来（下面是代码局部，完整代码见：script/canvas/common/struct/fillinfo）：

class GradientInfo {
constructor() {
let red = new lgxcom.LGXColor();
red.setVal(255, 0, 0);

toJson();//转为json对象以备后面持久化，具体代码省略
fromJson(jsonobj);//从持久化的json对象转为一个线性渐变填充对象，具体代码省略

//设置线性渐变的默认起点、终点坐标
//参数：refGraph是本渐变类对象所影响的图形对象
setStopDefaultPos(refGraph) {
let localZone = refGraph.getLocalZone();//获得图形矩形包围盒
this.stPt.x = localZone.left;//默认起点为左上角
this.stPt.y = localZone.top;

this.endPt.x = localZone.right;//默认终点为右上角
this.endPt.y = localZone.top;
this.userSetPosFlag = true;
}

//设置渐变光圈参数
setStop(stopArr) {
if (!stopArr) {
return;
}
this.stopColorArr = [];
for (let i = 0; i < stopArr.length; i++) {
let t = stopArr[i];
let proprotion = t.stop;
let colorVal = t.color;
let colorObj = new lgxcom.LGXColor();
colorObj.setColorByValue(colorVal);
this.stopColorArr.push({ stop: parseFloat(proprotion), color: colorObj });
}
}
}

然后我们再定义一个填充对象类，渐变作为填充的一个属性值存进去（下面是代码局部，完整代码见：script/canvas/common/struct/fillinfo）：

class LGXFillDefInfo {
constructor() {
this.fillStyle = LGXEnums.LGXFillStyle.EMPTY;
this.fillColor = new lgxcom.LGXColor();
this.fillColor.setVal(255, 0, 0);
this.gradientInfo = null;
}
}

以上类定义完成后，我们就可以在实际绘图中生成图形后（例如在画布上鼠标拖动生成一个矩形），为该图形的填充对象（_fillDef）中渐变属性（gradientInfo ）赋值：

graph._fillDef.gradientInfo = new GradientInfo()，并根据实际需要票配置相应起始点、终止点、以及光圈参数，最后在刷新流水线中，绘制该图形时，使用相应的填充参数调用canvas API显示出来。下面代码是本编辑器的实现代码片段（完整代码请见：script/canvas/graph/paintutil/fillutil.js）

FillUtil.active = function (fillDef, canvasCtx, graph, mapinfo, isPaintSybolUnitFlag, transformInfo) {

let grd = null;

let fillGradientInfo = fillDef.gradientInfo;

let mtx = graph.getLocalMatrix();//获得渐变绑定的图形对象的局部坐标系

let localP1 = fillGradientInfo.stPt;

let localP2 = fillGradientInfo.endPt;

//局部坐标转世界坐标

let worldPt1 = mtx.MultT({ x: localP1.x, y: localP1.y, z: 0 });

let worldPt2 = mtx.MultT({ x: localP2.x, y: localP2.y, z: 0 });

let p1 = worldPt1;

let p2 = worldPt2;

if (p1 && p2) {