<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="shadow" width="740" height="400" tabindex="0"></canvas>
    </div>
</template>

<script>
    import { SCanvasView, SColor, SPainter } from "@persagy-web/draw/lib";

    class shadowView extends SCanvasView {

        constructor(id) {
            super(id);
            this.shadowBlur = 10;
            this.shadowColor = new SColor('#00000060');
            this.shadowOffsetX = 10;
            this.shadowOffsetY = 10;
        }

        onDraw(canvas) {
            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);
        }
    }
    export default {
        name: "shadow",
        data(){
            return {
                view: null,
                blurl: 10,
                X:10,
                Y:10,
                color:"#CCCCCC"
            }
        },
        mounted() {
            this.view = new shadowView('shadow');
        },
        methods:{
            // 修改扩散距离
            changeblur(v) {
                this.view.shadowBlur = v;
                this.view.update()
            },
            // x轴偏移量
            changeX(v){
                this.view.shadowOffsetX = v;
                this.view.update()
            },
            // y轴偏移量
            changeY(v){
                this.view.shadowOffsetY = v;
                this.view.update()
            },
            // 修改颜色
            changeColor(v){
                this.view.shadowColor = new SColor(v);
                this.view.update()
            }
        }
    }
</script>

<style scoped>
    canvas{
        border: 1px solid #eeeeee;
        outline: none;
    }
</style>
