119 lines
5.2 KiB
Plaintext
119 lines
5.2 KiB
Plaintext
var i=2
|
||
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;
|
||
window.videos.fullScreen();
|
||
}else{
|
||
i=2;
|
||
window.videos.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)
|
||
}
|
||
}
|
||
} |