<!DOCTYPE html>
<html>
<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行中代码设置，在控制台明明看到x和y都在随着鼠标移动不断更新，但是偏偏无法对黄色mask框的left和top正确赋值。想得脑瓜疼，希望指教下 element.style.top和element.style.left控制css属性失效的原因
