shadow.vue 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <div style="margin-top: 10px;">
  3. 阴影扩散范围 : <el-input-number @change="changeblur" v-model="blurl" size="mini" style="width: 100px"></el-input-number> &nbsp;
  4. x轴偏移量 : <el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number> &nbsp;
  5. y轴偏移量 : <el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number> &nbsp;
  6. 阴影颜色 : <el-color-picker @change="changeColor" v-model="color" size="mini" style="vertical-align: middle"></el-color-picker>
  7. <canvas :id="id" width="740" height="400" tabindex="0"></canvas>
  8. </div>
  9. </template>
  10. <script lang="ts">
  11. import { SColor, SPainter } from "@persagy-web/draw/lib";
  12. import { Component, Prop, Vue } from "vue-property-decorator";
  13. import {SGraphView} from "@persagy-web/graph/lib";
  14. import { v1 as uuid } from "uuid";
  15. class shadowView extends SGraphView {
  16. shadowBlur:number;
  17. shadowColor:SColor;
  18. shadowOffsetX:number;
  19. shadowOffsetY:number;
  20. constructor(id: string) {
  21. super(id);
  22. this.shadowBlur = 10;
  23. this.shadowColor = new SColor('#00000060');
  24. this.shadowOffsetX = 10;
  25. this.shadowOffsetY = 10;
  26. }
  27. onDraw(canvas:SPainter) {
  28. canvas.clearRect(0,0,740,400);
  29. canvas.pen.lineWidth = 1;
  30. canvas.pen.color = SColor.Black;
  31. canvas.brush.color = SColor.White;
  32. canvas.shadow.shadowBlur = this.shadowBlur;
  33. canvas.shadow.shadowColor = this.shadowColor;
  34. canvas.shadow.shadowOffsetX = this.shadowOffsetX;
  35. canvas.shadow.shadowOffsetY = this.shadowOffsetY;
  36. canvas.drawRect(300,50,100,100);
  37. canvas.drawRect(270,100,100,100);
  38. }
  39. }
  40. @Component
  41. export default class ShadowCanvas extends Vue {
  42. id: string = uuid();
  43. view: shadowView | undefined;
  44. blurl: number = 10;
  45. X: number = 10;
  46. Y: number = 10;
  47. color: string = "#cccccc";
  48. mounted() {
  49. this.view = new shadowView(this.id);
  50. }
  51. // 修改扩散距离
  52. changeblur(v:number):void {
  53. this.view!!.shadowBlur = v;
  54. this.view!!.update()
  55. };
  56. // x轴偏移量
  57. changeX(v:number){
  58. this.view!!.shadowOffsetX = v;
  59. this.view!!.update()
  60. };
  61. // y轴偏移量
  62. changeY(v:number){
  63. this.view!!.shadowOffsetY = v;
  64. this.view!!.update()
  65. };
  66. // 修改颜色
  67. changeColor(v:string){
  68. this.view!!.shadowColor = new SColor(v);
  69. this.view!!.update()
  70. }
  71. }
  72. </script>