1.0.2 • Published 4 years ago
indoor-map v1.0.2
StoreMap
一款基于canvas开发的web门店地图插件。
特性
- 地图元素事件封装
- 事件代理
- 更易用的画笔绘图方法
- tooltip效果实现
- 动画
- 自定义画布元素
运行示例
git clone https://github.com/BYK0911/storeMap.git
cd storeMap
npm install
npm run dev
Getting Started
创建地图
// 创建并向指定元素插入StoreMap
var map = storeMap(dom);
// 传入第二个参数进行地图配置
var map2 = storeMap(dom2, {
backgroundColor: '#f0f0f0', // 背景颜色
width: 500, // 地图宽度
height: 400, // 地图高度
elements: { // 地图元素
{
type: 'Polyline', // 折线
points: [ // 折点坐标
[0, 0],
[100, 0],
[100, 100]
],
stroke: '#000', // 折线颜色
lineWidth: 3 // 线宽
},
// ... 其他组件
}
});
更新地图
map.setOption(options, isForceUpdate)
- options 同创建地图的第二个参数。
- isForceUpdate 是否强制更新,如果为true,会先清空之前的元素,其他属性不变。如果不传或者为false,则保留原有的元素。
事件绑定
var handleClick1 = e => console.log('click hanlder 1')
var handleClick2 = e => console.log('click hanlder 2')
// 事件绑定
map.on('click', handleClick1)
map.on('click', handleClick2)
// 事件代理 将Path类元素的事件代理在map对象上
map.on('click', 'Path', e => console.log(e))
// 解除事件监听
// 解除指定事件监听
map.off('click', handleClick1)
// 解除所有绑定在map上的click事件
map.off('click')
动画
storeMap.animate(target, endState, options) 返回值为动画对象
- target是应用动画的对象,可以是对象,也可以是数组;
- endState是终止状态对象;
- options是动画配置对象,配置项如下:
- duration:动画周期,单位是毫秒,默认值300ms;
- delay:动画延时,单位也是毫秒,默认值为0;
- loop是动画循环播放次数,默认1次;
- timingFunction是动画速度函数,可以是'linear'、'ease'、'easeOut'中的一个,也可以指定为一个函数,该函数接受一个数字作为参数,函数返回值必须是一个数字。timingFunction默认是‘ease'也就是先慢后快。
// 为对象设置动画
var obj = {
a: 1,
b: 10
}
mapStore.animate(obj, { a: 10, b: 1 });
// 为数组设置动画
var arr = ['str', 0];
mapStore.animate(arr, [,10], {
delay: 200, // 延迟200ms
duration: 1000, // 动画周期1000ms
timingFunction: n => Math.sin(n * Math.PI / 2), // 速度函数是正弦曲线
loop: 5 // 动画循环次数是5次
})
高级用法
自定义组件类
storeMap.component(ComponentName, ConstructMethod)
- ComponentName 自定义组件的名称。
- ConstructMethod 构建自定义组件类的函数。
storeMap.component('MyComponent', function () {
class MyComponent extends storeMap.Constructors.Element {
constructor () {
super();
// ...
this.type = 'MyComponent';
}
// 实现自定义组件的渲染方法
render (renderer) {
}
// 实现自定义组件的碰撞检测方法,用以于计算事件触发对象
contain (x, y) {
}
}
return MyComponent;
})
renderer画笔对象的方法
地图实例的renderer是对canvas画笔对象的进一步封装,通过链式操作和方法别名,使绘图过程更方便快捷。通过renderer.ctx可以获取原始的绘图上下文对象。
- set(options) 设置绘图上下文。
例如:
renderer.set({
lineWidth: 1,
strokeStyle: '#333',
fillStyle: '#f0f0f0',
//...
})
- 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.set({
lineWidth: 3,
lineCap: 'round'
})
.setLineDash([15, 5])
.begin()
.path('M0 0 C0 100 100 100 100 0)
.stroke('#f00')
.close();