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);
|
||
}
|
||
}
|
||
}); |