yf_elsa.cui
/
ninglu-frontt


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas标尺与网格</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Arial', sans-serif;
      background: #2c3e50;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
    }
    #app {
      background: white;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      overflow: hidden;
    }
    .canvas-container {
      position: relative;
      overflow: hidden;
    }
    .rulers-container {
      position: relative;
      background: #ecf0f1;
      border-bottom: 1px solid #bdc3c7;
      border-right: 1px solid #bdc3c7;
    }
    .corner {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      background: #3498db;
      z-index: 10;
    }
    .horizontal-ruler {
      position: absolute;
      top: 0;
      left: 20px;
      height: 20px;
      border-bottom: 1px solid #bdc3c7;
    }
    .vertical-ruler {
      position: absolute;
      top: 20px;
      left: 0;
      width: 20px;
      border-right: 1px solid #bdc3c7;
    }
    .canvas-wrapper {
      position: absolute;
      top: 20px;
      left: 20px;
      overflow: visible;
    }
    .grid-canvas {
      background: white;
      cursor: crosshair;
    }
    .controls {
      padding: 15px;
      background: #f8f9fa;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #e9ecef;
    }
    .scale-info {
      font-weight: bold;
      color: #2c3e50;
    }
    button {
      padding: 8px 15px;
      background: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.3s;
    }
    button:hover {
      background: #2980b9;
    }
    .instructions {
      color: #7f8c8d;
      font-size: 14px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="canvas-container">
      <div class="rulers-container" :style="{ width: containerWidth + 20 + 'px', height: containerHeight + 20 + 'px' }">
        <div class="corner"></div>
        <canvas
          ref="horizontalRuler"
          class="horizontal-ruler"
          :width="containerWidth"
          height="20"
        ></canvas>
        <canvas
          ref="verticalRuler"
          class="vertical-ruler"
          width="20"
          :height="containerHeight"
        ></canvas>
        <div class="canvas-wrapper">
          <canvas
            ref="gridCanvas"
            class="grid-canvas"
            :width="containerWidth"
            :height="containerHeight"
            @wheel="handleWheel"
          ></canvas>
        </div>
      </div>
    </div>
    <div class="controls">
      <div class="scale-info">缩放比例: {{ (scale * 100).toFixed(0) }}%</div>
      <div>
        <button @click="resetZoom">重置缩放</button>
        <button @click="zoomIn">放大</button>
        <button @click="zoomOut">缩小</button>
      </div>
    </div>
    <div class="instructions">使用鼠标滚轮进行缩放（以左上角为中心）</div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        containerWidth: 600,
        containerHeight: 400,
        scale: 1,
        minScale: 0.2,
        maxScale: 5,
        gridSize: 20, // 网格基础大小
        offsetX: 0,
        offsetY: 0
      },
      mounted() {
        this.drawRulersAndGrid();
        window.addEventListener('resize', this.handleResize);
      },
      beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
      },
      methods: {
        drawRulersAndGrid() {
          this.drawHorizontalRuler();
          this.drawVerticalRuler();
          this.drawGrid();
        },
        drawHorizontalRuler() {
          const canvas = this.$refs.horizontalRuler;
          const ctx = canvas.getContext('2d');
          const width = canvas.width;

          ctx.clearRect(0, 0, width, 20);
          ctx.fillStyle = '#ecf0f1';
          ctx.fillRect(0, 0, width, 20);

          ctx.strokeStyle = '#bdc3c7';
          ctx.lineWidth = 1;
          ctx.beginPath();
          ctx.moveTo(0, 19.5);
          ctx.lineTo(width, 19.5);
          ctx.stroke();

          ctx.fillStyle = '#2c3e50';
          ctx.font = '10px Arial';

          const scaledGrid = this.gridSize * this.scale;
          const startValue = Math.floor(this.offsetX / scaledGrid) * scaledGrid;
          const endValue = startValue + width + scaledGrid;

          for (let x = startValue; x < endValue; x += scaledGrid) {
            const pixel = (x - this.offsetX) * this.scale;
            if (pixel < 0) continue;

            const tickSize = x % (scaledGrid * 5) === 0 ? 10 : 5;
            ctx.beginPath();
            ctx.moveTo(pixel + 0.5, 20 - tickSize);
            ctx.lineTo(pixel + 0.5, 20);
            ctx.stroke();

            if (x % (scaledGrid * 5) === 0) {
              ctx.fillText(Math.round(x / this.scale), pixel + 2, 9);
            }
          }
        },
        drawVerticalRuler() {
          const canvas = this.$refs.verticalRuler;
          const ctx = canvas.getContext('2d');
          const height = canvas.height;

          ctx.clearRect(0, 0, 20, height);
          ctx.fillStyle = '#ecf0f1';
          ctx.fillRect(0, 0, 20, height);

          ctx.strokeStyle = '#bdc3c7';
          ctx.lineWidth = 1;
          ctx.beginPath();
          ctx.moveTo(19.5, 0);
          ctx.lineTo(19.5, height);
          ctx.stroke();

          ctx.fillStyle = '#2c3e50';
          ctx.font = '10px Arial';

          const scaledGrid = this.gridSize * this.scale;
          const startValue = Math.floor(this.offsetY / scaledGrid) * scaledGrid;
          const endValue = startValue + height + scaledGrid;

          for (let y = startValue; y < endValue; y += scaledGrid) {
            const pixel = (y - this.offsetY) * this.scale;
            if (pixel < 0) continue;

            const tickSize = y % (scaledGrid * 5) === 0 ? 10 : 5;
            ctx.beginPath();
            ctx.moveTo(20 - tickSize, pixel + 0.5);
            ctx.lineTo(20, pixel + 0.5);
            ctx.stroke();

            if (y % (scaledGrid * 5) === 0) {
              ctx.save();
              ctx.translate(8, pixel + 3);
              ctx.rotate(-Math.PI/2);
              ctx.fillText(Math.round(y / this.scale), 0, 0);
              ctx.restore();
            }
          }
        },
        drawGrid() {
          const canvas = this.$refs.gridCanvas;
          const ctx = canvas.getContext('2d');
          const width = canvas.width;
          const height = canvas.height;

          ctx.clearRect(0, 0, width, height);
          ctx.save();
          ctx.scale(this.scale, this.scale);
          ctx.translate(-this.offsetX, -this.offsetY);

          // 绘制网格
          ctx.strokeStyle = '#e0e0e0';
          ctx.lineWidth = 1;

          const scaledGrid = this.gridSize;
          const startX = Math.floor(this.offsetX / scaledGrid) * scaledGrid;
          const startY = Math.floor(this.offsetY / scaledGrid) * scaledGrid;

          ctx.beginPath();
          for (let x = startX; x < this.offsetX + width / this.scale; x += scaledGrid) {
            ctx.moveTo(x + 0.5, startY);
            ctx.lineTo(x + 0.5, this.offsetY + height / this.scale);
          }
          for (let y = startY; y < this.offsetY + height / this.scale; y += scaledGrid) {
            ctx.moveTo(startX, y + 0.5);
            ctx.lineTo(this.offsetX + width / this.scale, y + 0.5);
          }
          ctx.stroke();

          // 绘制坐标轴
          ctx.strokeStyle = '#3498db';
          ctx.lineWidth = 2;

          ctx.beginPath();
          ctx.moveTo(0, startY);
          ctx.lineTo(0, this.offsetY + height / this.scale);
          ctx.moveTo(startX, 0);
          ctx.lineTo(this.offsetX + width / this.scale, 0);
          ctx.stroke();

          // 绘制原点标记
          ctx.fillStyle = '#e74c3c';
          ctx.beginPath();
          ctx.arc(0, 0, 4, 0, Math.PI * 2);
          ctx.fill();

          ctx.restore();
        },
        handleWheel(e) {
          e.preventDefault();

          const delta = e.deltaY > 0 ? -0.1 : 0.1;
          const newScale = Math.max(this.minScale, Math.min(this.maxScale, this.scale + delta));

          if (newScale !== this.scale) {
            // 以左上角为缩放中心，不需要调整offset
            this.scale = newScale;
            this.drawRulersAndGrid();
          }
        },
        zoomIn() {
          this.scale = Math.min(this.maxScale, this.scale + 0.1);
          this.drawRulersAndGrid();
        },
        zoomOut() {
          this.scale = Math.max(this.minScale, this.scale - 0.1);
          this.drawRulersAndGrid();
        },
        resetZoom() {
          this.scale = 1;
          this.offsetX = 0;
          this.offsetY = 0;
          this.drawRulersAndGrid();
        },
        handleResize() {
          // 在实际应用中，这里可以调整容器大小
          this.drawRulersAndGrid();
        }
      },
      watch: {
        scale() {
          this.drawRulersAndGrid();
        }
      }
    });
  </script>
</body>
</html>