StoreMap
一款基于canvas开发的web门店地图插件。
特性
- 地图元素事件封装
- 事件代理
- 更易用的画笔绘图方法
- tooltip效果实现
- 动画
- 自定义画布元素
运行示例
git clone https://github.com/BYK0911/storeMap.gitcd storeMapnpm installnpm run dev
Getting Started
创建地图
// 创建并向指定元素插入StoreMapvar map = ; // 传入第二个参数进行地图配置var map2 = ;
更新地图
map.setOption(options, isForceUpdate)
- options 同创建地图的第二个参数。
- isForceUpdate 是否强制更新,如果为true,会先清空之前的元素,其他属性不变。如果不传或者为false,则保留原有的元素。
事件绑定
var consolevar console// 事件绑定mapmap // 事件代理 将Path类元素的事件代理在map对象上map // 解除事件监听// 解除指定事件监听map // 解除所有绑定在map上的click事件map
动画
storeMap.animate(target, endState, options) 返回值为动画对象
- target是应用动画的对象,可以是对象,也可以是数组;
- endState是终止状态对象;
- options是动画配置对象,配置项如下:
- duration:动画周期,单位是毫秒,默认值300ms;
- delay:动画延时,单位也是毫秒,默认值为0;
- loop是动画循环播放次数,默认1次;
- timingFunction是动画速度函数,可以是'linear'、'ease'、'easeOut'中的一个,也可以指定为一个函数,该函数接受一个数字作为参数,函数返回值必须是一个数字。timingFunction默认是‘ease'也就是先慢后快。
// 为对象设置动画var obj =a: 1b: 10mapStore;// 为数组设置动画var arr = 'str' 0;mapStore
高级用法
自定义组件类
storeMap.component(ComponentName, ConstructMethod)
- ComponentName 自定义组件的名称。
- ConstructMethod 构建自定义组件类的函数。
storeMap
renderer画笔对象的方法
地图实例的renderer是对canvas画笔对象的进一步封装,通过链式操作和方法别名,使绘图过程更方便快捷。通过renderer.ctx可以获取原始的绘图上下文对象。
- set(options) 设置绘图上下文。
例如:
renderer
- setLineDash() 同ctx.setLineDash()。
- scale(scaleX, scaleY) 同ctx.scale()。
- mv(x, y) 同ctx.translate()。
- save() 同ctx.save()。
- restore() 同ctx.restore()。
- begin() 同ctx.beginPath()。
- close() 同ctx.closePath()。
- mt(x, y) 同ctx.moveTo()。
- lt(x, y) 同ctx.lineTo()。
- rect(x, y, w, h) 同ctx.rect()。
- arc() 同ctx.arc()。
- arcTo() 同ctx.arcTo()。
- fillText() 同ctx.fillText()。
- strokeText() 同ctx.strokeText()。
- path(pathString) 绘制路径。path指令同SVG的path元素的指令(没有路径闭合指令:z,路径闭合调用方法renderer.close())。
- fill([fillStyle]) 路径填充。参数fillStyle可选,如果传入fillStyle则先设置绘图上下文的fillStyle再进行路径填充
- stroke([strokeStyle]) 路径填充。参数strokeStyle可选,如果传入strokeStyle则先设置绘图上下文的strokeStyle再进行路径描边
绘图示例
/** * 绘制路径 * 线宽为3像素 * 线端设置为弧形 * 开始绘制路径 * 线性为虚线(lineDash(15, 5)) * 路径为一条贝塞尔曲线 * 用红色对路径进行描边 * 闭合路径 */ d