vue-draw-pixel
/
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>绘制矩形</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <button @click="zoom+=0.5">放大</button>
        <button @click="zoom-=0.2">缩小</button>
        {{zoom}}
        <button @click="divList=[]">清除画布</button>
      </div>
      <div
        class="box"
        :style="{'zoom':zoom}"
        style="
          width: 10000px;
          height: 10000px;
          border: 1px solid #000;
          overflow: auto;
        "
        @click="onclickHandle"
        @mousedown="onmousedownHandle"
        @mouseup="onmouseupHandle"
        @mousemove="onmousemoveHandle"
      >
        <div
          v-for="(item,index) in divList"
          :style="{width:'9px',height:'9px',left:(item.column*10+1)+'px',top:(item.row*10+1)+'px'}"
          class="fk"
        ></div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          zoom: 1,
          leftDown: false,
          divList: [
            { row: 5, column: 5 },
            { row: 1, column: 4 },
          ],
        },
        methods: {
          onclickHandle(e) {
            var box = document.getElementsByClassName("box")[0];
            var x = e.clientX - 30 + document.documentElement.scrollLeft;
            var y = e.clientY - 52 + document.documentElement.scrollTop;
            console.log(x, y, box.offsetLeft, box.offsetTop);
            this.insertCell(x, y, "点击");
          },
          onmousedownHandle(e) {
            this.leftDown = true;
          },
          onmouseupHandle(e) {
            this.leftDown = false;
          },
          onmousemoveHandle(e) {
            if (this.leftDown) {
              var box = document.getElementsByClassName("box")[0];
              var x = e.clientX - 30 + document.documentElement.scrollLeft;
              var y = e.clientY - 52 + document.documentElement.scrollTop;
              // console.log("移动1", e, x, y);
              this.insertCell(x, y, "移动2");
            }
          },
          insertCell(x, y, type) {
            if (x <= 0 || y <= 0) return;

            var _x = Math.floor(x / (10 * this.zoom)),
              _y = Math.floor(y / (10 * this.zoom));
            if (_x < 0 || _y < 0) return;
            console.log(type, x, y, _x, _y);
            var cell = this.divList.filter(
              (it) => it.row == _y && it.column == _x
            );
            if (cell.length > 0) {
              return;
            }
            this.divList.push({
              row: _y,
              column: _x,
            });

            console.log("数量", this.divList.length);
          },
        },
      });
    </script>
  </body>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #app {
      margin: 30px;
    }
    .box {
      position: relative;
      background-size: 10px 10px, 10px 10px;
      background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 0),
        linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 0);
    }
    .fk {
      background-color: #000;
      position: absolute;
    }
  </style>
</html>