@vislite/canvas

基于 VISLite 的Canvas画笔开发的绘制方法

如何使用？

创建&初始化

首先，需要进行安装：

npm install --save @vislite/canvas

然后获取即可：

import VISLite from "vislite";
import CanvasJs from "@vislite/canvas";

// https://oi-contrib.github.io/VISLite/#/api/canvas/import
let painter = new VISLite.Canvas(el);

// 创建
let canvasJs = new CanvasJs(painter);

方法

地图块

也就是绘制地图的一个区域的方法，比如我们有一个江苏地图的geoJSON，那么直接：

let map = new VISLite.Mercator(45, [120, 33]);

painter.config({
    strokeStyle: "#eee",
    fillStyle: "pink"
});

for (let i = 0; i < jiangsu.features.length; i++) {
    canvasJs.fullFeature(map, jiangsu.features[i], 350, 200)
}

这样，就可以获得一个江苏地图：

完整代码可以查看： feature.spec.html

上面演示的是fullFeature，其实还有同簇方法fillFeature和strokeFeature可供选择。

箭头

指定开始和结束位置即可，例如：

canvasJs.arrow([100, 100], [300, 250]);

箭头使用轮廓绘制的，因此如果需要修改颜色的粗细，应该分别修改strokeStyle和lineWidth。

版权

MIT License

Copyright (c) zxl20070701 走一步，再走一步