fabric.js对象转json存储并通过json转fabric klass对象添加到画布中

最新推荐文章于 2024-08-29 08:56:49 发布

akko_

最新推荐文章于 2024-08-29 08:56:49 发布

阅读量1.9w

点赞数

分类专栏： vue 文章标签：前端 json fabric

本文链接：https://blog.csdn.net/qq_29523089/article/details/121490106

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

fabric对象转JSON：

JSON对象转fabric对象[klass]：

这个是对于图片对象的从图片对象JSON转 klass对象

在这里插入图片描述

fabric.Rect.fromObject(jsonObject，function)方法可以对json对象进行实例化成klass对象，这个方法提供一个回调函数返回一个klass对象，并且能直接使用canvas.add()方法添加到画布中, 其中fabric.Rect 可以替换成任何fabric的object的子类比如 fabric.Triangle

具体使用：

// 这里是实例化个fabric.Rect 矩形
let fabricObject = new fabric.Rect.fromObject(JSON, (e) => {
                console.log(e);
                canvas.add(e)
            })

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FabricJS对象与JSON互相转换</title>
    <style>
        .container {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .container>div {
            display: flex;
            width: 700px;
            justify-content: space-between;
        }

        .container>div>button {
            width: 300px;
            height: 50px;
        }

        #canvas {
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
        }
    </style>
</head>

<body>
    <div class="container">
        <p>klass对象：凡是由fabric创建的对象都叫klass对象，又称为fabric原生对象,只有klass对象才能使用canva.add方法添加</p>
        <div>
            <button onclick="toJSON()">klass对象转JSON对象并且打印</button>
            <button onclick="toKlass()">JSON对象转klass对象并且打印</button>
        </div>
        <canvas id="canvas" width="700" height="700" />
    </div>



    <script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/451/fabric.js"></script>
    <script>
        let canvas = new fabric.Canvas('canvas');
        let rect = new fabric.Rect({
            width: 100,
            height: 100
        })
        canvas.add(rect)


        let rectJSON = rect.toJSON()

        function toJSON() {
            console.log(rectJSON);
            console.log('由上面可以看到，fabric对象转换成json对象后没有了klass这个名字');
        }

        function toKlass() {
            let fabricRect = new fabric.Rect.fromObject(rectJSON, (e) => {
                console.log(e);
                e.fill = 'rgba(255,0,0,0.5)'
                canvas.add(e)
            })
            console.log('由上面可以看到，通过JSON对象转换后的fabric对象又有了klass这个名字');
        }
    </script>

</body>

JSON对象直接渲染到画布[会清除当前画布内容]：

在这里插入图片描述

方式1：

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
loadFromJSON with reviver

方式2：

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
  // `o` = json object
  // `object` = fabric.Object instance
  // ... do some stuff ...
});