312 lines
11 KiB
JavaScript
312 lines
11 KiB
JavaScript
|
var i=2
|
|||
|
|
let videostart=true;
|
|||
|
|
function initDrawReact (id,fn) {
|
|||
|
|
console.log("入口")
|
|||
|
|
console.log("id="+id)
|
|||
|
|
var drawArear = document.getElementById(id); // 获取画布元素
|
|||
|
|
// 创建矩形框
|
|||
|
|
var drawReact = document.createElement('div');
|
|||
|
|
drawReact.id =id+'_box'
|
|||
|
|
drawReact.style.boxSizing = 'border-box'
|
|||
|
|
drawReact.style.border = '1px solid red'
|
|||
|
|
drawReact.style.position = 'absolute'
|
|||
|
|
drawReact.style.display = 'none'
|
|||
|
|
drawArear.appendChild(drawReact)
|
|||
|
|
// 绑定鼠标事件--onmousedown
|
|||
|
|
drawArear.onmousedown = function ($event) {
|
|||
|
|
// document.ondblclick=function($event){//双击事件
|
|||
|
|
// if(i%2==0){
|
|||
|
|
// i=1;
|
|||
|
|
// $("#windowbox").fullScreen()
|
|||
|
|
// }else{
|
|||
|
|
// i=2;
|
|||
|
|
// $("#windowbox").exitScreen()
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
var is3D=localStorage.getItem("threeD");
|
|||
|
|
if(is3D=='false'|| is3D=='' || is3D==null){
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if($event.button=='2'){
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
drawArear = document.getElementById(id); // 获取画布元素
|
|||
|
|
// 初始化
|
|||
|
|
var drawReact = document.getElementById(id+'_box'); // 获取矩形框元素
|
|||
|
|
var areaInfo = drawArear.getBoundingClientRect(); // 返回元素的大小及其相对于视口的位置
|
|||
|
|
var height=1000/areaInfo.height;//分为100分
|
|||
|
|
var width=1000/areaInfo.width;
|
|||
|
|
var reactWidth, reactHeight, reactTop, reactLeft; // 定义矩形框的宽、高、top、left
|
|||
|
|
// xy坐标是以画布的左上角为原点，方向矢量以向下和向右为正方向。
|
|||
|
|
var beginPoint = {}; // 标记起点
|
|||
|
|
var endPoint = {}; // 标记终点
|
|||
|
|
drawReact.style.zIndex="20000";
|
|||
|
|
drawReact.style.display = 'block'; // 进入画布按下鼠标显示默认矩形框
|
|||
|
|
// 鼠标按下的位置作为矩形框的起点，横纵坐标记为 x0, y0
|
|||
|
|
beginPoint = { x: $event.clientX - areaInfo.x, y: $event.clientY - areaInfo.y }
|
|||
|
|
// 起点的横坐标
|
|||
|
|
var x0 = $event.clientX - areaInfo.x;
|
|||
|
|
// 起点的纵坐标
|
|||
|
|
var y0 = $event.clientY - areaInfo.y;
|
|||
|
|
// 绑定鼠标事件--onmousemove
|
|||
|
|
document.onmousemove = function ($event) {
|
|||
|
|
// 终点的横坐标
|
|||
|
|
var x1 = $event.clientX - areaInfo.x;
|
|||
|
|
// 终点的纵坐标
|
|||
|
|
var y1 = $event.clientY - areaInfo.y;
|
|||
|
|
// 对终点相对于起点的位置进行分类讨论
|
|||
|
|
if (x1 >= x0 && y1 < y0) {
|
|||
|
|
// x 越界处理
|
|||
|
|
reactWidth = $event.clientX >= areaInfo.right ? areaInfo.width - x0 : x1 - x0;
|
|||
|
|
reactLeft = x0;
|
|||
|
|
// y 越界处理
|
|||
|
|
reactHeight = $event.clientY <= areaInfo.top ? y0 : y0 - y1;
|
|||
|
|
reactTop = $event.clientY <= areaInfo.top ? 0 : y1;
|
|||
|
|
// 终点
|
|||
|
|
endPoint = { x: x0 + reactWidth, y: y0 - reactHeight };
|
|||
|
|
} else if (x1 < x0 && y1 < y0) {
|
|||
|
|
// x 越界处理
|
|||
|
|
reactWidth = $event.clientX <= areaInfo.left ? x0 : x0 - x1;
|
|||
|
|
reactLeft = $event.clientX <= areaInfo.left ? 0 : x1;
|
|||
|
|
// y 越界处理
|
|||
|
|
reactHeight = $event.clientY <= areaInfo.top ? y0 : y0 - y1;
|
|||
|
|
reactTop = $event.clientY <= areaInfo.top ? 0 : y1;
|
|||
|
|
// 终点
|
|||
|
|
endPoint = { x: x0 - reactWidth, y: y0 - reactHeight };
|
|||
|
|
} else if (x1 < x0 && y1 >= y0) {
|
|||
|
|
// x 越界处理
|
|||
|
|
reactWidth = $event.clientX <= areaInfo.left ? x0 : x0 - x1;
|
|||
|
|
reactLeft = $event.clientX <= areaInfo.left ? 0 : x1;
|
|||
|
|
// y 越界处理
|
|||
|
|
reactHeight = $event.clientY >= areaInfo.bottom ? areaInfo.height - y0 : y1 - y0;
|
|||
|
|
reactTop = y0;
|
|||
|
|
// 终点
|
|||
|
|
endPoint = { x: x0 - reactWidth, y: y0 + reactHeight };
|
|||
|
|
} else if (x1 >= x0 && y1 >= y0) {
|
|||
|
|
// x 越界处理
|
|||
|
|
reactWidth = $event.clientX >= areaInfo.right ? areaInfo.width - x0 : x1 - x0;
|
|||
|
|
reactLeft = x0
|
|||
|
|
// y 越界处理
|
|||
|
|
reactHeight = $event.clientY >= areaInfo.bottom ? areaInfo.height - y0 : y1 - y0;
|
|||
|
|
reactTop = y0;
|
|||
|
|
// 终点
|
|||
|
|
endPoint = { x: x0 + reactWidth, y: y0 + reactHeight };
|
|||
|
|
}
|
|||
|
|
drawReact.style.width = reactWidth + 'px'; // 宽
|
|||
|
|
drawReact.style.height = reactHeight + 'px'; // 高
|
|||
|
|
drawReact.style.top = reactTop + 'px';
|
|||
|
|
drawReact.style.left = reactLeft + 'px';
|
|||
|
|
}
|
|||
|
|
// 绑定鼠标事件--onmousedown
|
|||
|
|
document.onmouseup = function ($event) {
|
|||
|
|
document.onmousemove = null
|
|||
|
|
document.onmouseup = null
|
|||
|
|
// 回调
|
|||
|
|
var options = { reactWidth, reactHeight, reactTop, reactLeft, beginPoint, endPoint ,id}
|
|||
|
|
|
|||
|
|
options.beginPoint.x=options.beginPoint.x*width;
|
|||
|
|
options.beginPoint.y=options.beginPoint.y*height;
|
|||
|
|
options.endPoint.x=options.endPoint.x*width;
|
|||
|
|
options.endPoint.y=options.endPoint.y*height;
|
|||
|
|
// console.log( options.beginPoint.x);
|
|||
|
|
// console.log( options.beginPoint.y);
|
|||
|
|
// console.log( options.endPoint.x);
|
|||
|
|
// console.log( options.endPoint.y);
|
|||
|
|
fn(options)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
const windowbox = document.getElementById('windowbox');
|
|||
|
|
const fullscreenElement = document.getElementById('fullscreenElement');
|
|||
|
|
const contextMenu = document.getElementById('custom-context-menu');
|
|||
|
|
|
|||
|
|
// 全屏状态变化检测
|
|||
|
|
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|||
|
|
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
|
|||
|
|
document.addEventListener('msfullscreenchange', handleFullscreenChange);
|
|||
|
|
|
|||
|
|
function handleFullscreenChange() {
|
|||
|
|
const isFullscreen = document.fullscreenElement ||
|
|||
|
|
document.webkitFullscreenElement ||
|
|||
|
|
document.msFullscreenElement;
|
|||
|
|
console.log('全屏状态变化:', isFullscreen ? '进入全屏' : '退出全屏');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 自定义右键菜单实现
|
|||
|
|
let menuTarget = null;
|
|||
|
|
|
|||
|
|
// 禁用默认右键菜单
|
|||
|
|
document.addEventListener('contextmenu', function(e) {
|
|||
|
|
// 在视频上右键时才显示自定义菜单
|
|||
|
|
console.log("target",e.target);
|
|||
|
|
if(videostart){
|
|||
|
|
$("#start_video").css("display","");
|
|||
|
|
$("#end_video").css("display","none");
|
|||
|
|
}else{
|
|||
|
|
$("#start_video").css("display","none");
|
|||
|
|
$("#end_video").css("display","");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (e.target === windowbox || e.target === fullscreenElement || e.target === videoPlayer) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.stopPropagation();
|
|||
|
|
menuTarget = e.target;
|
|||
|
|
showContextMenu(e);
|
|||
|
|
initContextMenu();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 显示自定义菜单（全屏兼容版）
|
|||
|
|
function showContextMenu(e) {
|
|||
|
|
const x = e.clientX;
|
|||
|
|
const y = e.clientY;
|
|||
|
|
|
|||
|
|
// 全屏模式下特殊处理坐标
|
|||
|
|
let adjustedX = x;
|
|||
|
|
let adjustedY = y;
|
|||
|
|
|
|||
|
|
// 检查是否在全屏模式下
|
|||
|
|
const isFullscreen = document.fullscreenElement ||
|
|||
|
|
document.webkitFullscreenElement ||
|
|||
|
|
document.msFullscreenElement;
|
|||
|
|
|
|||
|
|
if (isFullscreen) {
|
|||
|
|
// 全屏模式下使用layerX/layerY获取相对坐标
|
|||
|
|
adjustedX = e.layerX || e.offsetX || x;
|
|||
|
|
adjustedY = e.layerY || e.offsetY || y;
|
|||
|
|
|
|||
|
|
// 确保菜单不会超出全屏元素边界
|
|||
|
|
const rect = isFullscreen.getBoundingClientRect();
|
|||
|
|
const menuWidth = contextMenu.offsetWidth;
|
|||
|
|
const menuHeight = contextMenu.offsetHeight;
|
|||
|
|
|
|||
|
|
if (adjustedX + menuWidth > rect.width) {
|
|||
|
|
adjustedX = rect.width - menuWidth - 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (adjustedY + menuHeight > rect.height) {
|
|||
|
|
adjustedY = rect.height - menuHeight - 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 全屏模式下需要将菜单附加到全屏元素内部
|
|||
|
|
isFullscreen.appendChild(contextMenu);
|
|||
|
|
} else {
|
|||
|
|
// 非全屏模式下附加到body
|
|||
|
|
document.body.appendChild(contextMenu);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
contextMenu.style.left = adjustedX + 'px';
|
|||
|
|
contextMenu.style.top = adjustedY + 'px';
|
|||
|
|
contextMenu.style.display = 'block';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* // 菜单项点击处理
|
|||
|
|
contextMenu.addEventListener('click', function(e) {
|
|||
|
|
console.log(111111111111);
|
|||
|
|
const menuItem = e.target.closest('.context-menu-item');
|
|||
|
|
console.log(22222222222);
|
|||
|
|
console.log("menuItem",menuItem);
|
|||
|
|
if (!menuItem) return;
|
|||
|
|
|
|||
|
|
const action = menuItem.getAttribute('data-action');
|
|||
|
|
console.log(333333);
|
|||
|
|
console.log("action",action);
|
|||
|
|
switch (action) {
|
|||
|
|
case 'copy':
|
|||
|
|
console.log('执行copy操作');
|
|||
|
|
break;
|
|||
|
|
case 'paste':
|
|||
|
|
console.log('执行paste操作');
|
|||
|
|
break;
|
|||
|
|
case 'exit-fullscreen':
|
|||
|
|
exitFullscreen();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
contextMenu.style.display = 'none';
|
|||
|
|
});*/
|
|||
|
|
|
|||
|
|
// 替换原来的菜单事件处理代码
|
|||
|
|
function initContextMenu() {
|
|||
|
|
// 1. 确保菜单元素可以接收事件
|
|||
|
|
contextMenu.style.pointerEvents = 'auto';
|
|||
|
|
|
|||
|
|
// 2. 使用mousedown而不是click（更早捕获事件）
|
|||
|
|
contextMenu.addEventListener('mousedown', function(e) {
|
|||
|
|
e.stopImmediatePropagation();
|
|||
|
|
}, true); // 捕获阶段
|
|||
|
|
|
|||
|
|
// 3. 为每个菜单项单独绑定事件
|
|||
|
|
const items = contextMenu.querySelectorAll('.context-menu-item');
|
|||
|
|
items.forEach(item => {
|
|||
|
|
// 阻止所有可能干扰的事件
|
|||
|
|
['mousedown', 'mouseup', 'click', 'touchstart'].forEach(event => {
|
|||
|
|
item.addEventListener(event, function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.stopPropagation();
|
|||
|
|
e.stopImmediatePropagation();
|
|||
|
|
|
|||
|
|
// 只在mouseup或touchend时触发动作
|
|||
|
|
if (event === 'mouseup' || event === 'touchend') {
|
|||
|
|
const action = this.getAttribute('data-action');
|
|||
|
|
handleMenuAction(action);
|
|||
|
|
contextMenu.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return false;
|
|||
|
|
}, true); // 捕获阶段
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 特别处理全屏状态
|
|||
|
|
item.addEventListener('click', function(e) {
|
|||
|
|
if (document.fullscreenElement) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const action = this.getAttribute('data-action');
|
|||
|
|
handleMenuAction(action);
|
|||
|
|
contextMenu.style.display = 'none';
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 4. 全局点击隐藏菜单（使用捕获阶段）
|
|||
|
|
document.addEventListener('click', function(e) {
|
|||
|
|
if (!contextMenu.contains(e.target)) {
|
|||
|
|
contextMenu.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
}, true);
|
|||
|
|
|
|||
|
|
// 5. 全屏状态变化时重新附加菜单
|
|||
|
|
document.addEventListener('fullscreenchange', function() {
|
|||
|
|
if (!document.fullscreenElement) {
|
|||
|
|
document.body.appendChild(contextMenu);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理菜单动作
|
|||
|
|
function handleMenuAction(action) {
|
|||
|
|
switch (action) {
|
|||
|
|
case 'save_image':
|
|||
|
|
screenshot();
|
|||
|
|
break;
|
|||
|
|
case 'start_video':
|
|||
|
|
videostart=false;
|
|||
|
|
$("#videoLocal").click()
|
|||
|
|
break;
|
|||
|
|
case 'end_video':
|
|||
|
|
videostart=true;
|
|||
|
|
$("#videoLocal").click()
|
|||
|
|
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
console.log('未知动作:', action);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|