透明度

  Canvas 渲染上下文对象提供了通过颜色值设置图形对象的透明度和为画布指定透明度两种方式设置颜色的透明度。

通过颜色值设置透明度

  采用颜色透明度绘制图像比较简单，仅需在指定图形对象颜色的时候赋予颜色透明值即可。

通过 globalAlpha 设置透明度

  globalAlpha 透明度也是通过对象的style 属性中指定的，其属性名为 opacity。

// 绘制图像
let image = new Image({
    "x": 50,
    "y": 50,
    "width": 500,
    "height": 450,
    "style": { "opacity": 0.4 },
    "src": "./images/ma.png"
});
layer.getSource().add(image);

图层透明度

  AnyGraph图形渲染思路是：各个图层分别对应独立的Canvas画布，在画布中渲染各自图层中的数据，最后按图层顺序将各图层合并为完整的图形。

  在这个思路的之上，可以较容易实现图层透明度。在将各图层合并为完整的图形的时候，采用的是 ctx.drawImage() 方式，按照上述的 globalAlpha 用法， 在执行 ctx.drawImage() 设置 globalAlpha 透明值，即可实现图层的透明控制。

  Layer图层类提供了 setOpacity(opacity) 和 getOpacity() 两个方法可设置和获取图层透明度，opacity 的取值范围仍旧是 0 ~ 1。下面这个示例演示图层透明度的功能。运行效果如下：

篮球透明度 足球透明度

源代码如下：

<script type="module">
    import { Graph, VectorSource, Layer, SvgFormat } from "../../../src/index.js";

    let layer1 = new Layer({
        "name": "篮球",
        "opacity": 0.5,
        "source": new VectorSource({
            "dataType": "xml",
            "fileUrl": "./images/basketball1.svg",
            "format": new SvgFormat()
        })
    });
    let layer2 = new Layer({
        "name": "足球",
        "opacity": 0.7,
        "source": new VectorSource({
            "dataType": "xml",
            "fileUrl": "./images/football2.svg",
            "format": new SvgFormat()
        })
    });

    // graph对象
    let graph = new Graph({
        "target": "graphWrapper",
        "layers": [layer1, layer2],
    });

    // 图层1透明度控制
    let slideBar1 = document.getElementById("slideBar1");
    slideBar1.addEventListener("change", function (e) {
        layer1.setOpacity(this.value / 100);
        graph.render();
    })

    // 图层2透明度控制
    let slideBar2 = document.getElementById("slideBar2");
    slideBar2.addEventListener("change", function (e) {
        layer2.setOpacity(this.value / 100);
        graph.render();
    })
</script>

尝试一下 »