<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, Vue } from "vue-property-decorator"; import { SGraphView } from "@persagy-web/graph/lib"; import { v1 as uuid } from "uuid"; /** * 绘制阴影 * * @author 郝洁 <haojie@persagy.com> */ class shadowView extends SGraphView { /** 阴影扩散距离 */ shadowBlur: number; /** 阴影颜色 */ shadowColor: SColor; /** 阴影 x 轴偏移量 */ shadowOffsetX: number; /** 阴影 y 轴偏移量 */ shadowOffsetY: number; /** * 构造函数 * @param id 图 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 */ id: string = uuid(); /** 实例化 view */ view: shadowView | undefined; /** 阴影 */ blurl: number = 10; /** x 轴 */ X: number = 10; /** y 轴 */ 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>