Day20 - Fabricjs 与 Image map 仿制 highlight 场地图 说明

Fabricjs

官方文档

Fabric.js is a powerful and simple
Javascript HTML5 canvas library
Fabric provides interactive object model on top of canvas element
Fabric also has SVG-to-canvas (and canvas-to-SVG) parser

fabricjs 是一个更快速绘画 canvas 的 library，我们来看看他的api：

会发现，在我们前面复刻小画家的功能几乎都有了呢！

Image map

Image map

使用 HTML 图像映射，您可以在图像上创建可点击区域。

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

应用

你可能会好奇，为什麽这两个会放在一起说呢？
因为我不够时间写文章...
从上面 Image map 可以发现，
我们要是能够利用 Fabricjs 绘制与纪录点，
就能做出一个 Image Map 产生器！

而这个产生器的应用可以用於哪里呢？
有没有订过演唱会分区的票？

看到了吗？其实这也是 canvas 的应用，
这里来列一下步骤：

情境

假设我们有各种的区域分区图

Step 1

利用 fabric js 来绘制场地分区图，并输出成 json

Step 2

将上面的 json 转成 area (coords)

Step 3

底层放上 image (不放也可以，可以直接把图片放在第二层 canvas) ， 第二层 canvas ，再接着是 <map></map>

Step 4

在 <map></map> 内的 area 触发点击事件，把第二层的 canvas 画上 highlight

简易的点击区域 highlight 就完成啦！
很可惜因为时间的关系无法带大家直接做程序码，
不过根据刚才的步骤大概就可以完成一个雏形，
如果很懒得自己做出绘制区域的产生器，
网路上也有其他大神做了线上版 Imgae Map 产生器，
输出阵列後就可以自行应用啦～
尽情发挥想像力吧！

参考

绘制Area：Image Map Creator

这里提供有趣的 Fabricjs 应用

模拟电影倒数：movieCountDown