自定义事件

浏览器端


document.addEventListener("mousedown", (e)=>{
    controller.down(e);
});
document.addEventListener("mousemove", (e)=>{
    controller.move(e);
});
document.addEventListener("mouseup", (e)=>{
    controller.up(e);
});

Uniapp 端

标签


<!-- 添加type为2d更流畅 -->
<canvas  
    id="canvas" 
    class="canvas" 
    type="2d" 
    @touchmove="touchMove"
	@touchstart="touchStart" 
    @touchend="touchUp" 
    mousedown="touchStart" 
    mousemove="touchMove"
    mouseup="touchUp">
</canvas>

vue2 methods内添加。vue3端转为const函数效果一致。


touchStart(e) {
	controller.down(e);
},
touchMove(e) {
	controller.move(e);
},
touchUp(e) {
   controller.up(e);
},

微信小程序、抖音小程序、App、Uni h5同Uniapp端一致。

简而言之，只需通过对应的控制器函数将你的输入事件传递给 Gesti，它便能获取你的手指或鼠标点击的位置，并能正常与画布进行交互。