小程序
小游戏
企业微信
微信支付
扫描小程序码分享
- 需求的场景描述（希望解决的问题）
需要实现像HTML中图片热点的功能
- 希望提供的能力
image 组件支持定义热点。可么在 tap 事件中参数带上图片实际大小以及点击的点在图片坐标体系内的坐标。
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
tap 事件有坐标，请看文档 ： https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
图片实际大小要在 bindload 事件获取
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
您说的没错，但坐标都是基于整个页面的，我目前变通的做法是：
var
tabX = e.detail.x - e.currentTarget.offsetLeft;
//触点在图片中的X轴
tabY = e.detail.y - e.currentTarget.offsetTop;
//触点在图片中的Y轴
这个已经试了好像也能行，但仅限于不在 scroll-view 中的图片。
个人感觉图片热点这个功能还是有用的。更进一步畅想：如果设置热区时的坐标系是在图片像素体系下，而不是在显示尺寸体系下那就更好了。这样才符合咱们小程序的精神嘛:-)。
3行每行5个按钮，按钮是上图下文字。 客户需要小程序的界面与设计的丝毫不差。我不想一个一个截取图标了，想整张图放上去，然后通过热点，点击不同的按钮定位到不同的页面。
咦，还有这样的需求？很好奇你想做的是怎么的小程序，好奇心+1+1+1
3行每行5个按钮，按钮是上图下文字。 客户需要小程序的界面与设计的丝毫不差。我不想一个一个截取图标了，想整张图放上去，然后通过热点，点击不同的按钮定位到不同的页面。您有更好的建议吗？
这么尴尬的吗，差一点点应该看不出来滴。再然后，canvas了解下，应该能解决的问题。
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
tap 事件有坐标，请看文档 ： https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
图片实际大小要在 bindload 事件获取
您说的没错，但坐标都是基于整个页面的，我目前变通的做法是：
vartabX = e.detail.x - e.currentTarget.offsetLeft;//触点在图片中的X轴vartabY = e.detail.y - e.currentTarget.offsetTop;//触点在图片中的Y轴这个已经试了好像也能行，但仅限于不在 scroll-view 中的图片。
个人感觉图片热点这个功能还是有用的。更进一步畅想：如果设置热区时的坐标系是在图片像素体系下，而不是在显示尺寸体系下那就更好了。这样才符合咱们小程序的精神嘛:-)。
3行每行5个按钮，按钮是上图下文字。 客户需要小程序的界面与设计的丝毫不差。我不想一个一个截取图标了，想整张图放上去，然后通过热点，点击不同的按钮定位到不同的页面。
咦，还有这样的需求？很好奇你想做的是怎么的小程序，好奇心+1+1+1
3行每行5个按钮，按钮是上图下文字。 客户需要小程序的界面与设计的丝毫不差。我不想一个一个截取图标了，想整张图放上去，然后通过热点，点击不同的按钮定位到不同的页面。您有更好的建议吗？
这么尴尬的吗，差一点点应该看不出来滴。再然后，canvas了解下，应该能解决的问题。