mirror of
https://shylinux.com/x/ContextOS
synced 2025-04-25 16:58:06 +08:00
vps opt miniCAD
This commit is contained in:
shylinux
parent
9f199dda29
commit
448d9dbc15
@ -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;
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -6,49 +6,17 @@
|
||||
- 文档: <https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/>
|
||||
|
||||
### miniCAD在线绘图
|
||||
<button class="cmd_shape heart"></button>
|
||||
<button class="cmd_shape cycle"></button>
|
||||
<button class="cmd_shape rect"></button>
|
||||
<button class="cmd_shape line"></button>
|
||||
<button class="cmd_shape text"></button>
|
||||
<br/>
|
||||
<button class="cmd_stroke stroke"></button>
|
||||
<button class="cmd_stroke fill"></button>
|
||||
<br/>
|
||||
<button class="cmd_color black"></button>
|
||||
<button class="cmd_color red"></button>
|
||||
<button class="cmd_color yellow"></button>
|
||||
<button class="cmd_color green"></button>
|
||||
<button class="cmd_color purple"></button>
|
||||
<button class="cmd_color blue"></button>
|
||||
<button class="cmd_color white"></button>
|
||||
<br/>
|
||||
<div class="cmd_shape bar"></div>
|
||||
<div class="cmd_stroke bar"></div>
|
||||
<div class="cmd_color bar"></div>
|
||||
<div class="ctrl_show bar"></div>
|
||||
<canvas id="draw" width="400" height="400"
|
||||
onmousemove="draw_move(event)"
|
||||
onmouseup="draw_point(event)"
|
||||
></canvas>
|
||||
<br/>
|
||||
<select class="config shape"></select>
|
||||
<select class="config stroke"></select>
|
||||
<select class="config color"></select>
|
||||
<label class="config scale"></label>
|
||||
<label class="config begin"></label>
|
||||
<label class="config point"></label>
|
||||
<br/>
|
||||
<button class="control big"></button>
|
||||
<button class="control small"></button>
|
||||
<button class="control hide"></button>
|
||||
<button class="control draw"></button>
|
||||
<button class="control play"></button>
|
||||
<input class="config interval"></label>
|
||||
<br/>
|
||||
<button class="control delete"></button>
|
||||
<button class="control clear"></button>
|
||||
<button class="control export"></button>
|
||||
<button class="control import"></button>
|
||||
<input class="config json"></label>
|
||||
<br/>
|
||||
<div id="fuck"></div>
|
||||
<div class="ctrl_status bar"></div>
|
||||
<div class="debug_info"></div>
|
||||
<div class="ctrl_data bar"></div>
|
||||
<table id="draw_history"></table>
|
||||
|
||||
### canvas绘图
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user