问题描述
我将fabricjs 用于画布,将hammerjs 用于Angular 9 的触摸事件。我有一个hammerjs 的单击事件,它创建了fabric 的IText 对象。单击可创建结构并将其填充到画布上,但设备键盘不会打开以在文本对象中添加文本。 fabricjs 的 IText 在内部创建 TEXTAREA 以允许输入文本。
尝试过:
1. canvas.getActiveObject().enterEditing();
canvas.getActiveObject().hiddenTextarea.focus();
2. document.querySelector('[data-fabric-hiddentextarea]').setAttribute("autofocus","");
document.querySelector('[data-fabric-hiddentextarea]').focus();
document.querySelector('[data-fabric-hiddentextarea]').click();
也使用 settimeout 尝试了上述解决方案。
请推荐。 提前致谢
解决方法
通过使用 VanilaJS touchend
事件找到了一种方法。必须删除 HammerJS 的 doubletap
事件并使用 touchend
事件。
let element = document.getElementById('canvasId');
let timedout;
let lastTaped = 0;
element.addEventListener('touchend',(event) => {
var currentTime = new Date().getTime();
var tapLength = currentTime - lastTaped;
clearTimeout(timedout);
if (tapLength < 500 && tapLength > 0) {
// code to add the iText object
event.preventDefault();
}
lastTaped = currentTime;
}
});
谢谢 :) 继续编码