shadow.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <template>
  2. <div style="margin-top: 10px;">
  3. 阴影扩散范围 :
  4. <el-input-number @change="changeblur" v-model="blurl" size="mini" style="width: 100px"></el-input-number> &nbsp;
  5. x轴偏移量 :
  6. <el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number> &nbsp;
  7. y轴偏移量 :
  8. <el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number> &nbsp;
  9. 阴影颜色 :
  10. <el-color-picker @change="changeColor" v-model="color" size="mini"
  11. style="vertical-align: middle"></el-color-picker>
  12. <canvas :id="id" width="740" height="400" tabindex="0"></canvas>
  13. </div>
  14. </template>
  15. <script lang="ts">
  16. import { SColor, SPainter } from "@persagy-web/draw/lib";
  17. import { Component, Vue } from "vue-property-decorator";
  18. import { SGraphView } from "@persagy-web/graph/lib";
  19. import { v1 as uuid } from "uuid";
  20. /**
  21. * 绘制阴影
  22. *
  23. * @author 郝洁 <haojie@persagy.com>
  24. */
  25. class shadowView extends SGraphView {
  26. /** 阴影扩散距离 */
  27. shadowBlur: number;
  28. /** 阴影颜色 */
  29. shadowColor: SColor;
  30. /** 阴影 x 轴偏移量 */
  31. shadowOffsetX: number;
  32. /** 阴影 y 轴偏移量 */
  33. shadowOffsetY: number;
  34. /**
  35. * 构造函数
  36. * @param id
  37. */
  38. constructor(id: string) {
  39. super(id);
  40. this.shadowBlur = 10;
  41. this.shadowColor = new SColor('#00000060');
  42. this.shadowOffsetX = 10;
  43. this.shadowOffsetY = 10;
  44. }
  45. /**
  46. * Item 绘制操作
  47. * @param canvas 绘制对象
  48. */
  49. onDraw(canvas: SPainter) {
  50. // 清除画布
  51. canvas.clearRect(0, 0, 740, 400);
  52. // 绘制操作相关命令
  53. canvas.pen.lineWidth = 1;
  54. canvas.pen.color = SColor.Black;
  55. canvas.brush.color = SColor.White;
  56. canvas.shadow.shadowBlur = this.shadowBlur;
  57. canvas.shadow.shadowColor = this.shadowColor;
  58. canvas.shadow.shadowOffsetX = this.shadowOffsetX;
  59. canvas.shadow.shadowOffsetY = this.shadowOffsetY;
  60. // 绘制矩形
  61. canvas.drawRect(300, 50, 100, 100);
  62. canvas.drawRect(270, 100, 100, 100);
  63. }
  64. }
  65. @Component
  66. export default class ShadowCanvas extends Vue {
  67. id: string = uuid();
  68. view: shadowView | undefined;
  69. blurl: number = 10;
  70. X: number = 10;
  71. Y: number = 10;
  72. color: string = "#cccccc";
  73. mounted() {
  74. this.view = new shadowView(this.id);
  75. }
  76. // 修改扩散距离
  77. changeblur(v: number): void {
  78. this.view!!.shadowBlur = v;
  79. this.view!!.update()
  80. };
  81. // x轴偏移量
  82. changeX(v: number) {
  83. this.view!!.shadowOffsetX = v;
  84. this.view!!.update()
  85. };
  86. // y轴偏移量
  87. changeY(v: number) {
  88. this.view!!.shadowOffsetY = v;
  89. this.view!!.update()
  90. };
  91. // 修改颜色
  92. changeColor(v: string) {
  93. this.view!!.shadowColor = new SColor(v);
  94. this.view!!.update()
  95. }
  96. }
  97. </script>