79 lines
3.0 KiB
JavaScript
79 lines
3.0 KiB
JavaScript
// src/composables/useCanvasPointer.js
|
||
import { ref } from "vue";
|
||
|
||
/**
|
||
* @param {{ phone, toBuffer, getWs: (index:number)=>WebSocket|null }} deps
|
||
* 依赖项对象，包含手机信息、缓冲转换和WebSocket获取函数
|
||
*/
|
||
export function useCanvasPointer(deps) {
|
||
const { phone, toBuffer, getWs } = deps;
|
||
|
||
const canvasRef = ref({}); // { [udid]: HTMLCanvasElement } - 存储设备ID到Canvas元素的映射
|
||
const frameMeta = ref({}); // { [udid]: { w,h, rotation? } } - 存储设备ID到帧元数据的映射
|
||
|
||
/**
|
||
* 初始化画布
|
||
* @param {string} udid - 设备唯一标识符
|
||
*/
|
||
function initCanvas(udid) {
|
||
const canvas = canvasRef.value[udid];
|
||
if (!canvas) return;
|
||
const dpr = window.devicePixelRatio || 1; // 获取设备像素比
|
||
// 设置画布样式尺寸
|
||
canvas.style.width = `${phone.value.width * 1.4}px`;
|
||
canvas.style.height = `${phone.value.height * 1.4}px`;
|
||
// 设置画布实际像素尺寸
|
||
canvas.width = phone.value.width * 1.4 * dpr;
|
||
canvas.height = phone.value.height * 1.4 * dpr;
|
||
const ctx = canvas.getContext("2d");
|
||
ctx.scale(dpr, dpr);
|
||
// 可选：参考网格（已设为透明）
|
||
ctx.strokeStyle = "#ffffff00";
|
||
for (let x = 0; x <= phone.value.width; x += 100) {
|
||
ctx.beginPath();
|
||
ctx.moveTo(x, 0);
|
||
ctx.lineTo(x, phone.value.height);
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
|
||
function getCanvasCoordinate(event, udid) {
|
||
const canvas = canvasRef.value[udid];
|
||
const rect = canvas.getBoundingClientRect();
|
||
const rx = (event.clientX - rect.left) / rect.width;
|
||
const ry = (event.clientY - rect.top) / rect.height;
|
||
|
||
const meta = frameMeta.value[udid] || { w: 320, h: 720, rotation: 0 };
|
||
let x = rx * meta.w;
|
||
let y = ry * meta.h;
|
||
|
||
switch (meta.rotation ?? 0) {
|
||
case 90: [x, y] = [meta.w - y, x]; break;
|
||
case 180: [x, y] = [meta.w - x, meta.h - y]; break;
|
||
case 270: [x, y] = [y, meta.h - x]; break;
|
||
}
|
||
x = Math.max(0, Math.min(meta.w - 1, x));
|
||
y = Math.max(0, Math.min(meta.h - 1, y));
|
||
return { x: Math.round(x), y: Math.round(y), w: meta.w, h: meta.h };
|
||
}
|
||
|
||
// 统一发包：point 用帧坐标，screenSize 用帧宽高
|
||
function sendPointer(udid, index, action /* 0 down,1 up,2 move */, x, y) {
|
||
const meta = frameMeta.value[udid] || { w: 320, h: 720, rotation: 0 };
|
||
const payload = {
|
||
type: 2,
|
||
action,
|
||
pointerId: 0,
|
||
position: { point: { x, y }, screenSize: { width: meta.w, height: meta.h } },
|
||
pressure: action === 1 ? 0 : 1,
|
||
buttons: action === 1 ? 0 : 1,
|
||
};
|
||
const ws = getWs(index);
|
||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||
ws.send(toBuffer(payload));
|
||
}
|
||
}
|
||
|
||
return { canvasRef, frameMeta, initCanvas, getCanvasCoordinate, sendPointer };
|
||
}
|