极客观点
项目管理
HarmonyOS
问题描述
实现在点击红色按钮一下，就画一个红色框。点一下蓝色按钮，画一个蓝色框。红、蓝框里面起始数值从1开始， 点击坐标，分别获取红蓝色的坐标。所有框可拖动。
相关代码
粘贴代码文本（请勿用截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.myImg{
height:100%;width:100%;
position: absolute;
z-index:0;margin-left:0px;margin-top:0px;
border:1px solid #ccc;
background: #000;
}
#h-coverImg{
position: relative;
z-index:1;
width: 720px;
height: 576px;
background-size: 100%;
overflow: hidden;
}
#h-coverImg .box{
position: absolute;
border: 2px solid #f00;
cursor: move;
top: 0px; left: 0px;
color: red;
font-size: 14px;
font-weight: bold;
}
#h-coverImg .box:hover{
background: rgba(255, 0, 0, .4);
}
</style>
<body>
<div id="h-coverImg" class="active" onmousemove="rect_mousemove(event)" >
<div class="myImg" border="0" draggable="false" id="region_cover" style="height:100%;width:100%;position: absolute;z-index:0;margin-left:0px;margin-top:0px;border:1px solid #ccc;"/>
</div>
</div>
<div class="" style="position: absolute; margin-left:16px">
<input type="button" onclick="Protection()" class="btn-button" value="红色框" />
<input type="button" onclick="Shielding()" class="btn-button" value="蓝色框" />
<input type="button" onclick="clear_draw()" class="btn-button mgl-20" value="清除"/>
<input type="button" onclick="coordinate()" class="btn-button mgl-20" value="坐标"/>
</div>
</body>
<!--<script language="javascript" type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>-->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
var privacy_param;
window.coordinate = function () {
var obj = document.getElementById("h-coverImg");
var privacy_object = {};
var i;
var rect_num = 0;
var rect_object = [];
for (i = 0; i < 8; i++) {
var rect = {};
if (current_box_number <= i) {
rect['x'] = 0;
rect['y'] = 0;
rect['w'] = 0;
rect['h'] = 0;
}
else {
//获取长宽，左右
var active_box = document.getElementById('draw_box' + i);
var width = parseFloat(active_box.style.width.split('p')[0]);
var height = parseFloat(active_box.style.height.split('p')[0]);
var left = parseFloat(active_box.style.left.split('p')[0]);
var top = parseFloat(active_box.style.top.split('p')[0]);
if ((left + width) >= (obj.offsetWidth - 5)) {
width += 5;
}
if ((top + height) >= (obj.offsetHeight - 5)) {
height += 5;
}
/* rect['x'] = Math.round(left / obj.offsetWidth * 10000);
rect['y'] = Math.round(top / obj.offsetHeight * 10000);
rect['w'] = Math.round(width / obj.offsetWidth * 10000);
rect['h'] = Math.round(height / obj.offsetHeight * 10000);*/
rect['x'] = Math.round(left); // 1 左
rect['y'] = Math.round(top); // 17 上
rect['w'] = Math.round((width + left)); // 714 右
rect['h'] = Math.round((height + top)); //422 下
rect_num++;
}
rect_object.push(rect);
}
privacy_object['rect'] = rect_object;
privacy_object['rect_num'] = rect_num;
/*var param = JSON.stringify(privacy_object);*/
privacy_param = privacy_object;
console.log(privacy_param);
};
$(document).ready(function () {
// 鼠标抬起
document.onmouseup = function (e) {
if (draw_begin || dragging) {
var box_id = "draw_box" + current_box_number;
var active_box;
var width; //右
var height; //下
if (dragging) {
active_box = document.getElementById(dragging_id);
startX = parseFloat(active_box.style.left.split('p')[0]); //左
startY = parseFloat(active_box.style.top.split('p')[0]); //上
}
else {
active_box = document.getElementById(box_id);
}
width = active_box.style.width.split('p');
height = active_box.style.height.split('p');
if (parseFloat(width) < 14 || parseFloat(height) < 14) {
/* toastr["info"]("屏蔽区域至少大于10个像素");*/
active_box.style.width = 0;
active_box.style.height = 0;
active_box.style.display = "none";
}
else {
if (draw_begin == true) {
current_box_number += 1;
}
}
;
/* do_set_privacy();*/
dragging = false;
draw_begin = false;
}
};
});
var dragging_id;
var dragging = false;
var draw_begin = false;
var startX = 0;
var startY = 0;
var diffX = 0;
var diffY = 0;
var start_drag_x = 0;
var start_drag_y = 0;
var end_drag_x = 0;
var end_drag_y = 0;
var current_box_number = 0;
//清楚图像
window.clear_draw = function () {
startX = 0;
startY = 0;
diffX = 0;
diffY = 0;
current_box_number = 0;
for (var i = 0; i < 8; i++) {
$('#draw_box'+i).remove();
}
id = -1;
box_num = 0;
};
//事件会在鼠标按键被按下时发生。
window.rect_mousedown = function (e) {
//var b = e | window.event;
var event = e || window.event;
var target = event.target || event.srcElement; //获取document 对象的引用
// 如果鼠标在 box 上被按下，设置屏蔽图像
if (target.id.match(/region_cover/)) {
//
if (current_box_number == 8) {
return;
}
startX = event.offsetX;
startY = event.offsetY;
var box_id = "draw_box" + current_box_number;
var active_box = document.getElementById(box_id);
active_box.style.display = "block";
active_box.style.top = startY + 'px';
active_box.style.left = startX + 'px';
active_box.style.width = 0;
active_box.style.height = 0;
draw_begin = true;
//console.log(draw_begin);
}
else {
active_box = document.getElementById(target.id);
startX = parseInt(active_box.style.left.split('p')[0]);
startY = parseInt(active_box.style.top.split('p')[0]);
// 允许拖动
dragging = true;
dragging_id = target.id;
start_drag_x = event.clientX;
start_drag_y = event.clientY;
//console.log('start_drag_x:' + event.clientX + " start_drag_y:" + event.clientY);
//console.log('startX:' + startX + " startY:" + startY);
}
};
//2获得鼠标指针在页面中的位置：
window.rect_mousemove = function (e) {
//获取相对于当前所指向对象的位置坐标
var event = e || window.event;
var target = event.target || event.srcElement; //获取document 对象的引用
var obj = document.getElementById("h-coverImg");
var active_box;
// 更新 box 尺寸
if (draw_begin == true && dragging == false) {
var width = 0;
var height = 0;
var box_id = "draw_box" + current_box_number;
active_box = document.getElementById(box_id);
if (event.offsetX > 3 && event.offsetY > 3) {
if (target.className.match(/box/)) {
width = event.offsetX;
height = event.offsetY;
}
else if (event.offsetX > startX && event.offsetY > startY) {
width = event.offsetX - startX;
height = event.offsetY - startY;
}
if ((width + startX) > obj.offsetWidth - 5) {
width = obj.offsetWidth - 5 - startX;
}
if ((height + startY) > (obj.offsetHeight - 5)) {
height = obj.offsetHeight - 5 - startY;
}
active_box.style.width = width + 'px';
active_box.style.height = height + 'px';
}
console.log("更新 box 尺寸1");
}
// 移动，更新 box 坐标
if (dragging) {
var left = 0;
var top = 0;
active_box = document.getElementById(dragging_id);
var width = parseInt(active_box.style.width.split('p')[0]);
var height = parseInt(active_box.style.height.split('p')[0]);
left = startX + (event.clientX - start_drag_x);
top = startY + (event.clientY - start_drag_y);
if (left < 1) {
left = 0;
}
if (top < 1) {
top = 0;
}
if ((left + width) > (obj.offsetWidth - 5)) {
left = obj.offsetWidth - width - 5;
}
if ((top + height) > (obj.offsetHeight - 5)) {
top = obj.offsetHeight - height - 5;
}
active_box.style.left = left + 'px';
active_box.style.top = top + 'px';
console.log("更新 box 坐标2");
}
};
var id = -1;
var box_num =0;
var id2 = -1;
var box_id2 =0;
//布防区域
function Protection() {
$('#h-coverImg').unbind("rect_mousedown2(event)"); //移除click
$("#h-coverImg").attr("onmousedown","rect_mousedown(event)");
// $("#h-coverImg").attr("onmousemove","rect_mousemove(event)");
id ++;
box_num++;
if (box_num>8) {
return false;
}
var html ='<div id="draw_box'+id+'" class="box" style="display: none" ><span class="rectangleSize" >'+box_num+'</span></div>';
$("#h-coverImg").append(html);
}
//撤防区域
function Shielding() {
$('#h-coverImg').unbind(); //移除click
$("#h-coverImg").attr("onmousedown","rect_mousedown2(event)");
id2 ++;
box_id2++;
if (box_id>8) {
return false;
}
var html ='<div id="draw_two'+id+'" class="box" style="display: none" ><span class="rectangleSize" >'+box_id2+'</span></div>';
$("#h-coverImg").append(html);
// $("#h-coverImg").attr("onmousemove","rect_mousemove(event)");
}
</script>
</html>
你点红色是可以的，讲道理直接复制一份给蓝色就好了，但是你这个里面内容没改全，而且方法也没对上