antvis / wx-f2

F2 的微信小程序
MIT License
1.28k stars 185 forks source link

getRelativePosition不兼容 #90

Open secreter opened 6 years ago

secreter commented 6 years ago

小程序里这段代码报错,我想绑定点击事件,不知道还有什么好方法可以获取点击区域的原始数据。

const chart = new Chart({});

const mousePoint = {
  x: 10,
  y:39
};

const canvasPoint = F2.Util.getRelativePosition(mousePoint, chart.get('canvas'));

报错信息

thirdScriptError
n.getBoundingClientRect is not a function; [Component] Event Handler Error @ pages/task_detail/main#bound handleProxy
TypeError: n.getBoundingClientRect is not a function
at Object.getRelativePosition (http://127.0.0.1:53519/appservice/pages/task_detail/main.js:1715:23)
    at VueComponent.handleClick (http://127.0.0.1:53519/appservice/pages/task_detail/main.js:180:82)
    at Array.boundFn (http://127.0.0.1:53519/appservice/common/vendor.js:276:60)
    at Vue$3.handleProxyWithVue [as $handleProxyWithVue] (http://127.0.0.1:53519/appservice/common/vendor.js:5321:36)
    at c.handleProxy (http://127.0.0.1:53519/appservice/common/vendor.js:4963:32)
    at Object.r.safeCallback (http://127.0.0.1:53519/appservice/__dev__/WAService.js:17:14313)
    at http://127.0.0.1:53519/appservice/__dev__/WAService.js:19:25278
    at p (http://127.0.0.1:53519/appservice/__dev__/WAService.js:19:27514)
    at http://127.0.0.1:53519/appservice/__dev__/WAService.js:19:26815
    at n (http://127.0.0.1:53519/appservice/__dev__/WAService.js:5:1819)
simaQ commented 6 years ago

小程序貌似没有提供 getBoundingClientRect() 这个 api

secreter commented 6 years ago

你们可以抽象一个出来兼容F2.Util吗

simaQ commented 6 years ago

恩,我明天先调研尝试一下

secreter commented 6 years ago

感谢~加油鸭

YangLuYang commented 5 years ago

我解决了这个问题,

let point = {
      x: event.touches[0].clientX, //距离左上角距离,横向
      y: event.touches[0].clientY //距离左上角距离,纵向
    }
    // 获取canvas组件的元素
    wx.createSelectorQuery()
      .select('#month_chart')
      .boundingClientRect()
      .exec((res)=>{
        // 计算在canvas中的坐标
        point.x = point.x - res[0].left
        point.y = point.y - res[0].top
        const data = chart.getSnapRecords(point)[0]
        console.log('当前点击的数据为:')
        console.log(data._origin)
    })