html>
Document
*{
margin: 0;
padding: 0;
}
body{
}
.point {
position: absolute;
border: 5px solid red;
}
.ball{
width:4px;
height:4px;
background: red;
border-radius: 50%;
position: absolute;
}
#sketchPad{
}
.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;
}
.big{
width: 600px;
height: 600px;
position: absolute;
top: 0;
left: 560px;
border: 1px solid #ccc;
overflow: auto;
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;
top: 0;
left: 0;
}
.aim{
position: absolute;
top: 50%;
left: 50%;
width: 20px;
margin-left: -10px;
height: 20px;
margin-top: -10px;
display: block;
}
.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;
}
οnchange="document.form.path.value=this.value;selectImage(this)"
multiple="multiple" accept=".PNG,.JPG,.GIF,.BMP" />
建立連線
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 = `
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 = `
// 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);
這是一個自己的小練習，目的就是标記測量圖檔中相關标的尺寸。滑鼠移動時還帶有一個放大鏡效果。
出現的問題是：點選左下角【建立連線】按鈕并點選圖中某位置，選中第一個标記點後，通過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屬性失效的原因
