图案/纹理

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

  AnyGraph 设计了图形/纹理对象类 Pattern，可实现图案/纹理的填充效果。

  下面这个示例，使用图案/纹理对象填充了文字：

源代码如下：

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

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

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

    // 新建绘图图层
    let layer = graph.addLayer();
    let image = new ImageObject("../images/bg_06.jpg", function(){
        let pattern = new Pattern({ "type": "image", "image": image });
        layer.getSource().add(new Text({
            "text": "图形开发",
            "x": graph.getSize().width / 2,
            "y": graph.getSize().height / 2,
            "style": { "lineWidth": 4, "fillStyle": 0, "fillColor": pattern, "fontSize": 200, "fontName": "黑体", "textAlign": "center", "textBaseline": "middle" }
        }));
    });
</script>

尝试一下 »