persagy-web-doc/docs/.vuepress/components/engine/style/shadow.vue

<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, 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;
        /** 阴影 x 轴偏移量 */
        shadowOffsetX: number;
        /** 阴影 y 轴偏移量 */
        shadowOffsetY: number;

        /**
         * 构造函数
         * @param id
         */
        constructor(id: string) {
            super(id);
            this.shadowBlur = 10;
            this.shadowColor = new SColor('#00000060');
            this.shadowOffsetX = 10;
            this.shadowOffsetY = 10;
        }

        /**
         * Item 绘制操作
         * @param canvas    绘制对象
         */
        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>