0.0.7 • Published 1 year ago
@antv/f6-wx v0.0.7
f6 for wx
微信小程序中快速使用 F6 的小工具，帮助用户封装了一些基础的操作，用户也可以参考这里的封装自行处理
基础参数
| 属性名 | 默认值 | 类型 | 是否必传 | 描述 |
|---|---|---|---|---|
| width | 100 | Number | 否 | canvas 的宽度，这个值是页面中组件的宽度 |
| height | 100 | Number | 否 | canvas 的高度，这个值是页面中组件的高度 |
| pixelRatio | 1 | Number | 否 | 设备像素比，这个字段很关键！！！不传递绘制的图非高清！！！字段来自 getSystemInfo/getSystemInfoSync |
| onInit | 空 | Function | 否 | canvas 初始化完成后返回，会携带相关的信息回来，具体看下方表格 |
| onTouchEvent | 空 | Function | 否 | 所有的 touch 事件都来源这里，如果需要 f6 处理事件，都需自行传递，未统一处理的原因为，业务方可能需自行定制 |
| onError | 空 | Function | 否 | canvas 创建失败的回调 |
| style | 空 | String | 否 | 就是简单的 css 样式 |
onInit 函数的回调
| 参数 | 描述 |
|---|---|
| context | canvas 的 context，由组件创建 |
| rect | 组件当前所在的位置 |
| canvas | native canvas 返回的 element |
| renderer | 渲染模式，在小程序下，f6 由两种模式， mini 和 mini-native 分别对应 web-canvas 和 native-canvas |
推荐组件
目前存在 2 个组件，一个是 container，另一个是 canvas，container 写法限制性较多，建议使用 canvas，两个组件差别不大，只是事件回传的操作些许区别。
- canvas(推荐)
canvas 使用 bind:来触发事件，会更容易和原有代码结合
<f6-canvas
width="{{width}}"
height="{{height}}"
forceMini="{{forceMini}}"
pixelRatio="{{pixelRatio}}"
bind:onTouchEvent="handleTouch"
bind:onInit="handleInit"
></f6-canvas>js 中处理事件
Page({
data: {
},
handleInit(ctx, rect, canvas, renderer) {
},
handleTouch(e) {
},
})- container
<f6-canvas
width="{{width}}"
height="{{height}}"
forceMini="{{forceMini}}"
pixelRatio="{{pixelRatio}}"
onTouchEvent="{{handleTouch}}"
onInit="{{handleInit}}"
></f6-canvas>js 中处理事件, 如果使用 container，只能在 data 中处理逻辑
Page({
data: {
...
handleInit(ctx, rect, canvas, renderer) {
},
handleTouch(e) {
},
},
})