WEB端线性渐变色取色方法技术

技术编号:24330706 阅读:37 留言:0更新日期:2020-05-29 19:30
本发明专利技术公开了一种WEB端线性渐变色取色方法,包括以下步骤:(1)、创建起始、结束渐变点;(2)、以起始、结束渐变点两点确定的直线构建滑条和坐标轴,并获取起始、结束渐变点的初始坐标值;(3)、以起始、结束渐变点构建激活点,记录激活点拖动时坐标值;(4)、根据拖动后激活点坐标值,得到拖动后起始、结束渐变点坐标之间色值;(5)、在滑条上创建中间渐变点并构建新的激活点;(6)、记录新的激活点拖动时坐标值;(7)、根据新的激活点坐标值,得到拖动后中间、起始渐变点坐标之间色值。本发明专利技术不仅可以实现两点之间的渐变色取色,还可以实现多点渐变色取色,丰富了WEN端应用的功能。

Web end linear gradient color selection method

【技术实现步骤摘要】
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)拖动结束后的起始渐变点、结束渐变点之间滑条上任意一点位置创建中间本文档来自技高网...

【技术保护点】
1.WEB端线性渐变色取色方法,其特征在于:包括以下步骤:/n(1)、在Sketch取色的目标区域创建两个渐变点,其中一个点作为起始渐变点,另一个点作为结束渐变点;/n(2)、Sketch后台程序以起始渐变点、结束渐变点两点确定的直线构建滑条,以滑条所在直线建立一维坐标轴,并获取起始渐变点、结束渐变点的初始坐标值;/n(3)、监听起始渐变点、结束渐变点的激活和拖动事件,Sketch后台程序设定起始渐变点、结束渐变点中触发激活事件的渐变点为激活点,同时Sketch后台程序设定激活点仅能沿滑条所在直线拖动,当激活点拖动时由Sketch后台程序实时获取激活点的坐标值;/n(4)、激活点拖动结束后激活点恢复为起始渐变点或结束渐变点,由Sketch后台程序根据拖动结束时激活点的坐标值,得到拖动后起始渐变点、结束渐变点坐标之间间距覆盖的目标区域的色值,并由Sketch后台程序根据获取的色值在Sketch取色页面生成对应颜色;/n(5)、在步骤(4)拖动结束后的起始渐变点、结束渐变点之间滑条上任意一点位置创建中间渐变点,由Sketch后台程序监听中间渐变点的激活和拖动事件,并设定触发激活事件时中间渐变点为新的激活点,同时Sketch后台程序设定新的激活点仅能沿滑条所在直线拖动;/n(6)、Sketch后台程序监听步骤(5)中新的激活点的拖动事件,当新的激活点拖动时实时获取新的激活点的坐标值;/n(7)、新的激活点拖动结束后恢复为中间渐变点,由Sketch后台程序根据拖动结束时新的激活点的坐标值,得到拖动后中间渐变点、起始渐变点之间间距覆盖的目标区域的色值,并由Sketch后台程序根据获取的色值在Sketch取色页面生成对应颜色。/n...

【技术特征摘要】
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取色页面生成对应颜色。


2.根据权利要求1所述的WEB端线性渐变色取色方法,其特征在于:步骤(1)中,Sketch后台程序监听取色目标区域的鼠标单击事件,所述鼠标单击事件的完整过程依次包括鼠标mousedown事件、鼠标mouseup事件,Sketch后台程序按先后顺序设定触发完整鼠标单击事件的两点分别为起始渐变点、结束渐变点;
步骤(5)中,Sketch后台程序监听拖动结束后起始渐变点、结束渐变点之间滑条上任意一点的鼠标单击事件,并以触发鼠标单击事件的任意一点为中间渐变点。


3.根据权利要求1所述的WEB端线性渐变色取色方法,其特征在于:步骤(3)中,对于已经生成的起始渐变点、结束渐变点,Sketch后台程序监...

【专利技术属性】
技术研发人员:陈睿
申请(专利权)人:杭州涂鸦信息技术有限公司
类型:发明
国别省市:浙江;33

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1