<template> <div style="margin-top: 10px;"> 阴影扩散范围 : <el-input-number @change="changeblur" v-model="blurl" size="mini" style="width: 100px"></el-input-number> x轴偏移量 : <el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number> y轴偏移量 : <el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number> 阴影颜色 : <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>