Question

我的画布使用Hammer JS时遇到了一些问题。

我解释一下;

我有一个像这样定义的画布：

<canvas id="myCanvas"></canvas>

在这个画布中，我添加了一些Img：

var s = new CanvasState(document.getElementById('myCanvas');
s.addImg(new Img(100, 0, data.image, data.identifiant));

而且，我想用Hammer JS旋转我的新Img。

为此，我尝试了类似的事情：

var hammertime = new Hammer(document.getElementById('myCanvas'));
hammertime.on('pan', function(ev) {
            console.log(ev);
        });
hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

我不知道应该放什么代替myCanvas。我试过类似myCanvas.selection（IMG OBJECT）的东西，但是徒劳无功..

有什么想法吗？任何已经使用过画布的Hammer JS的人都有元素/对象吗？

似乎hammerJS无法识别对象..

由于

Answer 1

您可以使用 Fabric.js 库。它是画布库，可帮助您更轻松地与其交互。重点是 -hammerjs 与 Fabric.js 配合得非常好。

在初始化 Fabric.js 后，您需要做的就是：

const hammertime = new Hammer(canvas.upperCanvasEl);

hammertime.get('pinch').set({ enable: true });
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });

hammertime.on('pan', (ev) => {
  alert("pan!");
});

请注意，如果您想启用捏合手势，您需要启用它。

"canvas" 是 Fabric.js 初始化的画布元素。

"upperCanvasEl" 由 Fabric.js 生成并拦截所有事件。请注意，如果您使用 TypeScript，它尚不支持此属性，因此您需要将其强制转换为“any”。

用帆布锤子js

1 个答案: