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();