<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <title>Document</title> <!-- <script src="./demo/jquery.min.js"></script> --> </head> <style lang=""> *{ margin: 0; padding: 0; } body{ /*height: 1000px;*/ /*position: relative;*/ /*margin:0px; padding:0px;*/ } .point { position: absolute; border: 5px solid red; } .ball{ width:4px; height:4px; /*background: #d9fe37;*/ background: red; border-radius: 50%; position: absolute; } #sketchPad{ /*width: 400px; height: 400px;*/ /*left: 100px; top: 100px;*/ /*background-color: #ff0; overflow: auto;*/ /*position: relative;*/ } .small{ position: relative; height: 300px; overflow: auto; } .small img{ height: 300px; } #selectImage{ left: 200px; top: 500px; position: absolute; } .box{ width: 300px; height: 300px; margin: 100px; border: 1px solid #ccc; position: relative; /*overflow: auto;*/ } .big{ width: 600px; height: 600px; position: absolute; top: 0; left: 560px; border: 1px solid #ccc; overflow: auto; /*display: none;*/ display: block; background-color: #eee; } .big::-webkit-scrollbar{ display: none; } .mask{ width: 50px; height: 50px; background: rgba(255,255,0,0.4); position: absolute; top: 0; left: 0; /*鼠标的样式*/ cursor: crosshair; display: none; } .big img{ position: absolute; height: 3600px; /*box.height*big.width/mask.width */ top: 0; left: 0; } .aim{ position: absolute; top: 50%; left: 50%; width: 20px; margin-left: -10px; height: 20px; margin-top: -10px; display: block; /*z-index: 8*/ } .aim__ver{ position: absolute; top: 50%; left: 50%; width: 2px; height: 40px; margin-top: -20px; margin-left: -1px; background-color: #f00; } .aim__hor{ position: absolute; top: 50%; left: 50%; width: 40px; height: 2px; margin-top: -1px; margin-left: -20px; background-color: #f00; } </style> <body> <div class="box" id="fdj"> <div id="sketchPad" class="small"> <img id='imageID' name='imageID' src=" " alt=""> <div class="mask"></div> </div> <div class="big"> <img id='imageIDBig' name='imageID' src=" "/> <div class="aim"> <div class="aim__ver"></div> <div class="aim__hor"></div> </div> </div> </div> <div id="selectImage"> <form name="form" id="form" method="post" enctype="multipart/form-data" style="display: block;padding:2px;overflow: hidden;" > <input type="file" name="upload" id="upload" style="display: none;" onchange="document.form.path.value=this.value;selectImage(this)" multiple="multiple" accept=".PNG,.JPG,.GIF,.BMP" /> <input name="path" id="path" readonly style="display: block;float:left;margin-left:120px;height:24px"> <input type="button" value="请点击上传需要进行测量的图片" onclick="document.form.upload.click();" style="display: block;float:left;margin-left:10px;height:30px"> </form> </div> <button id="myBtn">创建连线</button> </body> <script> document.getElementById("myBtn").onclick = function(event) { document.getElementById("sketchPad").style.cursor="crosshair"; document.getElementById("sketchPad").addEventListener("click", createLine, false); event.stopPropagation(); // 阻止冒泡 }; // 1. 获取外面的父级盒子 var fdj = document.getElementById("fdj"); // 2.获取小的图片 var small = fdj.children[0]; var smallImage = small.children[0]; // 3.获取容纳大图片的盒子 var big = fdj.children[1]; // 4.获取遮罩 var mask = small.children[1]; // 5.获取大的那张图片 var bigImage = big.children[0]; // 6.鼠标经过小的图片的时候显示 small.onmouseover = function(){ mask.style.display = "block"; big.style.display = "block"; } // 7. 鼠标离开时隐藏 small.onmouseout = function(){ mask.style.display = "none"; big.style.display = "none"; } console.log("fdj_marginLeft",document.defaultView.getComputedStyle(fdj, null).marginLeft); var fdj_marginLeft=document.defaultView.getComputedStyle(fdj, null).marginLeft.slice(0,-2); var fdj_marginTop =document.defaultView.getComputedStyle(fdj, null).marginTop.slice(0,-2); function createLine() { var sketchPad=document.getElementById("sketchPad"); var sketchPad_top=document.defaultView.getComputedStyle(sketchPad, null).top.slice(0,-2); var sketchPad_left=document.defaultView.getComputedStyle(sketchPad, null).left.slice(0,-2); // console.log("sketchPad_scrollLeft",sketchPad.scrollLeft); let radius=2;//半径 let pointHtmlStr = `<div style="position:absolute;border-radius: 50%;background: red;width:${radius*2}px;height:${radius*2}px;top:${event.pageY-radius-sketchPad_top+sketchPad.scrollTop-fdj_marginTop}px;left:${event.pageX-radius-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft}px;"></div>`; sketchPad.innerHTML = sketchPad.innerHTML + pointHtmlStr; let firstPoint = {}; firstPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft; firstPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop; // console.log("firstPoint1:"+firstPoint.xPoint); function createPoints(event) { var sketchPad=document.getElementById("sketchPad"); let secondPoint = {}; secondPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft; secondPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop; let lineLength = calcLine(firstPoint, secondPoint); let angle = getAngle( firstPoint.xPoint, firstPoint.yPoint, secondPoint.xPoint, secondPoint.yPoint ); // 设置一个div 宽度为 两点之间的距离，并且以 transform-origin: 0 50% 为圆心旋转，角度已经算出来 let lineHtmlStr = `<div style="position:absolute;border-top:1px solid red;width:${lineLength}px;top:${firstPoint.yPoint}px;left:${firstPoint.xPoint}px;transform:rotate(${angle}deg);transform-origin: 0 0;"></div>`; // let bodyDiv = document.getElementsByTagName("body")[0]; // // 添加到body 后面 // bodyDiv.innerHTML = bodyDiv.innerHTML + lineHtmlStr; sketchPad.innerHTML = sketchPad.innerHTML + lineHtmlStr; // 取消本段的起始点的监听 document.getElementById("sketchPad").removeEventListener("click", createPoints); } // 计算连线长度 function calcLine(firstPoint, secondPoint) { // 计算出两个点之间的距离 let line = Math.sqrt( Math.pow(firstPoint.xPoint - secondPoint.xPoint, 2) + Math.pow(firstPoint.yPoint - secondPoint.yPoint, 2) ); // console.log("calcLinefirstPoint2.xPoint:"+firstPoint.xPoint); // console.log("calcLinesecondPoint2.xPoint:"+secondPoint.xPoint); // console.log("calcLinefirstPoint2.yPoint:"+firstPoint.yPoint); // console.log("calcLinesecondPoint2.yPoint:"+secondPoint.yPoint); console.log("line:",line); return line; } // 计算角度 // 获得人物中心和鼠标坐标连线，与x轴正半轴之间的夹角 function getAngle(x1, y1, x2, y2) { // 获得人物中心和鼠标坐标连线，与x轴正半轴之间的夹角 var x = x1 - x2; var y = y1 - y2; var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); var cos = y / z; var radina = Math.acos(cos); // 用反三角函数求弧度 var angle = 180 / (Math.PI / radina); // 将弧度转换成角度 if (x2 > x1 && y2 === y1) { // 在x轴正方向上 angle = 0; } if (x2 > x1 && y2 < y1) { // 在第一象限; angle = angle - 90; } if (x2 === x1 && y1 > y2) { // 在y轴正方向上 angle = -90; } if (x2 < x1 && y2 < y1) { // 在第二象限 angle = 270 - angle; } if (x2 < x1 && y2 === y1) { // 在x轴负方向 angle = 180; } if (x2 < x1 && y2 > y1) { // 在第三象限 angle = 270 - angle; } if (x2 === x1 && y2 > y1) { // 在y轴负方向上 angle = 90; } if (x2 > x1 && y2 > y1) { // 在四象限 angle = angle - 90; } return angle; } // 解决第一次绑定的时候执行方法 // setTimeout(function() { // document.removeEventListener("click", createPoints); // 添加节点 document.getElementById("sketchPad").addEventListener("click", createPoints, false); // 在冒泡过程中处理函数 // }, 0); } //加载任意图片 function selectImage(file) { if (!file.files || !file.files[0]) { return; } var reader = new FileReader(); reader.onload = function (evt) { document.getElementById('imageID').src = evt.target.result; document.getElementById('imageIDBig').src = evt.target.result; image = evt.target.result; } reader.readAsDataURL(file.files[0]); } // 8 鼠标移动 // var x = 0; // var y = 0; small.onmousemove = function(event){ // console.log("mask_display = ", mask.style.display); // console.log("mask_display = ", document.defaultView.getComputedStyle(mask, null).width); var event = event || window.event; // 9.获取在盒子内部的坐标 本身定位了，这里换用父亲边框到body边框的距离 显示在遮罩的中间 var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2+ small.scrollLeft ; var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2+small.scrollTop; console.log("x = ",x); console.log("y = ",y); // console.log("mask_width=",mask.style) // 10.增加限制条件 if(x < 0){ // x = 0; }else if(x > small.offsetWidth - mask.offsetWidth){ // x = small.offsetWidth - mask.offsetWidth; } if(y < 0){ // y = 0; }else if(y > small.offsetHeight - mask.offsetHeight){ // y = small.offsetHeight-mask.offsetHeight; } mask.style.left = x+ "px"; mask.style.top = y + "px"; console.log("mask.style.left = ",mask.style.left); console.log("mask.style.top = ",mask.style.top); console.log(document.getElementsByClassName("mask")[0]); // 11.利用倍数关系显示大图片 开始没有看懂为什么大图片要定位，后来想想只有定位的盒子才有top/left值 var mask_height=window.getComputedStyle(mask).getPropertyValue('height'); var mask_width=window.getComputedStyle(mask).getPropertyValue('width'); var big_height=window.getComputedStyle(big).getPropertyValue('height'); var big_width=window.getComputedStyle(big).getPropertyValue('width'); bigImage.style.left = -x*big_width.slice(0,-2)/mask_width.slice(0,-2) +"px"; bigImage.style.top = -y*big_height.slice(0,-2)/mask_height.slice(0,-2) + "px"; } // console.log("x=",x); // console.log("y=",y); </script></html>这是一个自己的小练习，目的就是标记测量图片中相关标的尺寸。鼠标移动时还带有一个放大镜效果。出现的问题是：点击左下角【创建连线】按钮并点击图中某位置，选中第一个标记点后，通过354-355行（倒数10行左右console.log("mask.style.left = ",mask.style.left); console.log("mask.style.top = ",mask.style.top);）中代码设置，在控制台明明看到x和y都在随着鼠标移动不断更新，但是偏偏无法对黄色mask框的left和top正确赋值。想得脑瓜疼，希望指教下 element.style.top和element.style.left控制css属性失效的原因
添加回答
举报
0/150
提交
取消