大家好，我正在开发类似Sketch2Code的代码生成器，但我陷入了JSON。我想使用给定html结构的示例myData创建HTML页面。想象一下，这是手绘图像的示例输出，需要放置在DOM中。如何将每个元素放置在正确的坐标上？我不想为元素的顶部和左侧使用绝对位置，而是使其与引导网格一起使用
myData = [
{
id: 1,
name: "Image",
accuracy: 99.92,
xmin: 122,
ymin: 115,
xmax: 275,
ymax: 241,
width: 153,
height: 126
},
{
id: 8,
name: "Carousel",
accuracy: 99.75,
xmin: 223,
ymin: 289,
xmax: 867,
ymax: 481,
width: 644,
height: 192
},
{
id: 10,
name: "Paragraph",
accuracy: 99.98,
xmin: 708,
ymin: 562,
xmax: 920,
ymax: 667,
width: 212,
height: 105
},
{
id: 10,
name: "Paragraph",
accuracy: 99.99,
xmin: 135,
ymin: 565,
xmax: 382,
ymax: 675,
width: 247,
height: 110
},
{
id: 13,
name: "Button",
accuracy: 99.83,
xmin: 206,
ymin: 688,
xmax: 345,
ymax: 746,
width: 139,
height: 58
},
{
id: 13,
name: "Button",
accuracy: 90.4,
xmin: 758,
ymin: 704,
xmax: 859,
ymax: 745,
width: 101,
height: 41
}
];
您可以在CSS中定义所有想要的东西。
例如：
.my-special-button {
width: 139px;
height: 58px;
background-color: red;
color: white;
...
}
定义此按钮，并在所有HTML文件中反复使用。
更新：您可以使用动态类和html元素。如果您执行以下操作，则上面的示例可以是动态的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<h1>
This is a static template, there is no bundler or bundling involved!
</h1>
<script>
const myData = [
{
id: 1,
button: {
text: "Click Me!",
width: 139,
height: 58,
pos: {
top: 10,
left: 20
}
}
}
];
const body = document.querySelector("body");
const btn = document.createElement("button");
btn.innerHTML = myData[0].button.text;
btn.style.width = myData[0].button.width;
btn.style.height = myData[0].button.height;
btn.style.top = myData[0].button.pos.top;
btn.style.left = myData[0].button.pos.left;
body.appendChild(btn);
</script>
</body>
</html>