<!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屬性失效的原因
element.style.top 在變為什么 對應元素位置可以不變？
幕布斯3322991
2020-03-04 19:07:25
