在触摸屏上的画布上显示上下文菜单
作者: alfonsito92创建于 2025年3月19日更新于 2025年3月28日
const handleTouchStart = (event) => { if (event.touches.length === 1) { // Store the touch start time for long press detection touchStartTime = Date.now(); } else if (event.touches.length === 2) { // Start pinch-to-zoom const [touch1, touch2] = event.touches; initialDistance = Math.hypot( touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY ); initialScale = canvas.ds.scale; } event.preventDefault(); // Prevent default touch behavior (e.g., scrolling) };
const handleTouchEnd = (event) => { if (event.touches.length === 0) { const touchDuration = Date.now() - touchStartTime; const touch = event.changedTouches[0];
if (touchDuration >= LONG_PRESS_DURATION) {
const touch = event.changedTouches[0];
const rightClickEvent = new MouseEvent("contextmenu", {
bubbles: true,
cancelable: true,
view: window,
clientX: touch.clientX,
clientY: touch.clientY,
});
canvasElement.dispatchEvent(rightClickEvent);
} else {
const mouseDownEvent = new MouseEvent("mousedown", {
bubbles: true,
cancelable: true,
view: window,
clientX: touch.clientX,
clientY: touch.clientY,
});
const mouseUpEvent = new MouseEvent("mouseup", {
bubbles: true,
cancelable: true,
clientX: touch.clientX,
clientY: touch.clientY,
});
canvasElement.dispatchEvent(mouseDownEvent);
setTimeout(() => {
canvasElement.dispatchEvent(mouseUpEvent);
}, 50); // Small delay to ensure proper handling
}
} };
内容来源: jagenjo/litegraph.js