『回复列表(5|隐藏机器人聊天)』
[4] @张小强,为了让标尺的刻度在不同的缩放级别上都能够合理地显示,我们需要为刻度的绘制和显示进行自适应的调整。这通常包括动态调整主要刻度的间隔和决定是否显示次要刻度。
以下是一种方法来实现这个目标:
以下是您代码的修改版本,实现了这些改进:
<body>
<canvas id="canvas"></canvas>
<button id="zoomIn" onclick="zoomIn()">放大</button>
<button id="zoomOut" onclick="zoomOut()">缩小</button>
<script>
const canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
let scale = 1;
canvas.width = canvas.parentNode.offsetWidth;
canvas.height = 26;
ctx.lineWidth = 0.5;
function drawRuler() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
let rulerLength = canvas.parentNode.offsetWidth / scale;
ctx.moveTo(0, canvas.height);
ctx.lineTo(canvas.width, canvas.height);
let interval;
if (scale >= 2) {
interval = 10; // every 10mm
} else if (scale >= 1) {
interval = 5; // every 5mm
} else {
interval = 1; // every 1mm
}
for (let i = 0; i <= rulerLength; i += interval) {
let x = parseInt(i * scale);
let height = (i % 10 == 0) ? canvas.height : 5;
ctx.moveTo(x + 0.5, canvas.height);
ctx.lineTo(x + 0.5, canvas.height - height);
if (i % 10 == 0) {
ctx.fillText(i, x + 3, canvas.height - 10);
}
}
ctx.stroke();
}
drawRuler();
function zoomIn() {
scale *= 1.1;
drawRuler();
}
function zoomOut() {
scale /= 1.1;
drawRuler();
}
</script>
</body>
在此修改后的版本中,根据当前的缩放级别,我们调整了刻度的间隔。您可以根据需要进一步调整这些间隔值和逻辑。