You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
2.5 KiB
124 lines
2.5 KiB
1 year ago
|
<template>
|
||
|
|
<canvas v-if="canvasId" class="ec-canvas" :id="canvasId" :canvasId="canvasId" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @error="error"></canvas>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import WxCanvas from './wx-canvas';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
canvasId: {
|
||
|
|
type: String,
|
||
|
|
default: 'ec-canvas'
|
||
|
|
},
|
||
|
|
lazyLoad: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
disableTouch: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
throttleTouch: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// #ifdef H5
|
||
|
|
mounted() {
|
||
|
|
if (!this.lazyLoad) this.init();
|
||
|
|
},
|
||
|
|
// #endif
|
||
|
|
// #ifndef H5
|
||
|
|
onReady() {
|
||
|
|
if (!this.lazyLoad) this.init();
|
||
|
|
},
|
||
|
|
// #endif
|
||
|
|
methods: {
|
||
|
|
setChart(chart){
|
||
|
|
this.chart = chart
|
||
|
|
},
|
||
|
|
init() {
|
||
|
|
const { canvasId } = this;
|
||
|
|
this.ctx = wx.createCanvasContext(canvasId, this);
|
||
|
|
|
||
|
|
this.canvas = new WxCanvas(this.ctx, canvasId);
|
||
|
|
|
||
|
|
const query = wx.createSelectorQuery().in(this);
|
||
|
|
query
|
||
|
|
.select(`#${canvasId}`)
|
||
|
|
.boundingClientRect(res => {
|
||
|
|
if (!res) {
|
||
|
|
setTimeout(() => this.init(), 50);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.$emit('onInit', {
|
||
|
|
width: res.width,
|
||
|
|
height: res.height
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.exec();
|
||
|
|
},
|
||
|
|
canvasToTempFilePath(opt) {
|
||
|
|
const { canvasId } = this;
|
||
|
|
this.ctx.draw(true, () => {
|
||
|
|
wx.canvasToTempFilePath({
|
||
|
|
canvasId,
|
||
|
|
...opt
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
touchStart(e) {
|
||
|
|
const { disableTouch, chart } = this;
|
||
|
|
if (disableTouch || !chart || !e.mp.touches.length) return;
|
||
|
|
const touch = e.mp.touches[0];
|
||
|
|
chart._zr.handler.dispatch('mousedown', {
|
||
|
|
zrX: touch.x,
|
||
|
|
zrY: touch.y
|
||
|
|
});
|
||
|
|
chart._zr.handler.dispatch('mousemove', {
|
||
|
|
zrX: touch.x,
|
||
|
|
zrY: touch.y
|
||
|
|
});
|
||
|
|
},
|
||
|
|
touchMove(e) {
|
||
|
|
const { disableTouch, throttleTouch, chart, lastMoveTime } = this;
|
||
|
|
if (disableTouch || !chart || !e.mp.touches.length) return;
|
||
|
|
|
||
|
|
if (throttleTouch) {
|
||
|
|
const currMoveTime = Date.now();
|
||
|
|
if (currMoveTime - lastMoveTime < 240) return;
|
||
|
|
this.lastMoveTime = currMoveTime;
|
||
|
|
}
|
||
|
|
|
||
|
|
const touch = e.mp.touches[0];
|
||
|
|
chart._zr.handler.dispatch('mousemove', {
|
||
|
|
zrX: touch.x,
|
||
|
|
zrY: touch.y
|
||
|
|
});
|
||
|
|
},
|
||
|
|
touchEnd(e) {
|
||
|
|
const { disableTouch, chart } = this;
|
||
|
|
if (disableTouch || !chart) return;
|
||
|
|
const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};
|
||
|
|
chart._zr.handler.dispatch('mouseup', {
|
||
|
|
zrX: touch.x,
|
||
|
|
zrY: touch.y
|
||
|
|
});
|
||
|
|
chart._zr.handler.dispatch('click', {
|
||
|
|
zrX: touch.x,
|
||
|
|
zrY: touch.y
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.ec-canvas {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
</style>
|