收藏
回答

image 组件 tap 事件参数中没有相对于图片本身的坐标?

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 需求 image 工具 6.7.3 2.0.0

- 需求的场景描述(希望解决的问题)

需要实现像HTML中图片热点的功能

- 希望提供的能力

image 组件支持定义热点。可么在 tap 事件中参数带上图片实际大小以及点击的点在图片坐标体系内的坐标。


最后一次编辑于  2018-12-05
回答关注问题邀请回答
收藏

3 个回答

  • 微信技术专员 - Rex
    微信技术专员 - Rex
    2018-12-05

    tap 事件有坐标,请看文档 : https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

    图片实际大小要在 bindload 事件获取

    2018-12-05
    赞同
    回复 1
    • 一亩三分地儿
      一亩三分地儿
      2018-12-06

      您说的没错,但坐标都是基于整个页面的,我目前变通的做法是:

      var tabX = e.detail.x - e.currentTarget.offsetLeft; //触点在图片中的X轴
       
      var tabY = e.detail.y - e.currentTarget.offsetTop; //触点在图片中的Y轴

      这个已经试了好像也能行,但仅限于不在 scroll-view 中的图片。


      个人感觉图片热点这个功能还是有用的。更进一步畅想:如果设置热区时的坐标系是在图片像素体系下,而不是在显示尺寸体系下那就更好了。这样才符合咱们小程序的精神嘛:-)。


      2018-12-06
      回复
  • 一亩三分地儿
    一亩三分地儿
    2018-12-05

    3行每行5个按钮,按钮是上图下文字。 客户需要小程序的界面与设计的丝毫不差。我不想一个一个截取图标了,想整张图放上去,然后通过热点,点击不同的按钮定位到不同的页面。

    2018-12-05
    赞同
    回复
  • 黎😄
    黎😄
    2018-12-05

    咦,还有这样的需求?很好奇你想做的是怎么的小程序,好奇心+1+1+1

    2018-12-05
    赞同
    回复 2
    • 一亩三分地儿
      一亩三分地儿
      2018-12-05

      3行每行5个按钮,按钮是上图下文字。 客户需要小程序的界面与设计的丝毫不差。我不想一个一个截取图标了,想整张图放上去,然后通过热点,点击不同的按钮定位到不同的页面。您有更好的建议吗?

      2018-12-05
      回复
    • 黎😄
      黎😄
      2018-12-05回复一亩三分地儿

      这么尴尬的吗,差一点点应该看不出来滴。再然后,canvas了解下,应该能解决的问题。

      2018-12-05
      回复