使用 javascript 在画布上绘制平面图答案

【问题标题】：Draw Floor Plan on canvas using javascript使用 javascript 在画布上绘制平面图
【发布时间】：2018-04-26 01:18:14
【问题描述】：

我想使用 javascript 在画布上绘制以下二维平面图。

我有每面墙的宽度及其朝向。我想按顺时针方向画房间里的每一面墙。在每个房间中，我必须先绘制与主门方向相似的墙（在这种情况下是西北[NW]）

谁能帮我写一些代码 sn-ps 吗？我可以用线条画墙。但我需要算法。

到目前为止我尝试过的以下代码

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"}
  }
}

【问题讨论】：

如果你知道如何画线并且你知道线的位置/旋转，你到底需要什么帮助？你想动画这个吗？如果是这样，到目前为止您尝试过什么？
@DBS，是的，我需要动态绘制这个计划。我无法找到每面墙的 x 和 y 坐标。如果我可以单独绘制每个房间。但我无法编写代码，我们将绘制每个房间与我添加的图像完全相同。简而言之，我需要一个程序。我也可以发布我写的代码。感谢您的回复。
嗯，你有每面墙的测量值，所以你可以计算出它们的相对坐标（只需为每英尺指定一定数量的像素，它应该很简单）。关于动画的绘制，本站已经有详细的解释了：stackoverflow.com/questions/23939588/…

标签： javascript canvas

【解决方案1】：

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

为每个房间制作一个坐标列表并循环遍历它们，使用beginPath()、closePath() 和stroke() 在画布上绘制它们。

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();
});

【讨论】：

感谢代码 sn-p。其实我的问题是一样的。我无法动态找到 x.y 坐标。我必须先画有大门的房间。我必须像在我的 json 文件中定义的那样绘制空间。
@prashant 你只有房间的尺寸。从您的 JSON 中，我们甚至不知道哪些房间通向另一个房间。您需要知道房间的坐标或它们相对于彼此的位置才能绘制它们。