使用javascript
我想使用javascript在画布上绘制以下2d计划。
我的每个墙的宽度都朝向它。我想以顺时针方向在房间内绘制每个墙。在每个房间我必须首先绘制方向类似于主门方向的墙（在这种情况下是西北[NW]）
任何人都可以帮我一些代码片段吗？我可以使用线条绘制墙壁。但我需要算法。
以下代码我一直试用到现在
function drawPlan(cnv) {
var plan = JSON.parse((localStorage.getItem("plan-name")));
if (!plan)
return true;
var start = { x: planCanvas.width/2 - 100, y: planCanvas.height/2 - 100 };
var canvasRef = document.getElementById('planner-canvas-reference-holder');
var ctx = canvasRef.getContext('2d');
//ctx.scale(100, 100);
var actualWidth;
var color = "red";
var plotLine = function(s, e, textX, textY) {
ctx.beginPath();
ctx.moveTo(s.x, s.y);
ctx.lineTo(e.x, e.y);
ctx.lineWidth = 1;
ctx.font = "20px Times New Roman"
ctx.textBaseline = "top";
ctx.fillText(actualWidth, textX, textY, 20);
ctx.strokeStyle = color;
ctx.stroke();
ctx.closePath();
};
var dir = "";
var mainDoorDirection = "N";
var previousDirection = "";
var currentDirection = "";
ep = { x: planCanvas.width/2 - 400, y: planCanvas.height/2 - 200 };
for (var j in plan) {
var room = plan[j];
previousDirection = "";
currentDirection = "";
dir = "";
start = ep;
start.x = start.x + 300;
start.y = start.y + 100;
for (var i in room) {
var wall = room[i];
var width = parseFloat(wall.width);
actualWidth = width.toFixed(2);
width = feetToPixel(width);
width = width / 100;
width = Math.floor(width);
color = wall.color;
currentDirection = wall.direction;
var angle = wall.angle;
var cd = "";
if ((angle >= 0 && angle <= 22.5) || (angle >= 337.5 && angle < 360))
cd = "N";
if ((angle >= 292.5 && angle <= 337.5))
cd = "NW";
if ((angle >= 202.5 && angle <= 247.5))
cd = "SW";
if ((angle >= 112.5 && angle <= 157.5))
cd = "SE";
if ((angle >= 22.5 && angle <= 67.5))
cd = "NE";
if ((angle >= 247.5 && angle <= 292.5))
cd = "W";
if ((angle >= 157.5 && angle <= 202.5))
cd = "S";
if ((angle >= 67.5 && angle <= 112.5))
cd = "E";
if (currentDirection !== cd) {
currentDirection = cd;
}
//console.log(i + "== " + cd + " ==== CUrrent == "+currentDirection+ " ==== Prev == "+previousDirection);
if (dir) {
if (currentDirection == 'NE' && (previousDirection == 'N' || previousDirection == 'NW')) {
dir = 'top-bottom';
}
if (currentDirection == 'NW' && (previousDirection == 'NE')) {
dir = 'left-right';
}
if (currentDirection == 'E' && (previousDirection == 'NW' || previousDirection == 'N' )) {
dir = 'top-bottom';
}
if (currentDirection == 'S' && (previousDirection == 'W' || previousDirection == 'NE')) {
dir = 'right-left';
}
if (currentDirection == 'W' && (previousDirection == 'S')) {
dir = 'bottom-top';
}
if (currentDirection == 'SW' && (previousDirection == 'S')) {
dir = 'bottom-top';
}
if (currentDirection == 'SE' && (previousDirection == 'W')) {
dir = 'right-left';
}
if (currentDirection == 'SE' && (previousDirection == 'E' || previousDirection == 'NE')) {
dir = 'right-left';
}
if (currentDirection == 'W' && (previousDirection == 'SW' || previousDirection == 'S' || previousDirection == 'SE')) {
dir = 'bottom-top';
}
} else {
if (mainDoorDirection == 'N')
dir = "left-right";
}
var end = {};
if (dir == "left-right") {
end.x = start.x + width;
end.x = end.x - 10;
end.y = start.y;
var textX = start.x + Math.abs((end.x - start.x) / 2) - 5;
var textY = start.y - 20;
plotLine(start, end, textX, textY);
start = end;
//dir = "top-bottom"
} else if (dir == 'top-bottom') {
end.x = start.x;
end.y = start.y + width;
end.y = end.y - 10;
var textX = start.x + 5;
var textY = start.y + Math.abs((end.y - start.y) / 2) - 5;
plotLine(start, end, textX, textY);
start = end;
//dir = 'right-left';
} else if (dir == 'right-left') {
end.x = start.x - width;
end.x = end.x + 10;
end.y = start.y;
var textX = start.x - Math.abs((end.x - start.x) / 2) - 5;
var textY = start.y + 5;
plotLine(start, end, textX, textY);
start = end;
//dir = 'bottom-top';
} else if (dir == 'bottom-top') {
end.x = start.x;
end.y = start.y - width;
end.y = end.y + 10;
var textX = start.x - 22;
var textY = start.y - Math.abs((end.y - start.y) / 2) - 5;
plotLine(start, end, textX, textY);
start = end;
//dir = 'left-right';
}
wall.startPoint = start;
wall.endPoint = end;
ep = end;
previousDirection = currentDirection;
}
}
}
我的json文件结构如下
{
"rcptn": {
"w1": {"width":12, "direction": "N", "angle": 343, "color": "red"},
"w2": {"width":10, "direction": "E", "angle": 75, "color": "red"},
"w3": {"width":12, "direction": "SE", "angle": 153, "color": "red"},
"w4": {"width":10, "direction": "W", "angle": 251, "color": "red"}
},
"Living Room": {
"w1": { "width": "22", "direction": "NW", "angle": 324, "color": "green"},
"w2": { "width": "40", "direction": "NE", "angle": 63, "color": "green"},
"w3": { "width": "4", "direction": "NW", "angle": 324, "color": "green"},
"w4": { "width": "5", "direction": "E", "angle": 72, "color": "green"},
"w5": { "width": "14", "direction": "SE", "angle": 152, "color": "green"},
"w6": { "width": "10", "direction": "W", "angle": 248, "color": "green"},
"w7": { "width": "2", "direction": "S", "angle": 182, "color": "green"},
"w8": { "width": "4", "direction": "W", "angle": 249, "color": "green"},
"w9": { "width": "8", "direction": "SE", "angle": 147, "color": "green"},
"w10": { "width": "29", "direction": "SW", "angle": 249, "color": "green"}
},
"Study Room": {
"w1": { "width": "12", "direction": "NW", "angle": 328, "color": "blue"},
"w2": { "width": "20", "direction": "E", "angle": 68, "color": "blue"},
"w3": { "width": "12", "direction": "SE", "angle": 156, "color": "blue"},
"w4": { "width": "20", "direction": "W", "angle": 278, "color": "blue"}
},
"Kitchen 1": {
"w1": { "width": "12", "direction": "NW", "angle": 333, "color": "orange"},
"w2": { "width": "10", "direction": "NE", "angle": 60, "color": "orange"},
"w3": { "width": "12", "direction": "S", "angle": 158, "color": "orange"},
"w4": { "width": "10", "direction": "SW", "angle": 246, "color": "orange"}
}
}
1 个答案:
答案 0 :(得分：1)
我看不到你的坐标集，但很容易在画布上绘制和描边多边形。
为每个房间制作一个坐标列表，然后使用beginPath()，closePath()和stroke()在画布上绘制它们。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
var canvas = document.body.appendChild(document.createElement("canvas"));
var size = canvas.width = canvas.height = 1000;
var scale = 20;
var ctx = canvas.getContext("2d");
var coordinateSets = [
//Big room
[{
x: 0,
y: 0
},
{
x: 22,
y: 0
},
{
x: 22,
y: 0
},
{
x: 22,
y: 40
},
{
x: 26,
y: 40
},
{
x: 26,
y: 45
},
{
x: 10,
y: 45
},
{
x: 10,
y: 33
},
{
x: 8,
y: 33
},
{
x: 8,
y: 29
},
{
x: 0,
y: 29
},
],
//Little room 1
[{
x: 22,
y: 0
},
{
x: 34,
y: 0
},
{
x: 34,
y: 10
},
{
x: 22,
y: 10
},
],
//Little room 2
[{
x: 22,
y: 10
},
{
x: 34,
y: 10
},
{
x: 34,
y: 30
},
{
x: 22,
y: 30
},
],
//Little room 3
[{
x: 22,
y: 30
},
{
x: 34,
y: 30
},
{
x: 34,
y: 40
},
{
x: 22,
y: 40
},
],
];
coordinateSets.forEach(function(coordinates) {
ctx.beginPath();
ctx.moveTo(coordinates[0].x * scale, coordinates[0].y * scale);
coordinates.forEach(function(coordinate) {
ctx.lineTo(coordinate.x * scale, coordinate.y * scale);
});
ctx.closePath();
ctx.stroke();
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？