b-canvas
基础库 3.18.0 开始支持，低版本需做兼容处理，涉及API：bl.createCanvasContext。
画布
参数
| 属性 | 类型 | 默认值 | 必填 | 说明 | 版本 |
|---|---|---|---|---|---|
| canvas-id | string | 是 | canvas 组件的唯一标识符 | 3.18.0 | |
| disable-scroll | boolean | false | 否 | 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 | 3.18.0 |
| touchstart | eventhandle | 否 | 手指触摸动作开始 | 3.18.0 | |
| touchmove | eventhandle | 否 | 手指触摸后移动 | 3.18.0 | |
| touchend | eventhandle | 否 | 手指触摸动作结束 | 3.18.0 | |
| touchcancel | eventhandle | 否 | 手指触摸动作被打断，如来电提醒，弹窗 | 3.18.0 | |
| longtap | eventhandle | 否 | 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 | 3.18.0 | |
| error | eventhandle | 否 | 当发生错误时触发 error 事件，detail = {errMsg} | 3.18.0 | |
| resize | eventhandle | 否 | 当改变 canvas 的宽高，会触发 resize 事件 | 3.42.0 |
示例代码
<template>
<b-canvas canvas-id="myCanvas"></b-canvas>
</template>
<script>
export default {
data() {
return {};
},
onReady(){
let _ctx = bl.createCanvasContext('myCanvas');
_ctx.beginPath();
_ctx.moveTo(20,20);
_ctx.quadraticCurveTo(20,100,200,20);
_ctx.stroke();
_ctx.draw();
},
methods: {}
};
</script>
<style lang="less" scoped></style>
Bug & Tip
- tip：canvas 标签默认宽度300px、高度150px
- tip：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将不再正常工作
- tip：请注意原生组件使用限制
- tip：resize 事件的触发可能会由于使用特殊样式单位（百分比、vw、vh等）引起的横竖屏变化触发。