image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.main {
width: 902px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div class="main">
<canvas class="canvas" id="myCanvas" width="900" height="600"></canvas>
</div>
</body>
<script type="text/javascript">
let roomNum = 1,
moveX = 0,
moveY = 0,
yuanX = 0,
yuanY = 0,
endX = 0,
endY = 0
roomNum = 900 / 450;
let isDraging = false; // 记录元素是否可以拖动
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d')
makeTxxx(roomNum, moveX, moveY);
canvas.addEventListener('mousewheel', (e) => {
zoom(e)
})
canvas.addEventListener('mousemove', (e) => {
move(e)
})
// 鼠标点击
canvas.addEventListener('mousedown', (e) => {
var e = e || window.event;
// 鼠标距离div左侧偏移距离 = e.pageX鼠标距离页面左侧距离 - get('move').offsetLeft为div距离页面左侧距离
yuanX = e.pageX;
yuanY = e.pageY;
isDraging = true;
})
canvas.addEventListener('mouseup', (e) => {
isDraging = false;
let x = (e.pageX - yuanX);
let y = (e.pageY - yuanY);
moveX += x;
moveY += y;
})
function zoom(e) {
let z = e.deltaY > 0 ? -0.02 : 0.02
roomNum += z;
makeTxxx(roomNum, moveX, moveY);
}
function move(e) {
if (isDraging === true) {
let x = (e.pageX - yuanX) + moveX;
let y = (e.pageY - yuanY) + moveY;
makeTxxx(roomNum, x, y);
}
}
function makeTxxx(roomNum, moX, moY) {
ctx.clearRect(0, 0, 900, 600);
// 坐标轴Y
hzText("Y轴", 10, 100)
drawDashedLine(20, 20, 20, 200, 0);
drawDashedLine(10, 180, 20, 200, 0);
// 坐标轴X
hzText("X轴", 100, 20)
drawDashedLine(20, 20, 200, 20, 0);
drawDashedLine(180, 10, 200, 20, 0);
ctx.beginPath()
let rateX = roomNum + moX;
let rateY = roomNum + moY;
ctx.fillRect(50 * roomNum + moX, 70 * roomNum + moY, 350 * roomNum, 50 * roomNum);
// X 轴
drawDashedLine(50 * roomNum + moX, 130 * roomNum + moY, 400 * roomNum + moX, 130 * roomNum + moY, 2);
drawDashedLine(50 * roomNum + moX, 120 * roomNum + moY, 50 * roomNum + moX, 140 * roomNum + moY, 0);
drawDashedLine(400 * roomNum + moX, 120 * roomNum + moY, 400 * roomNum + moX, 140 * roomNum + moY, 0);
hzText("350mm", 200 * roomNum + moX, 128 * roomNum + moY)
// Y轴
drawDashedLine(40 * roomNum + moX, 70 * roomNum + moY, 40 * roomNum + moX, 120 * roomNum + moY, 2);
drawDashedLine(30 * roomNum + moX, 70 * roomNum + moY, 50 * roomNum + moX, 70 * roomNum + moY, 0);
drawDashedLine(30 * roomNum + moX, 120 * roomNum + moY, 50 * roomNum + moX, 120 * roomNum + moY, 0);
hzText("50mm", 35 * roomNum + moX, 95 * roomNum + moY)
ctx.stroke()
// ctx.beginPath()
// ctx.fillRect(50 * roomNum + moX, 150 * roomNum + moY, 350 * roomNum, 50 * roomNum);
// ctx.stroke()
}
function drawDashedLine(x1, y1, x2, y2, dashLength = 2) {
let deltaX = x2 - x1;
let deltaY = y2 - y1;
// 生成虚线段的路径
ctx.beginPath();
if (dashLength > 0) {
// 求虚线段的个数
let dashNums = Math.floor(
Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength
);
for (let i = 0; i < dashNums; i++) {
let nextX = x1 + (deltaX / dashNums) * i;
let nextY = y1 + (deltaY / dashNums) * i;
if (i % 2 === 0) {
ctx.moveTo(nextX, nextY);
} else {
ctx.lineTo(nextX, nextY);
}
}
} else {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
// ctx.fillStyle = "#d40007" // 填充颜色
ctx.strokeStyle = '#130603';
}
// 绘制虚线段
ctx.stroke();
}
function hzText(txt, x, y) {
ctx.beginPath();
const {
width
} = ctx.measureText('背景A');
ctx.fillText(txt, x, y);
ctx.textBaseline = 'bottom';
ctx.stroke();
}
</script>
</html>
