使用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;
    }
  }
}

---

我看不到您的坐标集，但在画布上绘制和绘制多边形很容易

使用

beginPath（）

、

closePath（）

和

stroke（）

在画布上绘制每个房间的坐标列表并在其上循环

var canvas=document.body.appendChild（document.createElement（“canvas”）；
var size=canvas.width=canvas.height=1000；
var量表=20；
var ctx=canvas.getContext（“2d”）；
var坐标集=[
//大房间
[{
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
},
],
//小房间1
[{
x:22，
y:0
},
{
x:34，
y:0
},
{
x:34，
y:10
},
{
x:22，
y:10
},
],
//小房间2
[{
x:22，
y:10
},
{
x:34，
y:10
},
{
x:34，
y:30
},
{
x:22，
y:30
},
],
//小房间3
[{
x:22，
y:30
},
{
x:34，
y:30
},
{
x:34，
y:40
},
{
x:22，
y:40
},
],
];
坐标集合forEach（函数（坐标）{
ctx.beginPath（）；
ctx.moveTo（坐标[0].x*比例，坐标[0].y*比例）；
坐标。forEach（函数（坐标）{
ctx.lineTo（坐标x*比例，坐标y*比例）；
});
ctx.closePath（）；
ctx.stroke（）；
});如果您知道如何绘制直线，并且知道直线的位置/旋转，那么您到底需要什么帮助？你是不是想给这个制作动画？如果是的话，到目前为止你尝试了什么？@DBS，是的，我需要动态绘制这个计划。我找不到每面墙的x和y坐标。如果我能单独画出每个房间。但我无法编写代码，我们将绘制每个房间完全像我添加的图像。简而言之，我需要一个程序。我也可以发布我写的代码。谢谢你的回复。好吧，你有每面墙的测量值，所以你可以计算出它们的相对坐标（只需为每英尺指定一定数量的像素，这应该足够简单）。关于以动画的方式绘制它们，这个网站上已经有了一些详细的解释：谢谢你的代码片段。其实我的问题是一样的。我无法动态地找到x.y坐标。我得先去有正门的客厅。我必须像json文件中定义的那样绘制房间。@prashant您只有房间的尺寸。从你的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"}
  }
}