zrender/test/svg-shadow.html at 82da48f32c15591c77790fe1510085fd57e66140 · ecomfe/zrender · GitHub

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Image</title>
    <script src="./lib/config.js"></script>
    <script src="../dist/zrender.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    <h4>Canvas</h4>
    <div id="main-canvas" style="width:1000px;height:200px;"></div>
    <h4>SVG</h4>
    <div id="main-svg" style="width:1000px;height:200px;"></div>
    <div style="position: absolute; right: 10px; top: 10px">
        <button onclick="toggleShadow()">Toggle Shadow</button>
    </div>
    <script type="text/javascript">
    // 初始化zrender
    var zrCanvas = zrender.init(document.getElementById('main-canvas'));
    var zrSvg = zrender.init(document.getElementById('main-svg'), {
        renderer: 'svg'
    });

    const rects = [];
    let displayShadow = true;

    for (let k = 0; k < 2; k++) {
        for (let i = 0; i < 10; i++) {
            const rect = new zrender.Rect({
                shape: {
                    width: 25,
                    height: 25
                },
                x: 60 + i * 60,
                y: 60,
                scaleX: 2,
                scaleY: 2,
                style: {
                    fill: 'red',
                    shadowBlur: i * 3,
                    shadowColor: 'blue',
                    shadowOffsetX: 10,
                    shadowOffsetY: 10
                }
            });
            rect.__shadowBlur = i * 3;
            rects.push(rect);
            (k ? zrSvg : zrCanvas).add(rect);
        }

        const line = new zrender.Line({
            shape: {
                x1: 60,
                y1: 160,
                x2: 310,
                y2: 160
            },
            style: {
                stroke: 'red',
                lineWidth: 3,
                shadowBlur: 10,
                shadowColor: 'blue',
                shadowOffsetX: 10,
                shadowOffsetY: 10
            }
        });
        line.__shadowBlur = 10;
        rects.push(line);
        (k ? zrSvg : zrCanvas).add(line);
    }

    function toggleShadow() {
        displayShadow = !displayShadow;
        rects.forEach(function (rect) {
            rect.style.shadowBlur = displayShadow ? rect.__shadowBlur : 0;
            rect.markRedraw();
        });
    }
    </script>

</body>
</html>