From 448d9dbc1561da4af3c9ffadb890001da16c960a Mon Sep 17 00:00:00 2001 From: shylinux Date: Sat, 1 Sep 2018 16:16:07 +0800 Subject: [PATCH] vps opt miniCAD --- usr/wiki/html5.css | 12 + usr/wiki/html5.js | 616 ++++++++++++++++++++++----------------------- usr/wiki/html5.md | 46 +--- 3 files changed, 325 insertions(+), 349 deletions(-) diff --git a/usr/wiki/html5.css b/usr/wiki/html5.css index 9e169c8e..30973d64 100644 --- a/usr/wiki/html5.css +++ b/usr/wiki/html5.css @@ -1,6 +1,18 @@ canvas { border: solid 1px green; } +.debug_info { + border: solid 1px gray; + margin: 10px 0; + padding: 0 10px; + max-height:100px; + width:380px; + overflow:auto; +} +.debug_info p{ + margin:0; + padding:0; +} .demo { float:left; margin-right:10px; diff --git a/usr/wiki/html5.js b/usr/wiki/html5.js index 8d7bd33e..c6271c41 100644 --- a/usr/wiki/html5.js +++ b/usr/wiki/html5.js @@ -76,7 +76,12 @@ demo3.onclick = draw3; draw3() //}}} +var draw_history = [{shape:"clear"}]; +var his = document.getElementById("draw_history"); +var draw = document.getElementById("draw").getContext("2d"); + var current_ctx = {//{{{ + agent: {}, big_scale: 1.25, small_scale: 0.8, font: '32px sans-serif', @@ -106,11 +111,11 @@ var current_ctx = {//{{{ {text: "紫色", value: "purple"}, {text: "白色", value: "white"}, ]}, - scale: {label: "比例", value: 1, width: 40}, - point: {label: "坐标", value: "0,0", width: 60}, - begin: {label: "隐藏", value: 0, width: 40}, - interval: {label: "间隔", value: 100, width: 20}, - json: {label: "数据", value: "", width: 80}, + scale: {text: "比例", value: 1}, + point: {text: "坐标", value: "0,0"}, + begin: {text: "隐藏", value: 0}, + interval: {text: "间隔", value: 100}, + json: {text: "数据", value: ""}, }, command: { cmd_shape: { @@ -142,86 +147,105 @@ var current_ctx = {//{{{ blue: {text: "蓝色", key: "", conf:{"color": "blue"}}, white: {text: "白色", key: "", conf:{"color": "white"}}, }, - control: { + ctrl_status: { + shape: {type: "config"}, + stroke: {type: "config"}, + color: {type: "config"}, + scale: {type: "cache"}, + begin: {type: "cache"}, + point: {type: "cache"}, + }, + ctrl_show: { big: {text: "放大", key: "b"}, small: {text: "缩小", key: "m"}, hide: {text: "隐藏"}, - draw: {text: "恢复"}, + show: {text: "恢复"}, play: {text: "播放", key: "a"}, + interval: {type: "config", width: 30}, + }, + ctrl_data: { delete: {text: "删除", key: "d"}, clear: {text: "清空", key: "q"}, export: {text: "导出"}, import: {text: "导入"}, + json: {type: "config", width: 80}, } }, - - list: { - style: ["red", "green", "yellow", "blue"], - stroke: ["fill", "stroke"], - shape: ["heart", "cycle", "rect", "line"], - } } //}}} function init(configs, commands) {//{{{ - for (var k in configs) { - var config = configs[k]; - var cs = document.getElementsByClassName("config "+k); - - for (var i = 0; i < cs.length; i++) { - if (config.list) { - cs[i].innerHTML = ""; - for (var j in config.list) { - var item = config.list[j]; - var option = cs[i].appendChild(document.createElement("option")); - option.value = item.value - option.text = item.text - if (config.value == item.value) { - cs[i].selectedIndex = j - } - } - (function() { - var key = k; - cs[i].onchange = function(event) { - conf('config', key, event); - } - })(); - } else { - cs[i].value = config.value; - (function() { - var key = k; - if (config.label) { - var label = cs[i].parentElement.insertBefore(document.createElement("label"), cs[i]); - label.appendChild(document.createTextNode(config.label+": ")); - } - if (config.width) { - cs[i].style.width = config.width+"px"; - } - cs[i].onkeyup = cs[i].onblur = function(event) { - conf('config', key, event); - } - conf('config', key, config.value); - })(); - } - } - } + current_ctx.agent.isChrome = window.navigator.userAgent.indexOf("Chrome")>-1; + current_ctx.agent.isMobile = window.navigator.userAgent.indexOf("Mobile")>-1; for (var group in commands) { - for (var which in commands[group]) { - var command = commands[group][which]; - var cs = document.getElementsByClassName(group+" "+which); - for (var i = 0; i < cs.length; i++) { - if (command.key) { - cs[i].innerText = command.text+"("+command.key+")"; - } else { - cs[i].innerText = command.text - } - (function() { - var key = which; - var key1 = group; - cs[i].onclick = function(event) { - action(event, key, key1); + var cs = document.getElementsByClassName(group+" bar"); + for (var i = 0; i < cs.length; i++) { + for (var which in commands[group]) { + var command = commands[group][which]; + + var config = configs[which]; + if (command.type == "cache") { + var label = cs[i].appendChild(document.createElement("label")); + label.innerText = config.text+": "; + + var label = cs[i].appendChild(document.createElement("label")); + label.innerText = config.value; + label.className = "config "+which; + } else if (command.type == "config") { + if (config.list) { + var select = cs[i].appendChild(document.createElement("select")); + select.className = "config "+which; + + for (var j in config.list) { + var item = config.list[j]; + var option = select.appendChild(document.createElement("option")); + option.value = item.value; + option.text = item.text; + if (config.value == item.value) { + select.selectedIndex = j + } + } + + (function() { + var key = which; + select.onchange = function(event) { + conf('config', key, event); + } + })(); + } else { + var label = cs[i].appendChild(document.createElement("label")); + label.innerText = config.text+": "; + + var input = cs[i].appendChild(document.createElement("input")); + input.style.width = command.width+"px"; + input.value = config.value; + input.className = "config "+which; + + (function() { + var key = which; + input.onkeyup = input.onblur = function(event) { + conf('config', key, event); + } + })(); } - })(); + } else { + var cmd = cs[i].appendChild(document.createElement("button")); + cmd.className = group+" "+which; + + if (command.key) { + cmd.innerText = command.text+"("+command.key+")"; + } else { + cmd.innerText = command.text + } + + (function() { + var key = which; + var key1 = group; + cmd.onclick = function(event) { + action(event, key, key1); + } + })(); + } } } } @@ -244,18 +268,9 @@ function conf(group, which, value) {//{{{ } break case "blur": - if (current_ctx[group][which].value == event.target.value) { - break - } - if (confirm("save value?")) { - current_ctx[group][which].value = event.target.value; - } else { - event.target.value = current_ctx[group][which].value; - } + current_ctx[group][which].value = event.target.value; break } - console.log("conf"); - console.log(event); return } @@ -273,6 +288,28 @@ function conf(group, which, value) {//{{{ } return config.value }//}}} +function info() {//{{{ + var list = [] + for (var i = 0; i < arguments.length; i++) { + if (typeof arguments[i] == "object") { + list.push("{") + for (var k in arguments[i]) { + list.push(k+": "+arguments[i][k]+",") + } + list.push("}") + } else { + list.push(arguments[i]) + } + } + + debug_info = document.getElementsByClassName("debug_info"); + for (var i = 0; i < debug_info.length; i++) { + var p = debug_info[i].appendChild(document.createElement("p")); + p.appendChild(document.createTextNode(list.join(" "))); + debug_info[i].scrollTop+=100; + } +} +//}}} init(current_ctx.config, current_ctx.command); var control_map = {//{{{ @@ -292,66 +329,58 @@ var control_map = {//{{{ a: "play", Escape: "escape", -} -//}}} -function control(event) {//{{{ - if (event.type == "keyup") { - action(event, control_map[event.key]); - } -} -//}}} -function action(event, which, group) {//{{{ - console.log(event); - switch (which) { - case "big": - conf("config", "scale", (conf("config", "scale")*current_ctx.big_scale).toFixed(3)); - draw.scale(current_ctx.big_scale, current_ctx.big_scale); - refresh(); - break - case "small": - conf("config", "scale", (conf("config", "scale")*current_ctx.small_scale).toFixed(3)); - draw.scale(current_ctx.small_scale, current_ctx.small_scale); - refresh(); - break - case "escape": + + action: { + "escape": [function() { current_ctx.begin_point = null; current_ctx.end_point = null; - refresh(); - break - case "clear": - if (confirm("clear all?")) { - his.innerHTML = ""; - draw_history = []; - refresh(); - } - break - case "hide": + }], + "big": [function(){ + conf("config", "scale", (conf("config", "scale")*current_ctx.big_scale).toFixed(3)); + draw.scale(current_ctx.big_scale, current_ctx.big_scale); + }], + "small": [function(){ + conf("config", "scale", (conf("config", "scale")*current_ctx.small_scale).toFixed(3)); + draw.scale(current_ctx.small_scale, current_ctx.small_scale); + }], + "hide": [function() { conf("config", "begin", draw_history.length); - refresh(); - break - case "delete": - draw_history.pop(); - refresh(); - break - case "draw": + }], + "show": [function() { conf("config", "begin", 0); - refresh(); - break - case "play": + }], + "play": [function() { conf("config", "begin", 0); refresh(conf("config", "interval"), 0); - break - case "export": - conf("config", "json", JSON.stringify(draw_history)); - break - case "import": - draw_history = JSON.parse(conf("config", "json")); - refresh(); - break - default: - if (!which || !group) { - break + return false + }], + "delete": [function() { + if (draw_history.length > 1) { + draw_history.pop(); + var tr = his.rows[his.rows.length-1]; + tr.parentElement.removeChild(tr) } + }], + "clear": [function() { + if (confirm("clear all?")) { + draw_history.length = 1; + var th = his.rows[0]; + his.innerHTML = ""; + his.appendChild(th); + } + }], + "export": [function() { + conf("config", "json", JSON.stringify(draw_history)); + return false + }], + "import": [function() { + draw_history = JSON.parse(conf("config", "json")); + }], + "default": [function(event, which, group) { + if (!which || !group) { + return false + } + var cs = document.getElementsByClassName(group); for (var i = 0; i < cs.length; i++) { cs[i].style.backgroundColor = "white"; @@ -363,12 +392,36 @@ function action(event, which, group) {//{{{ } var command = current_ctx.command[group][which]; + if (!command) { + return false + } for (var k in command.conf) { conf("config", k, command.conf[k]); } for (var k in command.cmd) { action(event, k, command.cmd[k]) } + }], + } +} +//}}} +function control(event) {//{{{ + if (event.type == "keyup") { + action(event, control_map[event.key]); + } +} +//}}} +function action(event, which, group) {//{{{ + var w = control_map.action[which]? which: "default"; + while (control_map.action[w]) { + for (var i in control_map.action[w]) { + var next = control_map.action[w][i](event, which, group); + w = next || w; + } + w = next; + if (next == undefined) { + refresh() + } } } //}}} @@ -381,44 +434,62 @@ function trans(point) {//{{{ return point; } //}}} -function show_debug(log, clear) {//{{{ - var fuck = document.getElementById("fuck"); - // if (clear) { - // fuck.innerHTML = ""; - // } - var div = fuck.appendChild(document.createElement("div")); - div.appendChild(document.createTextNode(log)); -} -//}}} function draw_point(event) {//{{{ - console.log("point"); - console.log(event); - var point = trans({x:event.offsetX, y:event.offsetY}); - if (event.type == "touchstart") { - var point = trans({x:event.touches[0].clientX, y:event.touches[0].clientY}); - } - - if (current_ctx.index_point) { - draw.beginPath(); - draw.arc(point.x, point.y, 5, 0, 2*Math.PI); - draw.fill(); - } + var point = trans({ + x: event.type == "touchstart"? event.touches[0].clientX: event.offsetX, + y: event.type == "touchstart"? event.touches[0].clientY: event.offsetY, + }); if (!current_ctx.begin_point) { current_ctx.begin_point = point; + info(event.type, "begin_point", current_ctx.begin_point) return } current_ctx.end_point = point; - console.log(current_ctx.end_point); - var text = ""; - if (conf("config", "shape") == "text") { - text = prompt("请入文字", ""); + info(event.type, "end_point", current_ctx.end_point) + + var s = { + color:conf("config", "color"), + stroke:conf("config", "stroke"), + shape:conf("config", "shape"), + begin_point:current_ctx.begin_point, + end_point:current_ctx.end_point, + text:conf("config", "shape") == "text"? prompt("请入文字", ""): "", + }; + + draws(draw, s); + add_history(his, s); + current_ctx.begin_point = null; + current_ctx.end_point = null; +} +//}}} +function draw_move(event) {//{{{ + if (current_ctx.agent.isMobile) { + return } - draws(draw, conf("config", "color"), conf("config", "stroke"), conf("config", "shape"), current_ctx.begin_point, current_ctx.end_point, text); - draw_history.push({style:conf("config", "color"), stroke:conf("config", "stroke"), shape:conf("config", "shape"), begin_point:current_ctx.begin_point, end_point:current_ctx.end_point, text:text}) + if (current_ctx.begin_point) { + var point = trans({x:event.offsetX, y:event.offsetY}); + conf("config", "point", parseInt(point.x)+","+parseInt(point.y)); + info(event.type, "move_point", point) - var headers = ["style", "stroke", "shape", "x1", "y1", "x2", "y2", "text"] + refresh(); + draws(draw, { + color:conf("config", "color"), + stroke:conf("config", "stroke"), + shape:conf("config", "shape"), + begin_point:current_ctx.begin_point, + end_point:point, + text:"", + }); + } +} +//}}} + +function add_history(his, s) {//{{{ + draw_history.push(s); + + var headers = ["color", "stroke", "shape", "x1", "y1", "x2", "y2", "text"] if (his.rows.length == 0) { var tr = his.insertRow(-1); for (var i in headers) { @@ -428,206 +499,131 @@ function draw_point(event) {//{{{ } var tr = his.insertRow(-1); - var fields = [conf("config", "color"), conf("config", "stroke"), conf("config", "shape"), - parseInt(current_ctx.begin_point.x), parseInt(current_ctx.begin_point.y), - parseInt(current_ctx.end_point.x), parseInt(current_ctx.end_point.y), text] + var fields = [s.color, s.stroke, s.shape, + parseInt(s.begin_point.x), parseInt(s.begin_point.y), + parseInt(s.end_point.x), parseInt(s.end_point.y), s.text] for (var i in fields) { var td = tr.appendChild(document.createElement("td")); switch (headers[i]) { - case "shape": - case "style": + case "color": case "stroke": + case "shape": var select = td.appendChild(document.createElement("select")); - (function() { - var index = [headers[i]]; - select.onchange = function(event) { - draw_history[tr.rowIndex-1][index] = event.target[event.target.selectedIndex].text; - refresh(); - } - })(); - var shapes = current_ctx.list[headers[i]]; - for (var j in shapes) { + var list = current_ctx.config[headers[i]].list; + for (var j in list) { var option = select.appendChild(document.createElement("option")); - option.text = shapes[j]; - if (option.text == fields[i]) { + option.value = list[j].value; + option.text = list[j].text; + if (option.value == fields[i]) { select.selectedIndex = j; } } + + (function() { + var index = headers[i]; + select.onchange = function(event) { + draw_history[tr.rowIndex][index] = event.target[event.target.selectedIndex].value; + refresh(); + } + })(); break default: var input = td.appendChild(document.createElement("input")); input.value = fields[i]; input.style.width="40px"; - input.dataset.row = tr.rowIndex-1 - input.dataset.col = headers[i] - input.onkeyup = modify + + (function() { + var row = draw_history[tr.rowIndex] + var col = headers[i] + input.onblur = input.onkeyup = function(event) { + if (event.key && event.key != "Enter") { + return + } + var value = event.target.value; + switch (col) { + case "x1": + row.begin_point.x = value; + break + case "y1": + row.begin_point.y = value; + break + case "x2": + row.end_point.x = value; + break + case "y2": + row.end_point.y = value; + break + default: + row[data.col] = value; + } + refresh() + } + })() } - } - - current_ctx.begin_point = null; - current_ctx.end_point = null; -} -//}}} -function draw_move(event) {//{{{ - var point = trans({x:event.offsetX, y:event.offsetY}); - conf("config", "point", parseInt(point.x)+","+parseInt(point.y)); - - if (current_ctx.begin_point) { - refresh(); - draws(draw, conf("config", "color"), conf("config", "stroke"), conf("config", "shape"), current_ctx.begin_point, point, ""); - } -} -//}}} - -var draw_history = []; -var his = document.getElementById("draw_history"); -function modify(event, row, col) {//{{{ - if (event.key != "Enter") { - return - } - console.log("modify"); - console.log(event); - console.log(); - var data = event.target.dataset; - var row = draw_history[data.row]; - var value = event.target.value; - switch (data.col) { - case "x1": - row.begin_point.x = value; - break - case "y1": - row.begin_point.y = value; - break - case "x2": - row.end_point.x = value; - break - case "y2": - row.end_point.y = value; - break - default: - row[data.col] = value; - } - - refresh(); } //}}} function refresh(time, i) {//{{{ if (time) { - if (0 == i) { - draw.clearRect(0, 0,400/conf("config", "scale"), 400/conf("config", "scale")); - } - - if (conf("config", "begin") <= i && i < draw_history.length) { - var h = draw_history[i]; - draws(draw, h.style, h.stroke, h.shape, h.begin_point, h.end_point); - i++; - setTimeout(function(){ - refresh(time, i); - }, time); + if (i < draw_history.length) { + draws(draw, draw_history[i++]); + setTimeout(function(){refresh(time, i)}, time); } return } - draw.clearRect(0, 0,400/conf("config", "scale"), 400/conf("config", "scale")); - - for (var i in draw_history) { - if (i < conf("config", "begin")) { - continue - } - var h = draw_history[i]; - draws(draw, h.style, h.stroke, h.shape, h.begin_point, h.end_point, h.text); + for (var i = conf("config", "begin"); i < draw_history.length; i++) { + draws(draw, draw_history[i]); } } //}}} - -var item = document.getElementById("draw"); -var draw = item.getContext("2d"); -function draws(draw, style, stroke, shape, begin_point, end_point, text) {//{{{ +function draws(draw, h) {//{{{ draw.save(); - begin_x = begin_point.x; - begin_y = begin_point.y; - end_x = end_point.x; - end_y = end_point.y; - - if (current_ctx.index_point) { - draw.beginPath(); - draw.arc(begin_x, begin_y, 5, 0, 2*Math.PI) - draw.fill() + if (h.shape == "clear") { + draw.clearRect(0, 0,400/conf("config", "scale"), 400/conf("config", "scale")); + draw.restore(); + return } - if (current_ctx.index_point) { - draw.beginPath(); - draw.arc(end_x, end_y, 5, 0, 2*Math.PI) - draw.fill() + var begin_x = h.begin_point.x; + var begin_y = h.begin_point.y; + var end_x = h.end_point.x; + var end_y = h.end_point.y; + + if (h.color) { + if (h.stroke == "stroke") { + draw.strokeStyle = h.color; + } else { + draw.fillStyle = h.color; + } } - switch (shape) { + info("draw", h) + switch (h.shape) { case 'heart': r = Math.sqrt(Math.pow(begin_x-end_x, 2)+Math.pow(begin_y-end_y,2)); a = Math.atan((end_y-begin_y)/(end_x-begin_x))/Math.PI*180; - drawHeart(draw, begin_x, begin_y, r, a, style, stroke) + drawHeart(draw, begin_x, begin_y, r, a, h.color, h.stroke) break case 'cycle': draw.beginPath(); r = Math.sqrt(Math.pow(begin_x-end_x, 2)+Math.pow(begin_y-end_y,2)); draw.arc(begin_x, begin_y, r, 0, 2*Math.PI) - if (stroke == "stroke") { - if (style) { - draw.strokeStyle = style; - } - draw.stroke() - } else { - if (style) { - draw.fillStyle = style; - } - draw.fill() - } + draw[h.stroke]() break case 'line': draw.beginPath(); draw.moveTo(begin_x, begin_y); draw.lineTo(end_x, end_y); - if (stroke == "stroke") { - if (style) { - draw.strokeStyle = style; - } - draw.stroke() - } else { - if (style) { - draw.fillStyle = style; - } - draw.fill() - } + draw[h.stroke]() break case 'rect': - if (stroke == "stroke") { - if (style) { - draw.strokeStyle = style; - } - draw.strokeRect(begin_x, begin_y, end_x-begin_x, end_y-begin_y); - } else { - if (style) { - draw.fillStyle = style; - } - draw.fillRect(begin_x, begin_y, end_x-begin_x, end_y-begin_y); - } + draw[h.stroke+"Rect"](begin_x, begin_y, end_x-begin_x, end_y-begin_y); break case 'text': - if (stroke == "stroke") { - if (style) { - draw.strokeStyle = style; - } - draw.font = current_ctx.font; - draw.strokeText(text, begin_x, begin_y, end_x-begin_x); - } else { - if (style) { - draw.fillStyle = style; - } - draw.font = current_ctx.font; - draw.fillText(text, begin_x, begin_y, end_x-begin_x); - } + draw.font = current_ctx.font; + draw[h.stroke+"Text"](h.text, begin_x, begin_y, end_x-begin_x); } draw.restore(); diff --git a/usr/wiki/html5.md b/usr/wiki/html5.md index 0ec44bb2..aa3b2fd1 100644 --- a/usr/wiki/html5.md +++ b/usr/wiki/html5.md @@ -6,49 +6,17 @@ - 文档: ### miniCAD在线绘图 - - - - - -
- - -
- - - - - - - -
+
+
+
+
-
- - - - - - -
- - - - - - -
- - - - - -
-
+
+
+
### canvas绘图