二维码
搜索 ×

颜色

  绘制几何图形时，通过给几何对象的style属性设置color 或 fillColor 属性可指定几何图形边框效果和填充效果，而且这两个属性除了可以 使用颜色 外，还可以指定为 渐变对象 或 图案/纹理对象。

颜色格式

  在图形开发中，色彩的运用是非常重要的，它能直接影响到图形的美观度和用户体验。 AnyGraph 采用 HTML颜色 作为颜色应用的基础。

  HTML颜色 由红色、绿色、蓝色混合而成，其颜色值由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。各颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。三种颜色 红，绿，蓝的组合从0到255，一共可表达1600万种不同颜色(256 x 256 x 256)。除了颜色值之外，HTML颜色 还可通过 透明度 描述元素的可见程度，可以用来实现层次感、透视效果等。

  在使用 HTML 颜色时可采用命名色、十六进制颜色、RGB颜色等几种格式，常见的16色颜色如下表所示：

颜色名称 效果 Hex RGB
black   #000000 rgb(0,0,0)
silver   #C0C0C0 rgb(192,192,129)
gray   #808080 rgb(128,128,128)
white   #FFFFFF rgb(255,255,255)
maroon   #800000 rgb(128,0,0)
red   #FF0000 rgb(255,0,0)
purple   #800080 rgb(128,0,128)
fuchsia   #FF00FF rgb(255,0,255)
green   #008000 rgb(0,128,0)
lime   #00FF00 rgb(0,255,0)
olive   #808000 rgb(128,128,0)
yellow   #FFFF00 rgb(255,255,0)
navy   #000080 rgb(0,0,128)
blue   #0000FF rgb(0,0,255)
teal   #008080 rgb(0,128,128)
aqua   #00FFFF rgb(0,255,255)

  有关颜色的更多内容，请参见 图形开发实战课程进阶篇: 图形样式

颜色使用

  下面这个示例展示了应用 “颜色” 进行描边和填充的效果：

源代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="module">
    import { Graph, Rect } from "../../src/index.js";

    // graph对象
    let graph = new Graph({
        "target": "graphWrapper"
    });

    // 新建绘图图层
    let layer = graph.addLayer();

    // 绘制矩形
    layer.getSource().add(new Rect({ "x": 50, "y": 50, "width": 200, "height": 100, "style":{"lineWidth":4 , "color":"#00FF00"} }));
    layer.getSource().add(new Rect({ "x": 350, "y": 50, "width": 200, "height": 100, "style":{ "fillColor" : "#008000", "fillStyle":1, "lineWidth":4 , "color":"#FF0000" } }));

    // render
    graph.render();
</script>

颜色工具类

  AnyGraph 提供了一个通用的颜色工具类ColorUtil，提供了将上述各种颜色格式转换为Color类型格式的功能，也提供了将 Color类型格式转换为上述各种颜色格式的功能，还提供了生成随机色，生成色带等功能，所提供的方法如下表所示：

名称 说明
toRgb() 转换为rgb()字符串颜色值
toHex() 转换为16进制字符串颜色值
toHSL() 转换为HSL颜色对象
toHSV() 转换为HSV颜色对象
toHSB() 转换为HSB颜色对象
static fromHex(hex) 将16进制颜色字符串 转换为Color对象
static fromString(str) 将字符串颜色转换为Color对象
static fromHSL(hslColor) 将HSL的字符串颜色转换为Color对象
static isValidColor(color) 判断一个颜色值是否合法
static random() 生成随机色
static band(color, count) 生成色带

  下面这些代码展示了 Color 类中的类型转换功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
console.info(Color.fromString("#FFF").toString());
// return: rgb(255,255,255)

console.info(Color.fromString("#FFFFFFDF").toString());
// return: rgba(255,255,255,0.87)

let red = Color.fromString("red")
console.info(red.toHSL());
// return: {H: 0, S: 1, L: 1}

console.info(red.toHSB());
// return: {h: 0, s: 1, b: 1}
 
console.info(red.toHSV());
// return: {h: 0, s: 1, v: 255}
 
console.info(red.toHex());
// return: #ff0000
 
console.info(red.toRgb());
// return: rgb(255,0,0)

  Color 类中包含了一个静态方法 band(color, count)，该方法可生成指定颜色的色带值。下图为生成的 deeppink 色带。

运行效果