请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Matthew.Xue

超级版主

2

主题

274

帖子

456

积分

超级版主

Rank: 8Rank: 8

积分
456
最新发帖
Matthew.Xue
超级版主   /  发表于:2025-1-16 14:09  /   查看:71  /  回复:0
本帖最后由 Matthew.Xue 于 2025-2-6 17:13 编辑

引言使用Excel的朋友必然会使用单元格的样式,其中包括文字的颜色、背景颜色等各种颜色的设置,SpreadJS中也可以做相同的设定,但是大家在开发的过程中可能都会有这样一个疑问:如下图这种情况,单元格样式中的颜色有时候为何不是十六进制,而是这样一个字符串?
image.png806489562.png
读者首先会问,“Accent 4 80”是什么?为何可以作为backColor的属性值?
答案是:“Accent 4”是主题中的颜色名,而backColor不仅可以接受一个主题名,也可以接受命名样式(NamedStyle),当然也能接受十六进制的颜色值。
接下来,让我带领大家一点点解开“主题”的神秘面纱。
什么是主题?在Excel和SpreadJS中,都支持主题设定,在Excel和SpreadJS的工具栏“页面布局”下方,第一个选项就是主题设定,下面图片中是分别是Excel和SpreadJS的主题类型,可以看到Excel支持的主题非常丰富,数了一下,足足有43种之多,而SpreadJS中也支持了22种主题类型。
image.png903713073.png
image.png973322448.png

包含了哪些信息?我们以SpreadJS中的主题定义为例,主题由以下四个方面组成:
  • 主题名

  • 颜色策略
    • Accent(包括从Accent 1到 Accent 6)
    • Text(包括Text 1 和 Text 2)
    • Background(包括Background 1 和 Background 2)
    • Hyperlink(包括Hyperlink 和 followedHyperlink)
  • 标题字体
  • 正文字体

image.png387050780.png
看完了主题的组成,就可以得知上文提到的“Accent 4”其实属于主题中颜色策略下的一个颜色名。注意,这些颜色名在不同的主题中都是固定的,而同样的“Accent 4”,在不同的主题下,对应的实际颜色也是有区别的,比如在Office主题下,“Accent 4 80”对应的颜色是#fff3cc,而在Office2007中,它的实际颜色则为#d5dfec。
image.png782380065.png
image.png979093017.png
那“Accent 4 80”中的80又代表什么意思呢?它其实类似于透明度,这个值为0的时候,实际颜色就是该颜色名对应的实际颜色;而这个值越接近100,则越透明,颜色也就越白,在100的时候,不论什么颜色名,对应的实际颜色都是纯白色#ffffff;除了正值之外,这个值还可以为负数,同样的,有效最小的负值是-100,区别在于当它为正数的时候,底色为白色,而当它为负数的时候,底色为黑色,所以当它为-100时,不论什么颜色名,对应的实际颜色都是纯黑色#000000。
主题可以做什么?这种同颜色名但不同主题下的颜色不同的特性,其实大大简化制作不同风格文件的难度,只需要提前配好风格的主题,或直接使用SpreadJS内置的主题,后续只要切换主题就可以做到风格的切换了,唯一要注意的就是配置颜色的时候要用主题的颜色名,而非用十六进制。主题中的字体其实也有类似的特性,这里就不再赘述。

以上就是小编对主题的介绍,都学到了吗,学会了就点个赞吧~









0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部