<template>
    <div>
        <canvas id="radialGradient3" width="740" height="400" tabindex="0"/>
    </div>
</template>

<script>
    import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph/lib";
    import {SColor, SRadialGradient, SRect} from "@persagy-web/draw/lib";
    import {GradRect} from "./GradRect";

    export default {
        name: "radialGradient3",
        data(){
            return {
                view: ''
            }
        },
        mounted() {
            this.init();
        },
        methods:{
            init(){
                this.view = new SGraphView('radialGradient3');
                const scene = new SGraphScene();
                // 渐变1
                const grad1 = new SRadialGradient(
                    100,
                    100,
                    50, //圆1半径
                    800,
                    800,
                    500 //圆2半径
                );
                // 渐变2
                const grad2 = new SRadialGradient(
                    200,
                    200,
                    300, //圆1半径
                    800,
                    800,
                    50 //圆2半径
                );
                const item = new GradRect(null, grad1);
                scene.addItem(item);
                const item2 = new GradRect(null,grad2);
                item2.moveTo(1300,0);
                scene.addItem(item2);
                this.view.scene = scene;
                this.view.fitSceneToView();
                this.view.scalable = false;
            }
        }
    }
</script>

<style scoped>

</style>
