Greasy Fork

大佬，如果我想显示鼠标轨迹，应该怎么修改。

// ==UserScript==
// @name My Mouse Gestures
// @name:zh-CN 我的鼠标手势
// @name:zh-TW 我的滑鼠手勢
// @description A simple mouse gesture script with trace display
// @description:zh-CN 一个简单的鼠标手势脚本，带轨迹和手势文本显示
// @description:zh-TW 一個簡單的滑鼠手勢腳本，帶軌跡和手勢文本顯示
// @version 0.2.3
// @match *://*/*
// @run-at document-start
// @grant GM_openInTab
// @grant window.close
// @grant GM_setValue
// @grant GM_getValue
// @namespace http://greasyfork.icu/users/4968
// @downloadURL https://update.greasyfork.icu/scripts/4776/My%20Mouse%20Gestures.user.js
// @updateURL https://update.greasyfork.icu/scripts/4776/My%20Mouse%20Gestures.meta.js
// ==/UserScript==

// --- Settings ---

const SENSITIVITY = 3; // 1 ~ 5
const TOLERANCE = 3; // 1 ~ 5
const TRACE_COLOR = '#4a90e2'; // 轨迹颜色
const TRACE_WIDTH = 3; // 轨迹宽度 (px)

const funcs = {
'U': () => window.scrollTo(0, 0),
'D': () => window.scrollTo(0, 1073741824),
'L': () => window.history.back(),
'R': () => window.history.forward(),
'DR': () => window.top.close(),
'UD': () => window.location.reload(),
'RU': () => {
GM_openInTab('about:newtab', false);
if (navigator.userAgent.indexOf('Firefox') !== -1) {
GM_openInTab('about:blank', false);
}
},
'RL': () => {
let closedTabs = GM_getValue("closedTabs", []);
if (closedTabs.length > 0) {
let lastclosedTab = closedTabs.pop();
GM_setValue("closedTabs", closedTabs);
GM_openInTab(lastclosedTab, false);
}
}
};

// ----------------

const s = 1 << ((7 - SENSITIVITY) << 1);
const t1 = Math.tan(0.15708 * TOLERANCE);
const t2 = 1 / t1;
const abs = Math.abs;

let x, y, path, lastGesture;
let traceCanvas = null;
let ctx = null;
let gestureTextDisplay = null; // 新增：手势文本显示元素

// 用于绘制轨迹线的函数
const drawTrace = (newX, newY) => {
if (ctx) {
ctx.lineTo(newX, newY);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(newX, newY);
}
};

// 用于创建 Canvas 和文本显示元素的函数
const setupGestureVisuals = (initialX, initialY) => {
// 1. 创建 Canvas (轨迹)
traceCanvas = document.createElement('canvas');
traceCanvas.id = 'mouse-gesture-trace-canvas';
traceCanvas.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2147483647;
`;

traceCanvas.width = window.innerWidth;
traceCanvas.height = window.innerHeight;

document.body.appendChild(traceCanvas);
ctx = traceCanvas.getContext('2d');

ctx.strokeStyle = TRACE_COLOR;
ctx.lineWidth = TRACE_WIDTH;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';

// 设置 Canvas 起始点
ctx.beginPath();
ctx.moveTo(initialX, initialY);

// 2. 创建文本显示 (手势操作)
gestureTextDisplay = document.createElement('div');
gestureTextDisplay.id = 'mouse-gesture-text-display';
gestureTextDisplay.style.cssText = `
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%); /* 水平居中 */
background: ${TRACE_COLOR}; /* 使用轨迹颜色作为背景 */
color: white;
padding: 8px 15px;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
font-family: sans-serif;
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
z-index: 2147483647;
pointer-events: none;
min-width: 50px;
text-align: center;
opacity: 0; /* 初始隐藏 */
transition: opacity 0.2s;
`;
gestureTextDisplay.textContent = '...';
document.body.appendChild(gestureTextDisplay);

// 短暂延迟后显示，以触发过渡效果
setTimeout(() => {
if (gestureTextDisplay) {
gestureTextDisplay.style.opacity = '1';
}
}, 10);
};


const tracer = function (e) {
const { clientX: cx, clientY: cy } = e;
const dx = cx - x;
const dy = cy - y;
const distance = dx ** 2 + dy ** 2;

if (distance > s) {
const slope = abs(dy / dx);
let direction = '';

if (slope > t1) {
direction = dy > 0 ? 'D' : 'U';
} else if (slope <= t2) {
direction = dx > 0 ? 'R' : 'L';
}

if (lastGesture !== direction) {
lastGesture = direction;
path += direction;
// 新增：更新手势文本显示
if (gestureTextDisplay) {
gestureTextDisplay.textContent = path;
}
}

drawTrace(cx, cy);

x = cx;
y = cy;
} else {
// 即使不满足距离阈值，也绘制，让轨迹更连贯
drawTrace(cx, cy);
}
};

window.addEventListener('mousedown', function (e) {
if (e.button === 2) {
x = e.clientX;
y = e.clientY;
path = "";
lastGesture = "";

// 新增：设置轨迹和文本显示
setupGestureVisuals(x, y);

window.addEventListener('mousemove', tracer, false);
}
}, false);

window.addEventListener('contextmenu', function (e) {
window.removeEventListener('mousemove', tracer, false);

// 新增：清理视觉元素 (Canvas 和文本显示)
if (traceCanvas) {
document.body.removeChild(traceCanvas);
traceCanvas = null;
ctx = null;
}
if (gestureTextDisplay) {
document.body.removeChild(gestureTextDisplay);
gestureTextDisplay = null;
}

if (path !== "") {
e.preventDefault();
if (funcs.hasOwnProperty(path)) {
funcs[path]();
}
}
}, false);

// 保持窗口大小调整处理，以防止 Canvas 错位
window.addEventListener('resize', () => {
if (traceCanvas) {
traceCanvas.width = window.innerWidth;
traceCanvas.height = window.innerHeight;
}
}, false);

window.addEventListener("beforeunload", () => {
let closedTabs = GM_getValue("closedTabs", []).slice(-10);
closedTabs.push(window.location.href);
GM_setValue("closedTabs", closedTabs);
});


增加了轨迹，和显示当前识别手势功能