Fabric.js反序列化

最新推荐文章于 2022-11-15 21:51:42 发布

wenhuixl

最新推荐文章于 2022-11-15 21:51:42 发布

阅读量857

点赞数

分类专栏： Fabric.js学习文章标签： Fabric.js

本文链接：https://blog.csdn.net/qq_31519989/article/details/99562954

版权

Fabric.js学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Fabric.js反序列化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fabric.js反序列化</title>
</head>
<style>
    html, body {
        margin:0;
        padding:0;
    }
    .container {
        height:100%;
        width:100%;
        border: 1px solid green;
        position:fixed;
    }
</style>
<body>
<canvas class="container" id="canvas"></canvas>

<script src="lib/fabric.js"></script>
<script>
    var canvas = new fabric.Canvas('canvas');
    var json = {"version":"3.3.0","objects":[{"type":"rect","version":"3.3.0","originX":"left","originY":"top","left":0,"top":0,"width":100,"height":100,"fill":"red","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}]};
    canvas.clear();
    canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
</script>
</body>
</html>