1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- <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>
|