-1
Ich möchte folgenden 2D-Plan auf Leinwand mit Javascript zeichnen. 
Zeichnen Grundriss auf Leinwand mit Javascript
Ich habe Breite jeder Wand mit seiner zugewandten Richtung. Ich möchte jede Wand im Raum im Uhrzeigersinn zeichnen. In jedem Raum muss ich zuerst eine Wand zeichnen, deren Richtung der Richtung der Haupttür ähnelt (In diesem Fall ist es Nordwest [NW])
Kann mir bitte jemand mit ein paar Codeausschnitten helfen? Ich kann Wände mit Linien zeichnen. Dafür brauche ich einen Algorithmus.
folgenden Code habe ich bis jetzt versucht
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;
}
}
}
Meine json Dateistrukturen wird wie folgt
{
"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"}
}
}
Wenn Sie wissen, wie Linien zu zeichnen und Sie kennen die Linien Positionen/Drehungen, was genau brauchen Sie Hilfe? Versuchst du das zu animieren? Wenn ja, was hast du bisher versucht? – DBS
@DBS, Ja Ich muss diesen Plan dynamisch zeichnen. Ich kann keine x- und y-Koordinaten für jede Wand finden. Wenn ich jeden Raum einzeln zeichnen kann. Aber ich kann keinen Code schreiben, den wir jeden Raum genau so zeichnen werden wie das Bild, das ich hinzugefügt habe. Kurz gesagt brauche ich ein Programm dafür. Ich kann auch Code schreiben, den ich geschrieben habe. Danke für deine Antwort. – prashant
Nun, Sie haben die Maße jeder Wand, so dass Sie ihre relativen Koordinaten herausfinden können (weisen Sie einfach eine bestimmte Anzahl von Pixeln pro ft zu und es sollte einfach genug sein). Um sie auf eine animierte Weise zu zeichnen, gibt es bereits einige detaillierte Erklärungen dazu auf dieser Seite: https://stackoverflow.com/questions/23939588/how-to-animate-drawing-lines-on-canvas – DBS