bzdadmin
/
ColdP_server


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582
							<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="https://osscold.baozhida.cn/css/font.css">
    <link rel="stylesheet" href="https://osscold.baozhida.cn/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://osscold.baozhida.cn/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://osscold.baozhida.cn/js/xadmin.js"></script>
<!--    <script type="text/javascript" src="https://osscold.baozhida.cn/js/jquery.colorpicker.js"></script>-->
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/460/fabric.min.js" integrity="sha512-ybPp3kCrNQXdvTfh99YLIdnajWnQvHuEKDJ+b26mxI9w+pLhnBo3HmNLJ1pEUBFO1Q0bfJxApeqecNbmaV763g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        .plan_tool_{
            height: 100px;width: 96px;background-color: rgba(239,239,239,0.95);text-align: center;float: left;margin: 4px 2px;
            cursor: pointer;
        }
        .plan_tool_:hover{
            background-color: rgba(231, 233, 234, 0.95);
        }

        .scrollbar {
            overflow-y:scroll;
        }
        .scrollbar::-webkit-scrollbar {
            /*滚动条整体样式*/
            width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
        .scrollbar::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius   : 10px;
            background-color: skyblue;
            background-image: -webkit-linear-gradient(
                    45deg,
                    rgba(255, 255, 255, 0.2) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, 0.2) 50%,
                    rgba(255, 255, 255, 0.2) 75%,
                    transparent 75%,
                    transparent
            );
        }
        .scrollbar::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            background   : #ededed;
            border-radius: 10px;
        }
    </style>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
               <a><cite>宝智达</cite></a>
            </span>
    <a class="layui-btn layui-btn-normal " style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">

                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-input-inline layui-show-xs-block">
                            <select name="Id">
                                <option>请选择分类</option>
                                {{range $index, $elem := .List}}
                                <option value="{{$elem.Id}}" {{if gt $.Id 0 }}
                                        {{if eq $.Id $elem.Id }}
                                        selected
                                        {{end}}
                                        {{end}}
                                >{{$elem.T_name}}</option>
                                {{end}}

                            </select>
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="sreach">
                                <i class="layui-icon">&#xe66a;</i></button>
                            <div class="layui-btn layui-btn-normal" onclick="canvas_clear()">
                                <i class="layui-icon">&#xe638;</i>清楚所有</div>
                            <div class="layui-btn layui-btn-normal" onclick="canvas_removeSelected()">
                                <i class="layui-icon">&#xe638;</i>删除对象</div>
                            <div class="layui-btn layui-btn-normal" id="canvas_colorpicker">
                                <i class="layui-icon">&#xe66a;</i>颜色选择</div>
                        </div>
                    </form>

                </div>


                <div class="layui-card-body ">

                    {{if gt $.Id 0 }}
                    <div id="plan_row" class="layui-row">
                        <div id="plan_div" style="float: left">
                            <canvas  id="c" style="border:1px solid red;"></canvas>
                        </div>
                        <div id="plan_tool" class="scrollbar" style="padding-left: 1rem;float: left;">
                            <div>
                                <div style="width: 100%;height: 30px;padding-top: 4px;float: left;background-color: rgb(160,204,252);text-align: center;font-size: 18px;margin-bottom: 10px">工具栏</div>

                                <div class="plan_tool_" onclick="add_oImg()">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_" onclick="addTextbox()">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">文本框</div>
                                </div>
                                <div class="plan_tool_" onclick="addRect_1()">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">墙壁</div>
                                </div>
                                <div class="plan_tool_" onclick="addRect_2()">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">门</div>
                                </div>
                                <div class="plan_tool_" onclick="addRect()">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">方形</div>
                                </div>
                                <div class="plan_tool_" onclick="addCircle()">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">圆形</div>
                                </div>
                                <div class="plan_tool_" onclick="addTriangle()">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">三角形</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>

                            </div>

                            <div id="DeviceSensor_calss_list">

                                <div class="plan_tool_" onclick="add_oImg()">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>
                                <div class="plan_tool_">
                                    <img width="80" height="80" src="https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png">
                                    <div style="background-color: rgba(227,225,225,0.95)">工具</div>
                                </div>

                            </div>
                        </div>

                    </div>
                    {{end}}


                </div>

            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        plan_row = $("#plan_row").width() - 20
        $("#plan_tool").width( 220 )
        $("#plan_tool").height(  $(window).height() - 150 )
        $("#plan_div").width(plan_row - 216)
        {{if gt $.Id 0 }}
            get_DeviceSensor_calss_list()
            f_go_plan()
        {{end}}


    });

    layui.use(['form'], function(){
        form = layui.form;

    });

    function get_DeviceSensor_calss_list() {

        $.ajax({
            type: 'POST',
            url: 'DeviceClassBind_List',//发送请求
            data: {
                T_calss_id: parseInt({{$.Id}}),
                page: 0,
                page_z: 9999,
            },
            success: function (result) {
                console.log(result)
                $('#DeviceSensor_calss_list').html("<div style=\"margin-top: 20px;width: 100%;height: 30px;padding-top: 4px;float: left;background-color: rgb(160,204,252);text-align: center;font-size: 18px;margin-bottom: 10px\">传感器</div>\n")

                if (result.Code == 200) {

                    DeviceSensor_lite = result.Data.DeviceSensor_lite
                    if (DeviceSensor_lite.length == 0) {
                        $('#DeviceSensor_calss_list').html("<div style=\"color: #1E9FFF;text-align: center;font-size: 15px;margin-top: 150px\">没有数据</div>")
                         return
                    }
                    Add_DeviceSensor_calss_list(result.Data.DeviceSensor_lite) // 列表


                } else {


                }
            }
        });

    }

    function Add_DeviceSensor_calss_list(DeviceSensor_lite) {

        for (let i = 0; i < DeviceSensor_lite.length; i++) {
            $('#DeviceSensor_calss_list').append("<div class=\"plan_tool_\" onclick=\"add_DeviceSensor('','','"+ DeviceSensor_lite[i].T_name +"')\">\n" +
                "    <img width=\"80\" height=\"80\" src=\"https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png\">\n" +
                "    <div style=\"background-color: rgba(227,225,225,0.95)\">"+ DeviceSensor_lite[i].T_name +"</div>\n" +
                "</div>")
        }

    }
    

</script>

<script>
    var canvas
    function f_go_plan() {
        plan_div_width = $("#plan_div").width();
        plan_div_height = $(window).height() - 150;
        console.log("plan_div:",plan_div_width,plan_div_height)
        canvas = new fabric.Canvas('c',{backgroundColor : "#a4e5ff",width: plan_div_width,height: plan_div_height});
        var LabeledRect = fabric.util.createClass(fabric.Rect, {
            type: 'labeledRect',
            initialize: function(options) {
                options || (options = { });
                this.callSuper('initialize', options);
                this.set('label', options.label || '');
                this.set('labelFont', options.labelFont || '');
                this.set('labelFill', options.labelFill || '');
            },
            toObject: function() {
                return fabric.util.object.extend(this.callSuper('toObject'), {
                    label: this.get('label'),
                    labelFont: this.get('labelFont'),
                    labelFill: this.get('labelFill')
                });
            },
            _render: function(ctx) {
                this.callSuper('_render', ctx);
                // ctx.font = '20px Helvetica';
                // ctx.fillStyle = '#333';
                console.log('this', this);
                ctx.font = this.labelFont;
                ctx.fillStyle = this.labelFill;
                // ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
                ctx.fillText(this.label, 0, 0+10);
            }
        });

        var labeledRect = new LabeledRect({
            width: 100,
            height: 50,
            left: 100,
            top: 100,
            label: 'test',
            fill: '#faa',
            labelFont: '30px Helvetica',
            labelFill: '#00ff00'
        });
        canvas.add(labeledRect);

        setTimeout(function(){
            labeledRect.set({
                label: 'trololo',
                fill: '#aaf',
                rx: 10,
                ry: 10,
                labelFill: '#0000ff'
            });
            canvas.renderAll();
        }, 3000)
        // canvas.item(0); // 参考之前添加的 fabric.Rect (第一个对象)
        // canvas.getObjects(); // 获取画布上的所有对象（rect 将是第一个也是唯一的）
        // canvas.add(
        //     new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
        //     new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
        //     new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
        // );
        Select_e = false
        function animate_down(e) {
            if (e.target) {
                console.log("animate_down")
                console.log(e)
                canvas.remove(e);
                Select_e = e
            }
        }
        canvas.on('mouse:down', function(e) { animate_down(e); });

        $(document).keydown(function(event){
            console.log(event.keyCode);
            if(event.keyCode == 46){
                if(Select_e){
                    console.log("删除：",Select_e);
                    canvas.remove(Select_e);
                }

            }
        });


        // 画布缩放
        canvas.on('mouse:wheel', function(opt) {
            var delta = opt.e.deltaY;
            var zoom = canvas.getZoom();
            zoom *= 0.999 ** delta;
            if (zoom > 20) zoom = 20;
            if (zoom < 0.01) zoom = 0.01;
            canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
            console.log({ x: opt.e.offsetX, y: opt.e.offsetY },zoom)
            opt.e.preventDefault();
            opt.e.stopPropagation();
        });
        

    }

    // 清除画布
    function canvas_clear() {
        // clear canvas
        canvas.clear();

        // remove currently selected object
        canvas.remove(canvas.getActiveObject());
    }
    // 删除对象
    function canvas_removeSelected() {
        var activeObjects = canvas.getActiveObjects();
        canvas.discardActiveObject()
        if (activeObjects.length) {
            canvas.remove.apply(canvas, activeObjects);
        }
    };


    $("#canvas_colorpicker").colorpicker({

        fillcolor:true,

        success:function(o,color){

            console.log("color:",color)

        }

    });

</script>

<!--工具-->
<script>


    // 文本
    function addTextbox() {
        var text = '这里是个文本框';
        var textSample = new fabric.Textbox(text.slice(0, 100), {
            fontSize: 20,
            left: getRandomInt(100, 400),
            top: getRandomInt(100, 400),
            fontFamily: 'helvetica',
            angle: 0,
            fill: '#000000' ,
            fontWeight: '',
            originX: 'left',
            width: 100,
            hasRotatingPoint: true,
            centerTransform: true
        });

        canvas.add(textSample);
    };
    // 长方形
    function addRect() {

        canvas.add(new fabric.Rect({
            left: getRandomInt(100, 400),
            top: getRandomInt(100, 400),
            fill: '#000000',
            width: 50,
            height: 50,
            opacity: 0.8
        }));
    };
    // 长方形 -
    function addRect_1() {

        canvas.add(new fabric.Rect({
            left: getRandomInt(100, 400),
            top: getRandomInt(100, 400),
            fill: 'rgba(150,150,150,0.95)',
            width: 50,
            height: 50,
            opacity: 0.8
        }));
    };
    // 长方形 -
    function addRect_2() {

        canvas.add(new fabric.Rect({
            left: getRandomInt(100, 400),
            top: getRandomInt(100, 400),
            fill: 'rgb(142,255,144)',
            width: 50,
            height: 50,
            opacity: 0.8
        }));
    };
    //圆圈
    function addCircle() {

        canvas.add(new fabric.Circle({
            left: getRandomInt(100, 400),
            top: getRandomInt(100, 400),
            fill: '#000000',
            radius: 50,
            opacity: 0.8
        }));
    };
    //三角形
    function addTriangle() {

        canvas.add(new fabric.Triangle({
            left: getRandomInt(100, 400),
            top: getRandomInt(100, 400),
            fill: '#000000',
            width: 50,
            height: 50,
            opacity: 0.8
        }));
    };

    function add_Rect() {
        canvas.add(
            new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
            new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
            new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
        );
    }
    function add_oImg() {
        fabric.Image.fromURL('https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png', function(oImg) {
            canvas.add(oImg);
        });
    }
    function add_DeviceSensor(Sn,id,name) {
        fabric.Image.fromURL('https://osscold.baozhida.cn/images/%e6%b8%a9%e6%b9%bf%e5%ba%a6%e4%bc%a0%e6%84%9f%e5%99%a8-1.png', function(oImg) {


            // oImg.hasContent = false
            // oImg.hasBorders  = false
            // this.__canvases.push(canvas);
            oImg.scale(0.6).set({ left: 0, top: 0 });


            var circle = new fabric.Rect({

                width: 190,
                height: 80,
                fill: '#e5e5e5',

            });

            var text1 = new fabric.Text('XX.X℃', {
                left: 80,
                top: 6,
                fontSize: 30,
                fill: '#62adff',
            });
            var text2 = new fabric.Text('XX %', {
                left: 80,
                top: 40,
                fontSize: 30,
                fill: '#62adff',
            });
            var group = new fabric.Group([circle, oImg, text1,text2 ], {
                left: 350,
                top: 100,

            });

            canvas.add(group);

        });
    }
    var getRandomInt = fabric.util.getRandomInt;


</script>

</body>
</html>