时间戳

首页 > 解决方案 > 如何在移动设备上的 fabricjs 上启用和处理“点击”事件？

html5-canvas - 如何在移动设备上的 fabricjs 上启用和处理“点击”事件？

问题描述



我想在移动设备上使用fabricjs 处理事件点击。实现它的正确方法是什么？

目前，我看到在 fabricjs 源代码中实现“tap”事件。如果我想处理那个事件，我需要更改 fabricjs 源代码：

if (typeof eventjs !== 'undefined' && eventjsFunctor in eventjs) {
    eventjs[eventjsFunctor](canvasElement, 'gesture', this._onGesture);
    eventjs[eventjsFunctor](canvasElement, 'drag', this._onDrag);
    eventjs[eventjsFunctor](canvasElement, 'orientation', this._onOrientationChange);
    eventjs[eventjsFunctor](canvasElement, 'shake', this._onShake);
    eventjs[eventjsFunctor](canvasElement, 'longpress', this._onLongPress);
    eventjs[eventjsFunctor](canvasElement, 'tap', this._onLongPress);
  }

添加最后一行：

eventjs[eventjsFunctor](canvasElement, 'tap', this._onLongPress);

现在我可以通过“longpress”事件来捕捉点击事件。

this.canvas.on({'touch:longpress': function(e) {
        console.log("touch:longpress + tap");
    });

我的问题是有另一种很好的方法来处理fabricjs上的'tap'事件而无需修改fabricjs源代码并且可以通过听“touch：tap”事件名称来处理'tap'事件？

谢谢，

标签： html5-canvasfabricjsfabricjs2

解决方案

您可以使用将事件添加到uppercanvas

eventjs.add( canvas.upperCanvasEl, 'tap', onTap);
eventjs.remove( canvas.upperCanvasEl, 'tap', onTap);

function onTap(e) {
  console.log("tap");
})

推荐阅读