二维码
搜索 ×

阴影

Geomtry对象中的阴影属性

  图形对象 Geometry 类的 style 对象中包含了与Canvas 渲染上下文对象阴影属性对应的属性，如下表所示：

参数 说明
shadowBlur 模糊效果程度
shadowColor 模糊颜色
shadowOffsetX 阴影水平偏移距离
shadowOffsetY 阴影垂直偏移距离

示例

  下面这个示例演示了图形对象设置阴影的效果：

源代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script type="module">
    import {
        Graph, Layer, VectorSource, BgUtil, Color, MathUtil,
        GGeometryType, Rect, Point, Circle, Gradient, Text, Polyline, Polygon
    } from "../../src/index.js";

    let colorSet = ["red", "orange", "gold", "green", "black", "blue"];

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

    // 网格水印层
    BgUtil.generateGrid(Object.assign({ "interval": 10, "graph": graph }, graph.getSize()));

    // 新建绘图图层
    let layer = graph.addLayer();
    // 矩形大小
    let width = 180;
    let height = 120;
    let colorSet = ["red", "orange", "gold", "green", "black", "blue"];

    for (let x = 40; x < 800; x += width + 20) {
        for (let y = 40; y < 400; y += height + 20) {
            let color = colorSet[MathUtil.getRandomNum(0, colorSet.length - 1)];
            let colorBand = Color.band(color, 10);

            // 渐变对象
            let gradient = new Gradient({
                "type": "linear",
                "coords": { "x1": x, "y1": y, "x2": x + width, "y2": y },
                "colorStops": [{
                    "offset": "0.1",
                    "color": colorBand[2]
                }, {
                    "offset": "0.95",
                    "color": colorBand[6]
                }]
            });

            layer.getSource().add(new Rect({
                x, y, width, height,
                "style": {
                    "fillColor": gradient,
                    "fillStyle": 1,
                    "shadowOffsetX": MathUtil.getRandomNum(3, 8),
                    "shadowOffsetY": MathUtil.getRandomNum(2, 5),
                    "shadowBlur": 30,
                    "shadowColor": colorBand[8],
                    "color": "none"
                }
            }));
        }
    }
</script>