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

akko_

19853人浏览 · 2021-11-23 12:14:26

akko_ · 2021-11-23 12:14:26 发布

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 ...
});

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

1.8B 体积、33 种语言互译｜腾讯混元 HY-MT1.5-1.8B 多语言机器翻译模型上线

在跨语言交流日益频繁的今天，阅读外语菜单、处理多语言邮件、与不同语言背景的人沟通，已经成为很多人日常工作与生活的一部分。过去，这类需求往往依赖联网翻译工具，而如今，—— 一部设备即可支持的相互翻译。当 AI 不再只是“逐字直译”，而是开始理解语境、风格与语言之间的细微差异，机器翻译就真正具备了今天为大家介绍一款高质量、多语言、支持端侧部署的机器翻译模型 ——，现已上线 AtomGit AI 社区，