<template>
    <div style="margin-top: 10px;">
<!--        <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>-->
<!--        圆角半径 : <el-input-number @change="changeY" v-model="R" size="mini" style="width: 100px"></el-input-number>-->
        <canvas :id="id" width="740" height="400" />
    </div>
</template>

<script>
    import {SGraphAreaGroupItem, SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
    import {SPath} from "@persagy-web/draw/lib";

    class sga extends SGraphItem{
        constructor(parent){
            super(parent);
            this.path = new SPath();
            this.path.polygon([{x:0,y:0},{x:0,y:1000},{x:700,y:1500},{x:500,y:1000},{x:200,y:0}])
        }
        onDraw(painter) {
            console.log(this.path);
            painter.drawPath(this.path)
        }
    }

    export default {
        name: "areaCanvas",
        data(){
            return{
                id: 'area'+Date.now(),
                view: ''
            }
        },
        mounted() {
            this.init();
        },
        methods:{
            init(){
                this.view = new SGraphView(this.id);
                const scene = new SGraphScene();
                const item = new sga(null);
                scene.addItem(item);
                this.view.scene = scene;
                this.view.fitSceneToView();
                console.log(item)
            }
        }
    }
</script>

<style scoped>

</style>
