<template>
    <div style="margin-top: 10px;">
        阴影扩散范围 : <el-input-number @change="changeblur" v-model="blurl" size="mini" style="width: 100px"></el-input-number> &nbsp;
        x轴偏移量 : <el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number> &nbsp;
        y轴偏移量 : <el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number> &nbsp;
        阴影颜色 : <el-color-picker @change="changeColor" v-model="color" size="mini" style="vertical-align: middle"></el-color-picker>
        <canvas :id="id" width="740" height="400" tabindex="0"></canvas>
    </div>
</template>

<script lang="ts">
    import { SColor, SPainter } from "@persagy-web/draw/lib";
    import { Component, Prop, Vue } from "vue-property-decorator";
    import {SGraphView} from "@persagy-web/graph/lib";
    import { v1 as uuid } from "uuid";

    class shadowView extends SGraphView {
        shadowBlur:number;
        shadowColor:SColor;
        shadowOffsetX:number;
        shadowOffsetY:number;
        constructor(id: string) {
            super(id);
            this.shadowBlur = 10;
            this.shadowColor = new SColor('#00000060');
            this.shadowOffsetX = 10;
            this.shadowOffsetY = 10;
        }

        onDraw(canvas:SPainter) {
            canvas.clearRect(0,0,740,400);

            canvas.pen.lineWidth = 1;
            canvas.pen.color = SColor.Black;
            canvas.brush.color = SColor.White;
            canvas.shadow.shadowBlur = this.shadowBlur;
            canvas.shadow.shadowColor = this.shadowColor;
            canvas.shadow.shadowOffsetX = this.shadowOffsetX;
            canvas.shadow.shadowOffsetY = this.shadowOffsetY;
            canvas.drawRect(300,50,100,100);
            canvas.drawRect(270,100,100,100);
        }
    }

    @Component
    export default class ShadowCanvas extends Vue {
        id: string = uuid();
        view: shadowView | undefined;
        blurl: number = 10;
        X: number = 10;
        Y: number = 10;
        color: string = "#cccccc";
        mounted() {
            this.view = new shadowView(this.id);
        }
        // 修改扩散距离
        changeblur(v:number):void {
            this.view!!.shadowBlur = v;
            this.view!!.update()
        };
        // x轴偏移量
        changeX(v:number){
            this.view!!.shadowOffsetX = v;
            this.view!!.update()
        };
        // y轴偏移量
        changeY(v:number){
            this.view!!.shadowOffsetY = v;
            this.view!!.update()
        };
        // 修改颜色
        changeColor(v:string){
            this.view!!.shadowColor = new SColor(v);
            this.view!!.update()
        }
    }
</script>