add scale

js/paint.js

@@ -79,11 +79,9 @@ $(document).ready(function () {
         var box = document.getElementById(obj);
         var hd = box.children[0];
         var hdt = box.children[1];
-        //鼠标按下事件  只要鼠标按下时是在hd上触发就可以
         hd.onmousedown = function (event) {
             var event = event || window.event;
             var leftval = event.clientX - this.offsetLeft;
-            //滑动事件 作用在document上，因为如果是作用在hd.onmousemove，滑动时可能会出现鼠标脱离hd范围（范围太小）而停止滑动，但是此时鼠标按下还没有弹起还处于滑动状态，所以就产生了bug
             document.onmousemove = function (event) {
                 var event = event || window.event;
                 hd.style.left = event.clientX - leftval + "px";
@@ -109,10 +107,9 @@ $(document).ready(function () {
         }
         box.onclick = function (event) {
             var event = event || window.event;
-            var boxWidth = event.clientX - this.offsetLeft;
-            if (boxWidth > 180) {
-                boxWidth = 180;
-            }
+            var boxWidth = event.clientX - this.offsetLeft - document.getElementById('tools').offsetLeft;
+            if (boxWidth > 180) boxWidth = 180;
+            if (boxWidth < 0) boxWidth = 0;
             hdt.style.width = hd.style.left = boxWidth + 'px';
             var result = parseInt(parseInt(hdt.style.width) / 180 * num);
             document.getElementById(obj + '-text').innerHTML = result;
@@ -130,6 +127,7 @@ $(document).ready(function () {
     var lineButton = document.getElementById('show-hide-line')
     var colorList = document.getElementById('color-list')
     var resetButton = document.getElementById('reset')
+    var zoomButton = document.getElementById('zoom')
     var nowColor = document.getElementById('now-color')
     var isdown = 0;
 
@@ -141,10 +139,11 @@ $(document).ready(function () {
     }
 
     let showGrid = false
+    let zoom = false
 
     draw.draggable = false
-    for (let i = 0; i < 64; i++) {      //创建像素点16*16
-        for (let j = 0; j < 64; j++) {
+    for (let i = 0; i < 128; i++) {
+        for (let j = 0; j < 128; j++) {
             box.push(document.createElement("div"))
         }
     }
@@ -185,7 +184,22 @@ $(document).ready(function () {
         reset()
     }
 
-
+    zoomButton.onclick = function () {
+        if (zoom == 0) {
+            draw.style.setProperty('transform', 'scale(200%) translate(-' + draw.offsetLeft / 4 + 'px,16px)')
+            zoom = 1
+        } else if (zoom == 1) {
+            draw.style.setProperty('transform', 'scale(400%) translate(-' + draw.offsetLeft / 4 + 'px,8px)')
+            zoom = 2
+            this.children[0].classList.remove('glyphicon-zoom-in')
+            this.children[0].classList.add('glyphicon-zoom-out')
+        } else {
+            draw.style.setProperty('transform', '')
+            zoom = 0
+            this.children[0].classList.remove('glyphicon-zoom-out')
+            this.children[0].classList.add('glyphicon-zoom-in')
+        }
+    }
 
 
 
@@ -211,8 +225,11 @@ $(document).ready(function () {
     }
 
     upload.onclick = function () {
-        if (curVer != 0) return false;
-        var nick=prompt('请确认，可使用昵称，上传后对所有人可见。','-')
+        if (curVer != 0) {
+            alert('对历史版本的编辑无法保存！')
+            return false;
+        }
+        var nick = prompt('请确认，可使用昵称，上传后对所有人可见。', '-')
         console.log(nick)
         if (nick) {
             const query = new AV.Query('paint');
@@ -234,12 +251,12 @@ $(document).ready(function () {
                     const up = new AV.Object('paint');
                     up.set('data', map)
                     up.set('id', id)
-                    up.set('nickName',nick)
+                    up.set('nickName', nick)
                     up.save()
                     console.log('Created new instance')
                 }
             })
-            document.getElementById('version').innerHTML = "当前版本：" + (curVer == 0 ? '' : '-') + curVer + ' by '+nick;
+            document.getElementById('version').innerHTML = "当前版本：" + (curVer == 0 ? '' : '-') + curVer + ' by ' + nick;
         }
     }
 })

js/score.js

@@ -46,10 +46,8 @@ function reset() {
     var upBtn = document.getElementById('upbtn');
     var upIcon = document.getElementById('upicon');
     upBtn.classList.remove('btn-danger');
-    upBtn.classList.remove('btn-info');
     upBtn.classList.add('btn-info');
     upIcon.classList.remove('glyphicon-exclamation-sign');
-    upIcon.classList.remove('glyphicon-open');
     upIcon.classList.add('glyphicon-open');
 }
 
@@ -88,10 +86,8 @@ function processFiles(isFirstTime = 0) {
     var upIcon = document.getElementById('upicon');
     message.innerHTML = (cur + 1) + "/" + (fileCount) + " - " + file.name + " - " + file.size + " 字节 - " + file.type + " - 正在读取...<br>>";
     upBtn.classList.remove('btn-danger');
-    upBtn.classList.remove('btn-info');
     upBtn.classList.add('btn-info');
     upIcon.classList.remove('glyphicon-exclamation-sign');
-    upIcon.classList.remove('glyphicon-open');
     upIcon.classList.add('glyphicon-open');
 
     var reader = new FileReader();
@@ -244,11 +240,9 @@ function processFiles(isFirstTime = 0) {
             console.log(e);
             clearScreen();
             message.innerHTML += "读取失败！";
-            upBtn.classList.remove('btn-danger');
-            upBtn.classList.add('btn-danger');
             upBtn.classList.remove('btn-info');
+            upBtn.classList.add('btn-danger');
             upIcon.classList.remove('glyphicon-open');
-            upIcon.classList.remove('glyphicon-exclamation-sign');
             upIcon.classList.add('glyphicon-exclamation-sign');
             return;
         }

paint/index.html

@@ -5,11 +5,13 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
 &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-
+    <title>paint</title>
     <style>
         .box {
             display: inline-block;
-            margin: 10px;
+            margin: auto;
+            margin-top: 10px;
+            margin-bottom: 10px;
             cursor: pointer;
             width: 180px;
             height: 3px;
@@ -19,7 +21,7 @@
         }
 
         .box .hd {
-            width: 17px;
+            width: 18px;
             height: 18px;
             background-color: #56a3fc;
             border-radius: 6px;
@@ -28,6 +30,8 @@
             top: -8px;
             cursor: pointer;
             margin: 0;
+            transform: translateX(-9px);
+            z-index: 1;
         }
 
         .box .hdt {
@@ -42,6 +46,8 @@
 
         .box-text {
             user-select: none;
+            z-index: -1;
+            transform: translate(-30px, -10px);
         }
 
         * {
@@ -63,29 +69,41 @@
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
-            margin: 0 auto;
+            margin: auto;
+            transition-duration: 0.3s;
+            transform-origin: 0px 0px;
             border: 1px solid rgb(211, 211, 211);
         }
 
         .pixel-line {
-            width: 8px;
-            height: 8px;
-            border: 1px solid rgb(211, 211, 211);
+            width: 5px;
+            height: 5px;
+            box-sizing: border-box;
+            border: 0.1px solid rgb(211, 211, 211);
         }
 
         .pixel {
-            width: 10px;
-            height: 10px;
+            width: 5px;
+            height: 5px;
         }
 
         #color-list {
             display: flex;
             flex-direction: column;
             flex-wrap: wrap;
+            padding: 0;
+            margin: auto;
         }
 
         #tools {
-            width: 20%;
+            display: flex;
+            flex-direction: column;
+            width: 250px;
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            border-radius: 15px;
+            backdrop-filter: blur(5px);
         }
 
         .color-item {
@@ -96,6 +114,7 @@
         #now-color {
             width: 80px;
             height: 80px;
+            margin: auto;
             border: 1px solid rgb(147, 147, 147);
             background-color: #000;
         }
@@ -111,6 +130,19 @@
             text-shadow: rgb(85, 85, 85) 3px 2px 4px;
             display: inline-block;
         }
+
+        .noshadow {
+            text-shadow: none;
+        }
+
+        #controls {
+            position: fixed;
+            text-align: left;
+            margin-top: 10px;
+            margin-left: 20%;
+            border-radius: 15px;
+            backdrop-filter: blur(5px);
+        }
     </style>
     <script src="../js/av-min.js"></script>
 
@@ -147,19 +179,21 @@
             <ul id="color-list"></ul>
         </div>
     </div>
-    <div style="text-align: left;margin-top:10px;margin-left:20%">
+    <div id="controls">
+        <button class="btn btn-default noshadow" id="zoom"><span class="glyphicon glyphicon-zoom-in"
+                aria-hidden="true"></span></button>
         <button class="btn btn-warning" id="show-hide-line">
             <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>&nbsp;网格</button>
-        <button class="btn btn-info" id="upload"><span class="glyphicon glyphicon-cloud-upload"
+        <button class="btn btn-primary" id="upload"><span class="glyphicon glyphicon-cloud-upload"
                 aria-hidden="true"></span>&nbsp;上传</button>
         <button class="btn btn-danger" id="reset"><span class="glyphicon glyphicon-cloud-download"
                 aria-hidden="true"></span>&nbsp;重置</button>
         <button class="btn btn-danger" id="clear" onclick="tryClear()"><span class="glyphicon glyphicon-ban-circle"
                 aria-hidden="true"></span>&nbsp;清空</button>
-        <a id="lbtn" tabindex="0" class="btn btn-default" onclick="curVer++,getMap()">
+        <a id="lbtn" tabindex="0" class="btn btn-default noshadow" onclick="curVer++,getMap()">
             <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
         </a>
-        <a id="rbtn" tabindex="0" class="btn btn-default" onclick="curVer==0?true:(curVer--,getMap());">
+        <a id="rbtn" tabindex="0" class="btn btn-default noshadow" onclick="curVer==0?true:(curVer--,getMap());">
             <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
         </a>
         <span id="version" style="margin-right:auto"></span>