设置电子阅读前景和背景的方法与装置

摘要

本发明公开了一种设置电子阅读前景和背景的方法与装置，属于电子阅读技术领域。该方法包括：在前景背景设置面板内设置用于控制色调和亮度的第一色彩选择器，在界面上预留用于显示预览效果的预览区域，第一色彩选择器上设有前景色控件和背景色控件；当用户进行设置时，若检测到前景色控件的拖拽事件，则将前景色的色调和亮度设置为该事件结束位置对应的色调和亮度并显示；若检测到背景色控件的拖拽事件，则将背景色的色调和亮度设置为该事件结束位置对应的色调和亮度并显示；前景色控件的位置和背景色控件的位置不重合。该装置包括：初始化模块和设置模块。本发明提高了电子阅读中视觉元素的识别效果，实现了背景和前景的智能匹配。

说明书

技术领域

本发明涉及电子阅读技术领域，特别涉及一种设置电子阅读前景和背景的方法与装置。

背景技术

电子阅读环境由两部分构成，一个是背景，一个是前景，背景和前景的对比才能让文字、 符号、图片等视觉元素被用户识别认知。目前电子阅读设备上部分提供了简单的自定义设置 背景与前景，用户可以通过设置页面对背景和前景进行设置，以达到用户所期望的阅读环境。

现有的设置方式是，当设置背景时，用户先点击设置按钮跳转到背景设置页面进行设置， 设置完成再跳转回到阅读界面查看效果；类似地，设置前景时也是先在前景设置页面进行设 置，然后再跳转回到阅读界面查看效果。

但是，现有的设置方式缺乏预览，背景和前景的设置是绝对独立的，很容易造成背景和 前景颜色相同或相近，从而无法有效识别视觉元素，严重地影响用户阅读的效果。

发明内容

为了解决现有的电子阅读中背景和前景设置效果差影响用户阅读的问题，本发明实施例 提供了一种设置电子阅读前景和背景的方法与装置。

一方面，一种设置电子阅读前景和背景的方法，包括：

预先在电子阅读的前景背景设置面板内设置用于控制色调和亮度的第一色彩选择器，并 在所述前景背景设置面板所在的界面上预留用于显示预览效果的预览区域，所述第一色彩选 择器上设有前景色控件和背景色控件；

当用户进入所述前景背景设置面板进行设置时，

如果检测到所述前景色控件的拖拽事件，则将前景色的色调和亮度设置为所述前景色控 件的拖拽事件的结束位置对应的色调和亮度，并在所述预览区域显示设置后的前景色；

如果检测到所述背景色控件的拖拽事件，则将背景色的色调和亮度设置为所述背景色控 件的拖拽事件的结束位置对应的色调和亮度，并在所述预览区域显示设置后的背景色；

其中，所述第一色彩选择器上所述前景色控件的位置和所述背景色控件的位置不重合。

另一方面，一种设置电子阅读前景和背景的装置，包括：

初始化模块，用于预先在电子阅读的前景背景设置面板内设置用于控制色调和亮度的第 一色彩选择器，并在所述前景背景设置面板所在的界面上预留用于显示预览效果的预览区域， 所述第一色彩选择器上设有前景色控件和背景色控件；

设置模块，用于当用户进入所述前景背景设置面板进行设置时，如果检测到所述前景色 控件的拖拽事件，则将前景色的色调和亮度设置为所述前景色控件的拖拽事件的结束位置对 应的色调和亮度，并在所述预览区域显示设置后的前景色；如果检测到所述背景色控件的拖 拽事件，则将背景色的色调和亮度设置为所述背景色控件的拖拽事件的结束位置对应的色调 和亮度，并在所述预览区域显示设置后的背景色；

其中，所述第一色彩选择器上所述前景色控件的位置和所述背景色控件的位置不重合。

本发明实施例提供的所述设置电子阅读前景和背景的方法与装置带来的有益效果是：通 过第一色彩选择器设置前景色和背景色的色调和亮度，并且前景色控件的位置和背景色控件 的位置在第一色彩选择器上不重合，实现了前景色和背景色的设置互斥，保证了前景色和背 景色不重叠以保证背景与前景的差别，极大地提高了电子阅读中视觉元素的识别效果，实现 了背景和前景的智能匹配，并且，可以实时预览前景色和背景色的设置效果，提高了用户阅 读的体验度。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附 图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域 普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一实施例提供的设置电子阅读前景和背景的方法流程图；

图2是本发明另一实施例提供的设置电子阅读前景和背景的方法流程图；

图3是本发明实施例提供的前景背景设置面板示意图；

图4是本发明实施例提供的第一色彩选择器的控件和第二色彩选择器的控件示意图；

图5是本发明实施例提供的阅读背景选择框的示意图；

图6是本发明实施例提供的HSL色彩模型示意图；

图7是本发明实施例提供的HSL色彩模型的色调环上的六大主色示意图；

图8是本发明又一实施例提供的设置电子阅读前景和背景的装置结构图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进 一步地详细描述。

本发明实施例涉及电子阅读技术，尤其涉及电子阅读中的前景和背景的设计。所述前景 是指电子阅读中传达给用户的内容，包括文字、符号、图片等元素，是用户识别和认知的要 素。所述背景是指电子阅读中衬托文字、符号、图片等元素的环境。通常情况下，前景和背 景的对比才能让文字、符号、图片等视觉元素被用户识别认知。

参见图1，本发明一实施例提供了一种设置电子阅读前景和背景的方法，包括：

101：预先在电子阅读的前景背景设置面板内设置用于控制色调和亮度的第一色彩选择 器，并在该前景背景设置面板所在的界面上预留用于显示预览效果的预览区域，该第一色彩 选择器上设有前景色控件和背景色控件。

102：当用户进入前景背景设置面板进行设置时，

如果检测到前景色控件的拖拽事件，则将前景色的色调和亮度设置为前景色控件的拖拽 事件的结束位置对应的色调和亮度，并在预览区域显示设置后的前景色；

如果检测到背景色控件的拖拽事件，则将背景色的色调和亮度设置为背景色控件的拖拽 事件的结束位置对应的色调和亮度，并在预览区域显示设置后的背景色；

其中，第一色彩选择器上前景色控件的位置和背景色控件的位置不重合。

步骤101中预先在电子阅读的前景背景设置面板内设置用于控制色调和亮度的第一色彩 选择器，可以包括：

获取一组颜色为预设的采色基样的RGB数组，并将RGB数组转换为HSL色值；

根据HSL色值生成N个画笔，依次使用N个画笔在屏幕上逐行绘制得到色板，所述N 为自然数；

在色板上添加两个滑块分别作为前景色控件和背景色控件，所述前景色控件、背景色控 件和色板组成第一色彩选择器。

本实施例提供的所述方法，通过第一色彩选择器设置前景色和背景色的色调和亮度，并 且前景色控件的位置和背景色控件的位置在第一色彩选择器上不重合，实现了前景色和背景 色的设置互斥，保证了前景色和背景色不重叠以保证背景与前景的差别，极大地提高了电子 阅读中视觉元素的识别效果，实现了背景和前景的智能匹配，并且，可以实时预览前景色和 背景色的设置效果，提高了用户阅读的体验度。

参见图2，本发明另一实施例提供了一种设置电子阅读前景和背景的方法，包括：

201：预先在电子阅读的前景背景设置面板内，设置用于控制色调和亮度的第一色彩选择 器，以及用于控制饱和度的第二色彩选择器，并在前景背景设置面板所在的界面上预留用于 显示预览效果的预览区域，其中，第一色彩选择器上设有前景色控件和背景色控件，分别用 于控制前景色的色调和亮度，以及背景色的色调和亮度，且第一色彩选择器上前景色控件的 位置和背景色控件的位置不重合；第二色彩选择器上设有控件，用于控制前景色或者背景色 的饱和度。

本实施例中，所述前景背景设置面板包括第一色彩选择器和第二色彩选择器，在第一色 彩选择器上设有前景色控件和背景色控件。用户可以通过拖拽该前景色控件来改变前景色的 色调和亮度，可以通过拖拽该背景色控件来改变背景色的色调和亮度。在第二色彩选择器上 也设有控件，用户可以通过拖拽该控件来改变前景色的饱和度或背景色的饱和度。通过第一 色彩选择器和第二色彩选择器的综合控制，可以实现更好的色彩控制效果。

例如，参见图3，前景背景设置面板由第一色彩选择器和第二色彩选择器组成，第一色 彩选择器上的圆形代表前景色控件，方形代表背景色控件，第二色彩选择器上的方形代表用 于控制饱和度的控件。前景背景设置面板上方还预留有预览区域，可以实时显示设置后的前 景色和背景色，达到预览的效果。

另外，第二色彩选择器上的控件的形状是可变的，当用户操作前景色控件时，其形状与 前景色控件的形状相同，当用户操作背景色控件时，其形状与背景色控件的形状相同。例如， 参见图4，当前用户操作前景色控件时，该第二色彩选择器上的控件为圆形，与前景色控件 的形状相同，当用户操作背景色控件时，该第二色彩选择器上的控件为方形，与背景色控件 的形状相同，从而方便用户识别和使用。

202：当用户进入色彩设置面板进行设置时，判断是否有前景色控件的拖拽事件或背景色 控件的拖拽事件，如果检测到前景色控件的拖拽事件，则执行203；如果检测到背景色控件 的拖拽事件，则执行205。

具体地，可以在界面上设置前景背景设置面板的入口，当用户点击或长按该入口时，弹 出前景背景设置面板给用户，供用户对前景和背景的色彩进行设置。所述点击或长按可以是 通过鼠标实现，或者是在触摸屏上通过手指触摸实现，本发明对此不限定。

另外，还可以根据用户是否首次设置前景背景来设置该入口的操作属性，如判断用户当 前是否为首次对前景背景设置面板进行设置，如果是首次设置，则将该入口的操作属性设置 为可点击或长按，如果不是首次设置，则将该入口的操作属性设置为可长按。

进一步地，还可以在界面上设置阅读背景选择框，并将上述前景背景设置面板的入口设 置在该阅读背景选择框中，以方便用户查看和设置。其中，阅读背景选择框可以从阅读的菜 单进入，如图5所示。图5的左图中界面上的阅读菜单中具有阅读背景的选项，当用户点击 该选项时，便进入阅读背景选择框，如图5的右图所示。该阅读背景选择框为矩形长条状， 其中，包括4个最近使用过的背景色，第一个为当前的背景色，最右边的方形为前景背景设 置面板的入口，方形上显示有十字型的标志，用户可以点击或长按该入口从而进入前景背景 设置面板进行设置。

203：将前景色的色调和亮度设置为前景色控件的拖拽事件的结束位置对应的色调和亮 度，并在预览区域显示设置后的前景色，然后执行204。

204：如果检测到第二色彩选择器上的控件的拖拽事件，则将前景色的饱和度设置为第二 色彩选择器上的控件的拖拽事件的结束位置对应的饱和度，并在预览区域显示设置后的前景 色，用户退出前景背景设置面板，流程结束。

205：将背景色的色调和亮度设置为背景色控件的拖拽事件的结束位置对应的色调和亮 度，并在预览区域显示设置后的背景色，然后执行206。

206：如果检测到第二色彩选择器上的控件的拖拽事件，则将背景色的饱和度设置为第二 色彩选择器上的控件的拖拽事件的结束位置对应的饱和度，并在预览区域显示设置后的背景 色，用户退出前景背景设置面板，流程结束。

本实施例中，电子阅读的前景和背景的控制不分先后顺序，可以先调整前景色，后调整 背景色，或者，先调整背景色，后调整前景色，本发明对此不限定。

本实施例中，进一步地，上述方法还可以包括：

当用户拖拽前景色控件和背景色控件其中之一时，进行碰撞检测；

如果检测到前景色控件与背景色控件发生碰撞，则计算得到被拖拽的控件碰撞后的位置， 并将碰撞后的位置作为拖拽事件的结束位置，相应地，根据该结束位置对应的信息进行色彩 设置；其中，所述碰撞为非弹性碰撞，从而达到前景色控件与背景色控件绝不重叠的效果， 保证了前景和背景不同色，实现了前景和背景的智能匹配。

本实施例中，进一步地，上述方法中在预览区域显示设置后的前景色，可以包括：通过 前景色控件上设置的监听器，监听前景色的色调和亮度是否改变，如果改变，则按照改变后 的色调和亮度在预览区域显示前景色。

上述方法中在预览区域显示设置后的背景色，可以包括：通过背景色控件上设置的监听 器，监听背景色的色调和亮度是否改变，如果改变，则按照改变后的色调和亮度在预览区域 显示背景色。

本实施例中，优选地，采用HSL(色调、亮度和饱和度)色彩模型来生成第一色彩选择 器。参见图6，HSL色彩模型把颜色描述在圆柱体内的点，这个圆柱的中心轴取值为自底部 的黑色到顶部的白色，在它们中间是的灰色；绕这个轴的角度对应于色调H(Hue分量)，到 这个轴的距离对应于饱和度S，沿着这个轴的距离对应于亮度L。

其中，H分量代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色调环上， 取值范围是0°到360°的圆心角，每个角度可以代表一种颜色。色调值的意义在于，可以在 不改变光感的情况下，通过旋转色调环来改变颜色。在实际应用中，色调环上的六大主色可 以用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在 色调环上按照60°圆心角的间隔排列，如图7所示。

具体地，步骤201中设置用于控制色调和亮度的第一色彩选择器，可以具体包括：

预设采色基样为红色、黄色、绿色、青色、蓝色和洋红色，获取一组颜色为采色基样的 RGB(Red Green Blue，红绿蓝三原色)数组，并采用RGB转换HSL的专用算法，将该RGB 数组转化成对应的HSL色值。其中，转换得到的HSL色值可以缓存在内存中，以便于用户 下次进行设置时使用，避免每次用户设置时均进行转换，从而可以提升效率。

根据转换后的HSL色值生成N个画笔，再依次使用该N个画笔在屏幕上进行逐行绘制， 得到有渐变效果的画布，将其作为第一色彩选择器的色板。优选地，可以把画笔的StrokeWidth 参数设置成一个浮点数，从而能够实现平滑效果。其中，N为自然数，N的个数可以根据屏 幕的大小预先设置。

在第一色彩选择器的色板上添加2个滑块，分别作为前景色控件和背景色控件，为每个 滑块设置属性，包括但不限于：坐标，状态和绘图。其中，坐标对应色调和亮度，包括水平 坐标和垂直坐标。状态是指滑块当前被按下、被拖拽中、被抬起等等。绘图是指滑块的显示 方式，如可以显示为“圆圈”或“方块”等等。所述色板和前景色控件、背景色控件组成了 第一色彩选择器。

当用户操作第一色彩选择器上的前景色控件或背景色控件时，其属性值随之改变，当发 生弹性碰撞进行计算时，其属性值也随之改变，将前景色控件或背景色控件按照改变后的属 性值进行显示，从而完成了用户的设置。

另外，还可以为每个控件都注册有一个专门的监听器，负责监听控件的属性变化，一旦 监听器监听到控件的属性变化，则在色板上进行相应的显示，从而达到所选即所得的效果。

与RGB色彩模型相比，HSL色彩模型对色彩的表述方式非常友好，非常符合人类对色 彩的感知习惯。本实施例中，采用2D的平面模型表示HSL的3D效果，因此，生成色板作 为第一色彩选择器用于控制色调和亮度，生成滑动条作为第二色彩选择器用于控制饱和度， 更接近于人的直观认识。其中，色板的本质是由不同亮度的颜色的横线组成。

本实施例提供的所述方法，通过第一色彩选择器设置前景色和背景色的色调和亮度，并 且前景色控件的位置和背景色控件的位置在第一色彩选择器上不重合，实现了前景色和背景 色的设置互斥，保证了前景色和背景色不重叠以保证背景与前景的差别，极大地提高了电子 阅读中视觉元素的识别效果，实现了背景和前景的智能匹配，并且，可以实时预览前景色和 背景色的设置效果，提高了用户阅读的体验度。另外，使用HSL色彩模型能让色彩处理的工 作更加人性化，有助于建立和谐的人机交互关系，提升产品体验。而且，直观的调节交互， 方便操作，让颜色选取更直观，实时的预览效果充满乐趣，让用户在玩乐中实现了自己想要 的功能。

参见图8，本发明又一实施例提供了一种设置电子阅读前景和背景的装置，包括：

初始化模块801，用于预先在电子阅读的前景背景设置面板内设置用于控制色调和亮度 的第一色彩选择器，并在前景背景设置面板所在的界面上预留用于显示预览效果的预览区域， 第一色彩选择器上设有前景色控件和背景色控件；

设置模块802，用于当用户进入前景背景设置面板进行设置时，如果检测到前景色控件 的拖拽事件，则将前景色的色调和亮度设置为前景色控件的拖拽事件的结束位置对应的色调 和亮度，并在预览区域显示设置后的前景色；如果检测到背景色控件的拖拽事件，则将背景 色的色调和亮度设置为背景色控件的拖拽事件的结束位置对应的色调和亮度，并在预览区域 显示设置后的背景色；

其中，第一色彩选择器上前景色控件的位置和背景色控件的位置不重合。

本实施例中，初始化模块801还用于：预先在前景背景设置面板内设置用于控制饱和度 的第二色彩选择器；相应地，设置模块802还用于：在检测到前景色控件的拖拽事件之后， 如果检测到第二色彩选择器上的控件的拖拽事件，则将前景色的饱和度设置为第二色彩选择 器上的控件的拖拽事件的结束位置对应的饱和度，并在预览区域显示设置后的前景色；或者， 在检测到背景色控件的拖拽事件之后，如果检测到第二色彩选择器上的控件的拖拽事件，则 将背景色的饱和度设置为第二色彩选择器上的控件的拖拽事件的结束位置对应的饱和度，并 在预览区域显示设置后的背景色。

本实施例中，进一步地，所述装置还可以包括：

计算模块，用于当用户拖拽前景色控件和背景色控件其中之一时，进行碰撞检测，如果 检测到前景色控件与背景色控件发生碰撞，则计算得到被拖拽的控件碰撞后的位置，并将碰 撞后的位置作为拖拽事件的结束位置；其中，碰撞为非弹性碰撞。

本实施例中，初始化模块801可以包括：

转换单元，用于获取一组颜色为预设的采色基样的RGB数组，并将该RGB数组转换为 HSL色值；

绘制单元，用于根据该HSL色值生成N个画笔，依次使用该N个画笔在屏幕上逐行绘 制得到色板，在该色板上添加两个滑块分别作为前景色控件和背景色控件，所述前景色控件、 背景色控件和色板组成第一色彩选择器。

本实施例中，设置模块802可以包括：

设置在前景色控件上的监听器，用于监听前景色的色调和亮度是否改变，如果改变，则 按照改变后的色调和亮度在预览区域显示前景色；

或者，

设置在背景色控件上的监听器，用于监听背景色的色调和亮度是否改变，如果改变，则 按照改变后的色调和亮度在预览区域显示背景色。

本实施例提供的所述装置，通过第一色彩选择器设置前景色和背景色的色调和亮度，并 且前景色控件的位置和背景色控件的位置在第一色彩选择器上不重合，实现了前景色和背景 色的设置互斥，保证了前景色和背景色不重叠以保证背景与前景的差别，极大地提高了电子 阅读中视觉元素的识别效果，实现了背景和前景的智能匹配，并且，可以实时预览前景色和 背景色的设置效果，提高了用户阅读的体验度。另外，使用HSL色彩模型能让色彩处理的工 作更加人性化，有助于建立和谐的人机交互关系，提升产品体验。而且，直观的调节交互， 方便操作，让颜色选取更直观，实时的预览效果充满乐趣，让用户在玩乐中实现了自己想要 的功能。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成， 也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中， 上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之 内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。