新建
This commit is contained in:
parent
f3ecb3d947
commit
f7288a190d
185
cad.js
Normal file
185
cad.js
Normal file
@ -0,0 +1,185 @@
|
||||
document.querySelector("#current_color").value = "#FFFFFF";
|
||||
document.querySelector("#current_weight").value = "1";
|
||||
|
||||
const CAD = {
|
||||
系统参数: {
|
||||
刷新率: 10,
|
||||
背景色: 0,
|
||||
坐标轴颜色: 64,
|
||||
辅助线颜色: 128,
|
||||
},
|
||||
当前颜色: 255,
|
||||
当前线宽: 1,
|
||||
鼠标指针: {
|
||||
出界: false,
|
||||
颜色: 255,
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
点击位置: [],
|
||||
当前命令: null,
|
||||
对象列表: [],
|
||||
原点偏移: {},
|
||||
};
|
||||
|
||||
function setup() {
|
||||
// 初始化
|
||||
createCanvas(windowWidth - 200, windowHeight);
|
||||
frameRate(CAD.系统参数.刷新率);
|
||||
CAD.原点偏移 = { x: width / 2, y: height / 2 };
|
||||
mouseMoved();
|
||||
draw();
|
||||
}
|
||||
|
||||
function draw() {
|
||||
绘制背景层();
|
||||
绘制辅助信息层();
|
||||
绘制对象();
|
||||
绘制当前对象();
|
||||
绘制鼠标指针();
|
||||
}
|
||||
|
||||
function windowResized() {
|
||||
resizeCanvas(windowWidth - 200, windowHeight);
|
||||
}
|
||||
|
||||
function 绘制当前对象() {
|
||||
strokeWeight(CAD.当前线宽);
|
||||
switch (CAD.当前命令) {
|
||||
case "连续画线":
|
||||
if (CAD.点击位置.length < 1) return;
|
||||
const 终点 = CAD.点击位置[CAD.点击位置.length - 1];
|
||||
stroke(CAD.系统参数.辅助线颜色);
|
||||
line(
|
||||
终点.x + CAD.原点偏移.x,
|
||||
终点.y + CAD.原点偏移.y,
|
||||
CAD.鼠标指针.x + CAD.原点偏移.x,
|
||||
CAD.鼠标指针.y + CAD.原点偏移.y
|
||||
);
|
||||
if (CAD.点击位置.length < 2) return;
|
||||
stroke(CAD.当前颜色);
|
||||
for (let i = 0; i < CAD.点击位置.length - 1; i++) {
|
||||
line(
|
||||
CAD.点击位置[i].x + CAD.原点偏移.x,
|
||||
CAD.点击位置[i].y + CAD.原点偏移.y,
|
||||
CAD.点击位置[i + 1].x + CAD.原点偏移.x,
|
||||
CAD.点击位置[i + 1].y + CAD.原点偏移.y
|
||||
);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function 绘制对象() {
|
||||
for (let object of CAD.对象列表) {
|
||||
switch (object.类型) {
|
||||
case "线段":
|
||||
stroke(object.颜色);
|
||||
strokeWeight(object.线宽);
|
||||
line(
|
||||
object.起点.x + CAD.原点偏移.x,
|
||||
object.起点.y + CAD.原点偏移.y,
|
||||
object.终点.x + CAD.原点偏移.x,
|
||||
object.终点.y + CAD.原点偏移.y
|
||||
);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function 绘制背景层() {
|
||||
background(CAD.系统参数.背景色);
|
||||
// 绘制坐标轴
|
||||
stroke(CAD.系统参数.坐标轴颜色);
|
||||
strokeWeight(1);
|
||||
line(0, CAD.原点偏移.y, width, CAD.原点偏移.y);
|
||||
line(CAD.原点偏移.x, 0, CAD.原点偏移.x, height);
|
||||
}
|
||||
|
||||
function 绘制辅助信息层() {
|
||||
fill(255);
|
||||
textSize(16);
|
||||
text(`按键: ${key} 键码: ${keyCode}`, 30, 40);
|
||||
text(`鼠标视窗坐标: ${mouseX}, ${mouseY}`, 30, 60);
|
||||
text(`鼠标世界坐标: ${CAD.鼠标指针.x}, ${CAD.鼠标指针.y}`, 30, 80);
|
||||
}
|
||||
|
||||
function 绘制鼠标指针() {
|
||||
stroke(CAD.鼠标指针.颜色);
|
||||
strokeWeight(1);
|
||||
line(mouseX - 10, mouseY, mouseX + 10, mouseY);
|
||||
line(mouseX, mouseY - 10, mouseX, mouseY + 10);
|
||||
}
|
||||
|
||||
function mouseMoved() {
|
||||
// 修改鼠标位置的世界坐标
|
||||
CAD.鼠标指针.x = mouseX - CAD.原点偏移.x;
|
||||
CAD.鼠标指针.y = mouseY - CAD.原点偏移.y;
|
||||
CAD.鼠标指针.出界 =
|
||||
mouseX < 0 || mouseX >= width || mouseY < 0 || mouseY >= height;
|
||||
}
|
||||
|
||||
function mouseClicked() {
|
||||
// console.log(`鼠标点击: ${CAD.鼠标指针.x}, ${CAD.鼠标指针.y}`);
|
||||
if (CAD.当前命令 && !CAD.鼠标指针.出界) {
|
||||
CAD.点击位置.push({ x: CAD.鼠标指针.x, y: CAD.鼠标指针.y });
|
||||
}
|
||||
}
|
||||
|
||||
function keyPressed() {
|
||||
const KEY_L = 76;
|
||||
switch (keyCode) {
|
||||
case KEY_L:
|
||||
if (CAD.当前命令 == null) {
|
||||
CAD.当前命令 = "连续画线";
|
||||
CAD.点击位置 = [];
|
||||
console.log("开始命令：", CAD.当前命令);
|
||||
}
|
||||
break;
|
||||
case ESCAPE:
|
||||
if (CAD.当前命令) {
|
||||
console.log("退出命令:", CAD.当前命令);
|
||||
CAD.当前命令 = null;
|
||||
}
|
||||
break;
|
||||
case ENTER:
|
||||
if (CAD.当前命令 == "连续画线") {
|
||||
console.log("结束命令:", CAD.当前命令);
|
||||
// 将已画的线放入对象库
|
||||
for (let i = 0; i < CAD.点击位置.length - 1; i++) {
|
||||
添加线段(CAD.点击位置[i], CAD.点击位置[i + 1]);
|
||||
}
|
||||
CAD.点击位置 = [];
|
||||
CAD.当前命令 = null;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function 添加线段(起点, 终点) {
|
||||
CAD.对象列表.push({
|
||||
id: crypto.randomUUID(),
|
||||
类型: "线段",
|
||||
颜色: CAD.当前颜色,
|
||||
线宽: CAD.当前线宽,
|
||||
起点,
|
||||
终点,
|
||||
});
|
||||
}
|
||||
|
||||
function uuidv4() {
|
||||
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
|
||||
(
|
||||
c ^
|
||||
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
|
||||
).toString(16)
|
||||
);
|
||||
}
|
||||
49
index.html
Normal file
49
index.html
Normal file
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link
|
||||
href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4ao3UYFIH2FxR8/xYTd+QWE3e3GRWGfh0Zn0IiHbkJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfG6WZFRJz/xUScf8SEWb/ExFn/x0Zmv8cGJT/GBWB/xIPYcMYFYNpIRy6DwAAAAAAAAAAAAAAAAAAAAAAAAAAHRqceCYjiv9STe3/TUnj/yYjjv8hHa7/IR2x/x4anv8ZFoP/ExFm/xgVbPYiHpSlKCO/PwAAAAAAAAAAAAAAABsYklcnJIf/Xlvv/1JO7f8tKZz/IR2y/yEdrv8cGZf/FhN3/xEQWf9FQNP/TUjr/z854p8AAAAAAAAAAAAAAAAZF4k2Ih+B/1xZ8P9TUO7/MS2n/xQRbP8VEnH/FRNz/xIQYv8sKY3/TUjr/0hE3+0aF30SAAAAAAAAAAAAAAAAGBWAEh0aev9aV/D/VVHv/1RQ7v9TT+7/Uk3t/0lE2/9DPsv/TUjn/05J6/8nJIlpAAAAAAAAAAAAAAAAAAAAAAAAAAAZFnLwYF3y/1pW8P9VUu//YV7w/2xp8P9mYu//VlLu/1BL7P9DPs3GDQtFAwAAAAAAAAAAAAAAAAAAAAAAAAAAFBFsz2Zj8f9iYPL/PTu8/zo2yv88Oa7/RUSp/2Bd7/9QTOv8GRZjMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQRbKtgX+b/W1nz/zg2sP8gHKj/FBFo/01Jxv9WUu7/NjOolgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUEWyKW1rc/19d9P87OrT/GxiR/ykogP9eWvH/UE3j5BEPTgwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFBFsaVdX0f9hYfb/Pz65/xgWcv9VUuL/WFbx/yYkf1oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQRbEhSUcT/Y2P3/0FAuP87Op//Xlz0/0hGysAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAATEWkkTEy4/2Rk9/9QUNH/YGDx/2Bf8/kcGmQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAExBmBkZGq/xxcfj/Zmb3/2Rk9/87OqSHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/P5/hd3f4/21t9/9bWuTbEA5LDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPj2UsX9/+P9zc/j/KyqCSwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4f8AAMAfAADgAwAA4AEAAOADAADgBwAA4AcAAOAPAADgDwAA4B8AAPA/AADwPwAA8H8AAPB/AADw/wAA8f8AAA=="
|
||||
rel="icon"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
<title>CAD.js</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<main></main>
|
||||
<div id="control">
|
||||
<h1>CAD.js</h1>
|
||||
<div>
|
||||
<label for="current_color">颜色</label>
|
||||
<input
|
||||
type="color"
|
||||
onchange="CAD.当前颜色=this.value"
|
||||
id="current_color"
|
||||
name="current_color"
|
||||
style="width: 80px"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="current_weight">线宽</label>
|
||||
<input
|
||||
type="number"
|
||||
onchange="CAD.当前线宽=this.value"
|
||||
id="current_weight"
|
||||
name="current_weight"
|
||||
style="width: 80px"
|
||||
value="1"
|
||||
min="1"
|
||||
max="10"
|
||||
step="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="p5.min.js"></script>
|
||||
<script src="cad.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
3
p5.min.js
vendored
Normal file
3
p5.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
30
style.css
Normal file
30
style.css
Normal file
@ -0,0 +1,30 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
#control {
|
||||
width: 200px;
|
||||
padding: 10px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#control h1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user