add paint

js/paint.js

@@ -0,0 +1,220 @@
+
+
+AV.init({
+    appId: "BmologYYnRqCv0SLHDeDdA17-gzGzoHsz",
+    appKey: "w9mVebFMdCmY6Nh9vfcBGaGt",
+    serverURL: "https://bmologyy.lc-cn-n1-shared.com/",
+});
+
+$(window).on({
+    contextmenu: function () {
+        return false;
+    },
+    dragstart: function () {
+        return false;
+    },
+})
+
+var tryTime=0
+
+function tryClear(){
+    if(tryTime==0)alert('你干嘛')
+    else if(tryTime==1)alert('哎呦')
+    else if(tryTime==2)alert('不会让你清空的')
+    else if(tryTime==3){
+        alert('按钮都给你禁用咯')
+        document.getElementById('clear').classList.add('disabled');
+    }
+    tryTime++;
+}
+
+function reset() {
+    const query = new AV.Query('paint');
+    query.descending('updatedAt')
+    query.limit(1)
+    query.find().then((result) => {
+        if (result.length) {
+            var map = result[0].get('data')
+            for (let i = 0; i < box.length; i++) {
+                box[i].style.backgroundColor = map[i]
+            }
+        } else {
+            console.log('Reset found no data!')
+        }
+    })
+}
+
+let box = []
+$(document).ready(function () {
+    let color = '#000'
+
+    let lcolor = '#000'
+
+    function updateCol() {
+        lcolor = 'rgb('
+            + document.getElementById('box-r-text').innerHTML + ', '
+            + document.getElementById('box-g-text').innerHTML + ', '
+            + document.getElementById('box-b-text').innerHTML + ')'
+        nowColor.style.backgroundColor = lcolor
+    }
+
+    function slider(obj, num) {
+        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";
+
+                var far = parseInt(hd.style.left);
+
+                if (far < 0) {
+                    hd.style.left = 0;
+                }
+                else if (far > 180) {
+                    hd.style.left = 180 + "px";
+                }
+
+                hdt.style.width = hd.style.left;
+                var result = parseInt(parseInt(hdt.style.width) / 180 * num);
+                document.getElementById(obj + '-text').innerHTML = result;
+                updateCol()
+            }
+            document.onmouseup = function () {
+                document.onmousemove = null;
+            }
+
+        }
+        box.onclick = function (event) {
+            var event = event || window.event;
+            var boxWidth = event.clientX - this.offsetLeft;
+            if (boxWidth > 180) {
+                boxWidth = 180;
+            }
+            hdt.style.width = hd.style.left = boxWidth + 'px';
+            var result = parseInt(parseInt(hdt.style.width) / 180 * num);
+            document.getElementById(obj + '-text').innerHTML = result;
+            updateCol()
+        }
+    }
+
+    slider('box-r', 255)
+    slider('box-g', 255)
+    slider('box-b', 255);
+    var id = Math.ceil(Math.random() * 1000000);
+    var draw = document.getElementById('draw')
+    draw.draggable = false
+
+    var lineButton = document.getElementById('show-hide-line')
+    var colorList = document.getElementById('color-list')
+    var resetButton = document.getElementById('reset')
+    var nowColor = document.getElementById('now-color')
+    var isdown = 0;
+
+    draw.onmousedown = function () {
+        isdown = 1;
+    }
+    draw.onmouseup = function () {
+        isdown = 0;
+    }
+
+    let showLine = true
+
+    draw.draggable = false
+    for (let i = 0; i < 64; i++) {      //创建像素点16*16
+        for (let j = 0; j < 64; j++) {
+            box.push(document.createElement("div"))
+        }
+    }
+
+
+    for (let i = 0; i < box.length; i++) {
+        box[i].style.backgroundColor = "#fff"
+        box[i].className = 'pixel-line'
+        box[i].onmousedown = function (e) {
+            if (e.button == 0) color = lcolor
+            else color = '#fff'
+            box[i].style.backgroundColor = color
+        }
+        box[i].onmouseover = function () {
+            if (isdown) box[i].style.backgroundColor = color
+            else if (box[i].style.backgroundColor == 'rgb(255, 255, 255)') {
+                box[i].style.backgroundColor = 'rgb(235, 235, 235)'
+            }
+        }
+        box[i].onmouseleave = function () {
+            if (!isdown && box[i].style.backgroundColor == 'rgb(235, 235, 235)') box[i].style.backgroundColor = ('#ffffff')
+        }
+        draw.appendChild(box[i])
+    }
+
+    reset();
+
+    lineButton.onclick = function () {
+        if (showLine) {
+            changeClass(box, 'pixel')
+            showLine = false
+        } else {
+            changeClass(box, 'pixel-line')
+            showLine = true
+        }
+    }
+    resetButton.onclick = function () {
+        reset()
+    }
+
+
+
+
+
+    let colors = ['#FFF', '#000', '#7f7f7f', '#c3c3c3', '#880015', '#ed1c24', '#ff7f27', "#fff200", "#22b14c", "#00a2e8", "#3f48cc", "#a349a4"]
+    for (let i = 0; i < colors.length; i++) {
+        let colorItem = document.createElement("li")
+        colorItem.className = 'color-item'
+        colorItem.style.backgroundColor = colors[i]
+        colorItem.onclick = function () {
+            lcolor = colors[i]
+            nowColor.style.backgroundColor = colors[i]
+        }
+        if (i === 0) {
+            colorItem.style.border = '1px solid #000000'
+        }
+        colorList.appendChild(colorItem)
+    }
+
+    function changeClass(arr, className) {
+        for (let i = 0; i < arr.length; i++) {
+            arr[i].className = className
+        }
+    }
+
+    upload.onclick = function () {
+        const query = new AV.Query('paint');
+
+        console.log(id)
+        query.equalTo('id', id)
+        query.find().then((result) => {
+            var map = []
+            for (let i = 0; i < box.length; i++) {
+                map[i] = box[i].style.backgroundColor
+            }
+            if (result.length) {
+                result[0].set('data', map)
+                result[0].save()
+                console.log('Updated')
+            }
+            else {
+                const up = new AV.Object('paint');
+                up.set('data', map)
+                up.set('id', id)
+                up.save()
+                console.log('Created new instance')
+            }
+        })
+    }
+})

paint/index.html

@@ -0,0 +1,160 @@
+<head>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
+        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
+    <link rel="stylesheet" href="../css/style.css">
+    <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">
+
+    <style>
+        .box {
+            display: inline-block;
+            margin: 10px;
+            cursor: pointer;
+            width: 180px;
+            height: 3px;
+            background-color: #bdbdbd;
+            position: relative;
+            vertical-align: middle;
+        }
+
+        .box .hd {
+            width: 17px;
+            height: 18px;
+            background-color: #56a3fc;
+            border-radius: 6px;
+            position: absolute;
+            left: 0;
+            top: -8px;
+            cursor: pointer;
+            margin: 0;
+        }
+
+        .box .hdt {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 3px;
+            width: 0;
+            background-color: #56a3fc;
+            margin: 0;
+        }
+
+        .box-text {
+            user-select: none;
+        }
+
+        * {
+            -webkit-box-sizing: border-box;
+            box-sizing: content-box;
+        }
+
+        #main {
+            display: flex;
+            flex-direction: row;
+            width: 900px;
+            margin: 0 auto;
+            margin-top: -20px;
+        }
+
+        #draw {
+            width: 640px;
+            height: 640px;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            margin: 0 auto;
+            border: 1px solid rgb(211, 211, 211);
+        }
+
+        .pixel-line {
+            width: 8px;
+            height: 8px;
+            border: 1px solid rgb(211, 211, 211);
+        }
+
+        .pixel {
+            width: 10px;
+            height: 10px;
+        }
+
+        #color-list {
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+        }
+
+        #tools {
+            width: 20%;
+        }
+
+        .color-item {
+            height: 20px;
+            width: 20px;
+        }
+
+        #now-color {
+            width: 80px;
+            height: 80px;
+            border: 1px solid rgb(147, 147, 147);
+            background-color: #000;
+        }
+
+        li {
+            list-style: none;
+            margin-bottom: 3px;
+            display: block;
+            box-sizing: border-box;
+        }
+
+        .btn {
+            text-shadow: rgb(85, 85, 85) 3px 2px 4px;
+            display: inline-block;
+        }
+    </style>
+    <script src="../js/av-min.js"></script>
+
+
+    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
+
+    <script type="text/javascript" src="../js/paint.js">
+
+    </script>
+</head>
+
+<body>
+    <a class="btn btn-info" href="/" style="text-shadow: rgb(85, 85, 85) 3px 2px 4px;"><span
+        class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;返回</a>
+    <div id="main">
+        <div id="draw"></div>
+        <div id="tools">
+            <div id="now-color"></div>
+            <div class="box" id="box-r">
+                <i class="hd"></i>
+                <i class="hdt"></i>
+                <div class="box-text" id="box-r-text">0</div>
+            </div>
+            <div class="box" id="box-g">
+                <i class="hd"></i>
+                <i class="hdt"></i>
+                <div class="box-text" id="box-g-text">0</div>
+            </div>
+            <div class="box" id="box-b">
+                <i class="hd"></i>
+                <i class="hdt"></i>
+                <div class="box-text" id="box-b-text">0</div>
+            </div>
+            <ul id="color-list"></ul>
+        </div>
+    </div>
+    <div style="text-align: center;margin-top:10px">
+        <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"
+                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>
+    </div>
+</body>