在离子或流星中创建基于图片点击的应用程序？

Question

假设在应用程序中有一张手的图片，显示五个手指。 如果有人敲击任何一个手指，那么突然会弹出一个弹出窗口 并将一些数据发送到服务器。

这是可能的离子或流星尤其是图片上的点按功能（不是按钮），然后是弹出窗口吗？

更新：我发现有可能通过d3.js，但仍然如何将这些手指连接到d3的点。 是否有可能在离子或流星中使用此类应用程序？

Answer 1

这应该可以通过使用图像映射非常简单地实现。

首先创建模板

<template name="handClick">
  <img src="hand.gif" width="xxx" height="xxx" usemap="#handmap">

  <map name="planetmap">
    <area id="thumb" shape="circle" coords="x,x,x" href="#">
    <area id="index" shape="circle" coords="x,x,x" href="#">
    <area id="middle" shape="circle" coords="x,x,x" href="#">
    <area id="ring" shape="circle" coords="x,x,x" href="#">
    <area id="pinky" shape="circle" coords="x,x,x" href="#">
  </map>
</template>

然后你的事件听众

Template.handClick.events({
  "click area": function(e) {
    e.preventDefault()
    //handle click on any area element in the template
  },
  "click #thumb": function(e){
    e.preventDefault();
    //handle click on the #thumb area element
  }
});