Je veux dessiner un plan de plancher 2D sur la page HTML.
J'ai un ensemble de données ressemble au ci-dessous. p>
Dataset strong> P> {
floor:{
"id" : 2,
rooms:[
{
"id" : 21,
"x" : 0.0,
"y" : 0.0,
"height" : 15,
"weight" : 20
}
.
.
.
]
}
}
4 Réponses :
Aucune bibliothèque nécessaire, dessinez-vous les formes SVG vous-même, cela vaut la peine d'investir.
Vos éléments principaux SVG sont:
rectangles: https: //developer.mozilla .Org / fr-US / Docs / Web / SVG / Elément / rect
Groupes: https: //developer.mozilla .org / fr-nous / docs / Web / svg / Element / g
Les ouvertures de porte sont des rectangles blancs superposés sur le dessus.
alternative est utiliser des chemins
Mes conseils: Dessinez 5 rectangles d'abord, après cette notation d'apprentissage du chemin (dessin de la même forme record)
Les superpositions sont des "Mouseover" des événements d'événements qui montrent / masquez (groupe) SVG, tout comme vous afficher / masquer les éléments HTML avec JavaScript
Commencez par taper SVG dans un JSFIDDLE ou CODEPEN.
Si vous utilisez VS-Code, ajoutez l'extension de l'aperçu SVG: https://github.com/simonsiefke/ VSCODE-SVG-Aperçu
Vous aurez un premier tirant d'eau dans une heure.
Remarque: votre jeu de données actuel n'a pas / affiche les coordonnées, de sorte que le dessin est à votre disposition.
Je pense que vous auriez besoin d'une solution basée sur SVG, car les SVG sont efficaces lorsqu'il existe des interactions utilisateur telles que des clics et des souris impliqués. à ha il y a quelques bibliothèques. Je recommanderais raphael.js
Son été pendant un certain temps, c'est simple à installer et facile à utiliser. Il y a aussi quelques bons livres de démarreurs qui vous aident à apprendre toute la bibliothèque dans une journée. RAPHAEL JS , Raphael JS Starter
Je pense que vous pouvez utiliser d3.js , bien que je ne sache pas si ce sera une overcelle pour votre usecase. D3.js est une bibliothèque géniale pour créer des documents axés sur les données, c'est-à-dire lorsque vous avez des données personnalisées et que vous souhaitez utiliser ces données pour manipuler les éléments HTML DOM. Il prend également en charge le comportement et l'animation dynamique d'exécution.
Vous aurez besoin de plus de détails dans votre ensemble de données. Voici le code qui produit l'image que vous voulez ... ou quelque chose comme ça.
p>
const dataSet = {
floor:{
"id" : 2,
rooms:[
{
"id" : 21,
"x" : 0.0,
"y" : 0.0,
"height" : 15,
"width" : 15,
"weight": 0.4,
"gap": 0.8,
"roomSize": 5,
"corridor": 2
}
]
}
}
const roomData = dataSet.floor.rooms[0]
const { id
, x
, y
, height
, width
, weight
, gap
, roomSize
, corridor
} = roomData
const areaWidth = width - roomSize - 2 * weight
const areaHeight = roomSize - weight
const area = areaWidth * areaHeight
const areas = {
room1: area
, room2: area
, room3: area - weight * areaWidth
, room4: (roomSize - 2* weight) *Â (roomSize - 2* weight)
}
let html = `<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 ${width} ${height}"
style={style}
>
<path
d="M ${x},${y}
h ${width - roomSize}
v ${height - roomSize}
h ${roomSize}
v ${roomSize}
h -${roomSize + 2 * weight}
v -${weight}
h ${weight}
v -${weight}
h ${weight}
v ${weight}
h ${roomSize - weight}
v -${roomSize - 2 * weight}
h -${roomSize - weight}
v ${roomSize - 3 * weight - gap}
h -${weight}
v -${height - 3 * weight - gap}
h -${width - roomSize - 2 * weight}
v ${roomSize - weight}
h ${width - roomSize - 2 * weight - corridor}
v ${ weight}
h -${width - roomSize - 2 * weight - corridor}
v ${roomSize - weight}
h ${width - roomSize - 2 * weight - corridor}
v ${ weight}
h -${width - roomSize - 2 * weight - corridor}
v ${roomSize - 2 * weight}
h ${width - roomSize - 2 * weight - corridor}
v ${weight}
H 0
z
"
/>
<rect
id="room1"
x="${weight}"
y="${weight}"
width="${width - roomSize - 2 * weight}"
height="${roomSize - weight}"
fill="#fee"
/>
<rect
id="room2"
x="${weight}"
y="${roomSize + weight}"
width="${width - roomSize - 2 * weight}"
height="${roomSize - weight}"
fill="#efe"
/>
<rect
id="room3"
x="${weight}"
y="${roomSize *Â 2 + weight}"
width="${width - roomSize - 2 * weight}"
height="${roomSize - 2 * weight}"
fill="#eef"
/>
<rect
id="room4"
x="${width - roomSize}"
y="${roomSize *Â 2 + weight}"
width="${roomSize - weight}"
height="${roomSize - 2 * weight}"
fill="#fef"
/>
</svg>
`
const svg = document.createElement("svg")
svg.innerHTML = html
document.body.appendChild(svg)
const showArea = (event) => {
const id = event.target.id
const area = Math.round(areas[id])
console.log("Area " + area + " square feet")
}
const rooms = [...document.querySelectorAll("rect")]
rooms.forEach(room => {
room.addEventListener("mouseenter", showArea, false)
})
Je ne pense pas que vous ayez besoin d'une bibliothèque. Vous pouvez facilement attirer facilement SVG en utilisant des coordonnées. Une autre option est de dessiner sur
Je préférerais également SVG au lieu de toile. Il sera plus facile de créer les voluveurs / popups de la souris dans le DOM au lieu de devoir les créer en toile.