Fabric JS从本地json文件加载多边形

Fabric JS是一个强大的HTML5 canvas库，用于创建交互式的图形和图像应用程序。它提供了丰富的功能和工具，使开发人员能够轻松地在网页上绘制和编辑各种图形。

从本地JSON文件加载多边形可以通过以下步骤实现：

创建一个HTML页面，并引入Fabric JS库和相关依赖。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <input type="file" id="fileInput" accept=".json">
    <script src="script.js"></script>
</body>
</html>

在JavaScript文件（例如script.js）中编写代码来处理文件加载和多边形绘制逻辑。

// 获取canvas元素
var canvas = new fabric.Canvas('canvas');

// 监听文件选择框的change事件
document.getElementById('fileInput').addEventListener('change', function (e) {
    var file = e.target.files[0];
    var reader = new FileReader();

    // 读取文件内容
    reader.onload = function (event) {
        var json = event.target.result;

        // 解析JSON数据并在canvas上绘制多边形
        canvas.loadFromJSON(json, function () {
            canvas.renderAll();
        });
    };

    reader.readAsText(file);
});

在本地创建一个JSON文件，其中包含多边形的描述信息。例如，可以创建一个名为"polygon.json"的文件，内容如下：

{
    "objects": [
        {
            "type": "polygon",
            "left": 100,
            "top": 100,
            "points": [
                { "x": 0, "y": 0 },
                { "x": 100, "y": 0 },
                { "x": 100, "y": 100 },
                { "x": 0, "y": 100 }
            ],
            "fill": "red"
        }
    ]
}