123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <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
- */
- 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>
|