WEB端线性渐变色取色方法与流程

本发明涉及web端取色领域，尤其涉及一种web端线性渐变色取色方法。

背景技术：

随着web端的功能越来越强大，同时web端应用具有实时更新和免安装的特点，许多站点会把桌面端的功能搬到web端来让用户操作。桌面应用sketch中的取色功能十分强大，用户不仅可以选择单一颜色也可以设置渐变色。web端选择单一颜色的功能已经实现，先需要实现选择渐变色的功能来丰富web应用的功能。目前主流的方案web端取色器仅支持两点渐变取色(起点、终点)，即在页面区域设定渐变起点和渐变终点，取色板获取渐变起点和渐变终端之间区域的色值实现取色，无法实现多点取色功能。

技术实现要素：

本发明的目的是提供一种web端线性渐变色取色方法，以解决现有技术web端无法实现多点取色的问题。

为了达到上述目的，本发明所采用的技术方案为：

web端线性渐变色取色方法，其特征在于：包括以下步骤：

(1)、在sketch取色的目标区域创建两个渐变点，其中一个点作为起始渐变点，另一个点作为结束渐变点；

(2)、sketch后台程序以起始渐变点、结束渐变点两点确定的直线构建滑条，以滑条所在直线建立一维坐标轴，并获取起始渐变点、结束渐变点的初始坐标值；

(3)、监听起始渐变点、结束渐变点的激活和拖动事件，sketch后台程序设定起始渐变点、结束渐变点中触发激活事件的渐变点为激活点，同时sketch后台程序设定激活点仅能沿滑条所在直线拖动，当激活点拖动时由sketch后台程序实时获取激活点的坐标值；

(4)、激活点拖动结束后激活点恢复为起始渐变点或结束渐变点，由sketch后台程序根据拖动结束时激活点的坐标值，得到拖动后起始渐变点、结束渐变点坐标之间间距覆盖的目标区域的色值，并由sketch后台程序根据获取的色值在sketch取色页面生成对应颜色；

(5)、在步骤(4)拖动结束后的起始渐变点、结束渐变点之间滑条上任意一点位置创建中间渐变点，由sketch后台程序监听中间渐变点的激活和拖动事件，并设定触发激活事件时中间渐变点为新的激活点，同时sketch后台程序设定新的激活点仅能沿滑条所在直线拖动；

(6)、sketch后台程序监听步骤(5)中新的激活点的拖动事件，当新的激活点拖动时实时获取新的激活点的坐标值；

(7)、新的激活点拖动结束后恢复为中间渐变点，由sketch后台程序根据拖动结束时新的激活点的坐标值，得到拖动后中间渐变点、起始渐变点之间间距覆盖的目标区域的色值，并由sketch后台程序根据获取的色值在sketch取色页面生成对应颜色。

所述的web端线性渐变色取色方法，其特征在于：步骤(1)中，sketch后台程序监听取色目标区域的鼠标单击事件，所述鼠标单击事件的完整过程依次包括鼠标mousedown事件、鼠标mouseup事件，sketch后台程序按先后顺序设定触发完整鼠标单击事件的两点分别为起始渐变点、结束渐变点；

步骤(5)中，sketch后台程序监听拖动结束后起始渐变点、结束渐变点之间滑条上任意一点的鼠标单击事件，并以触发鼠标单击事件的任意一点为中间渐变点。

所述的web端线性渐变色取色方法，其特征在于：步骤(3)中，对于已经生成的起始渐变点、结束渐变点，sketch后台程序监听起始渐变点、结束渐变点的鼠标mousedown事件，并以鼠标mousedown事件作为激活事件，触发鼠标mousedown事件的渐变点作为激活点；

步骤(5)中，对于已经生成的中间渐变色，sketch后台程序监听中间渐变点的鼠标mousedown事件，并以鼠标mousedown事件作为激活事件，触发鼠标mousedown事件时中间渐变点作为新的激活点。

所述的web端线性渐变色取色方法，其特征在于：步骤(3)、(4)中，sketch后台程序监听激活点的鼠标mousemove事件，并实时获取激活点触发鼠标mousemove事件整个过程激活点的坐标值；同时sketch后台程序监听鼠标mousemove事件停止后的鼠标mousedown事件，以鼠标mousedown事件作为激活点拖动结束标志；

步骤(6)、(7)中，sketch后台程序监听新的激活点的鼠标mousemove事件，并实时获取新的激活点触发鼠标mousemove事件整个过程新的激活点的坐标值；同时sketch后台程序监听鼠标mousemove事件停止后的鼠标mousedown事件，以鼠标mousedown事件作为新的激活点拖动结束标志。

所述的web端线性渐变色取色方法，其特征在于：当渐变点生成并触发鼠标mousedown事件后，没有触发鼠标mousemove事件而立即触发鼠标mouseup事件，则该鼠标mouseup事件不生效。

所述的web端线性渐变色取色方法，其特征在于：渐变点及由渐变点生成的激活点的坐标值的计算公式为(鼠标的x轴坐标值–滑条的x轴坐标值)/滑条的长度，其中起始渐变点的初始坐标值设定为0％，结束渐变点的初始坐标值设定为100％。

所述的web端线性渐变色取色方法，其特征在于：步骤(5)中，中间渐变点的颜色取起始渐变色和结束渐变色的中间色。

所述的web端线性渐变色取色方法，其特征在于：步骤(5)中，sketch后台程序监听键盘对新的激活点的delete时间，当新的激活点触发delete事件时删除当前激活的坐标点并把激活点设为起始渐变点。

所述的web端线性渐变色取色方法，其特征在于：sketch后台程序取色时根据线性变化方向设置不同渐变取色角度。

与现有技术相比，本发明不仅可以实现起始点和结束点两点之间的渐变色取色，还可以在起始点和结束点之间增加或删去至少渐变点，并实现多点渐变色取色，丰富了wen端应用的功能。

附图说明

图1为本发明方法流程图。

具体实施方式

下面结合附图和实施例对本发明进一步说明。

如图1所示，1、web端线性渐变色取色方法，包括以下步骤：

(1)、在sketch取色的目标区域创建两个渐变点，其中一个点作为起始渐变点，另一个点作为结束渐变点；

(2)、sketch后台程序以起始渐变点、结束渐变点两点确定的直线构建滑条，以滑条所在直线建立一维坐标轴，并获取起始渐变点、结束渐变点的初始坐标值；

(3)、监听起始渐变点、结束渐变点的激活和拖动事件，sketch后台程序设定起始渐变点、结束渐变点中触发激活事件的渐变点为激活点，同时sketch后台程序设定激活点仅能沿滑条所在直线拖动，当激活点拖动时由sketch后台程序实时获取激活点的坐标值；

(4)、激活点拖动结束后激活点恢复为起始渐变点或结束渐变点，由sketch后台程序根据拖动结束时激活点的坐标值，得到拖动后起始渐变点、结束渐变点坐标之间间距覆盖的目标区域的色值，并由sketch后台程序根据获取的色值在sketch取色页面生成对应颜色；

(5)、在步骤(4)拖动结束后的起始渐变点、结束渐变点之间滑条上任意一点位置创建中间渐变点，由sketch后台程序监听中间渐变点的激活和拖动事件，并设定触发激活事件时中间渐变点为新的激活点，同时sketch后台程序设定新的激活点仅能沿滑条所在直线拖动；

(6)、sketch后台程序监听步骤(5)中新的激活点的拖动事件，当新的激活点拖动时实时获取新的激活点的坐标值；

(7)、新的激活点拖动结束后恢复为中间渐变点，由sketch后台程序根据拖动结束时中间激活点的坐标值，得到拖动后中间渐变点、起始渐变点之间间距覆盖的目标区域的色值，并由sketch后台程序根据获取的色值在sketch取色页面生成对应颜色。

本发明步骤(1)中，sketch后台程序监听取色目标区域的鼠标单击事件，所述鼠标单击事件的完整过程依次包括鼠标mousedown事件、鼠标mouseup事件，sketch后台程序按先后顺序设定触发完整鼠标单击事件的两点分别为起始渐变点、结束渐变点；

步骤(5)中，sketch后台程序监听拖动结束后起始渐变点、结束渐变点之间滑条上任意一点的鼠标单击事件，并以触发鼠标单击事件的任意一点为中间渐变点。

本发明步骤(3)中，对于已经生成的起始渐变点、结束渐变点，sketch后台程序监听起始渐变点、结束渐变点的鼠标mousedown事件，并以鼠标mousedown事件作为激活事件，触发鼠标mousedown事件的渐变点作为激活点；

步骤(5)中，对于已经生成的中间渐变色，sketch后台程序监听中间渐变点的鼠标mousedown事件，并以鼠标mousedown事件作为激活事件，触发鼠标mousedown事件时中间渐变点作为新的激活点。

本发明步骤(3)、(4)中，sketch后台程序监听激活点的鼠标mousemove事件，并实时获取激活点触发鼠标mousemove事件整个过程激活点的坐标值；同时sketch后台程序监听鼠标mousemove事件停止后的鼠标mousedown事件，以鼠标mousedown事件作为激活点拖动结束标志；

步骤(6)、(7)中，sketch后台程序监听新的激活点的鼠标mousemove事件，并实时获取新的激活点触发鼠标mousemove事件整个过程新的激活点的坐标值；同时sketch后台程序监听鼠标mousemove事件停止后的鼠标mousedown事件，以鼠标mousedown事件作为新的激活点拖动结束标志。

本发明中，当渐变点生成并触发鼠标mousedown事件后，没有触发鼠标mousemove事件而立即触发鼠标mouseup事件，则该鼠标mouseup事件不生效。

本发明中，渐变点及由渐变点生成的激活点的坐标值的计算公式为(鼠标的x轴坐标值–滑条的x轴坐标值)/滑条的长度，其中起始渐变点的初始坐标值设定为0％，结束渐变点的初始坐标值设定为100％。

本发明步骤(5)中，中间渐变点的颜色取起始渐变色和结束渐变色的中间色。

本发明步骤(5)中，sketch后台程序监听键盘对新的激活点的delete时间，当新的激活点触发delete事件时删除当前激活的坐标点并把激活点设为起始渐变点。

本发明中，sketch后台程序取色时根据线性变化方向设置不同渐变取色角度。

本发明所述的实施例仅仅是对本发明的优选实施方式进行的描述，并非对本发明构思和范围进行限定，在不脱离本发明设计思想的前提下，本领域中工程技术人员对本发明的技术方案作出的各种变型和改进，均应落入本发明的保护范围，本发明请求保护的技术内容，已经全部记载在权利要求书中。