shadow.vue 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <div>
  3. 阴影扩散范围:<el-input-number @change="changeblur" v-model="blurl" size="mini" style="width: 100px"></el-input-number>
  4. x轴偏移量:<el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number>
  5. y轴偏移量:<el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number>
  6. <el-color-picker @change="changeColor" v-model="color" size="mini" style="vertical-align: middle"></el-color-picker>
  7. <canvas id="shadow" width="740" height="400" tabindex="0"></canvas>
  8. </div>
  9. </template>
  10. <script>
  11. import {SGraphScene, SGraphView} from "@saga-web/graph/lib";
  12. import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib";
  13. class shadowView extends SCanvasView {
  14. constructor(id) {
  15. super(id);
  16. this.blurArr = [1,2,3,4,5,6,7,8,9,10];
  17. this.shadowBlur = 10;
  18. this.shadowColor = new SColor('#CCCCCC');
  19. this.shadowOffsetX = 10;
  20. this.shadowOffsetY = 10;
  21. }
  22. onDraw(canvas) {
  23. canvas.clearRect(0,0,740,400);
  24. canvas.pen.lineWidth = 1;
  25. canvas.pen.color = SColor.Black;
  26. canvas.brush.color = SColor.White;
  27. canvas.shadow.shadowBlur = this.shadowBlur;
  28. canvas.shadow.shadowColor = this.shadowColor;
  29. canvas.shadow.shadowOffsetX = this.shadowOffsetX;
  30. canvas.shadow.shadowOffsetY = this.shadowOffsetY;
  31. canvas.drawRect(270,100,100,100);
  32. }
  33. }
  34. export default {
  35. name: "shadow",
  36. data(){
  37. return {
  38. view: null,
  39. blurl: 10,
  40. X:10,
  41. Y:10,
  42. color:"#CCCCCC"
  43. }
  44. },
  45. mounted() {
  46. this.view = new shadowView('shadow');
  47. },
  48. methods:{
  49. // 修改扩散距离
  50. changeblur(v) {
  51. this.view.shadowBlur = v;
  52. this.view.update()
  53. },
  54. // x轴偏移量
  55. changeX(v){
  56. this.view.shadowOffsetX = v;
  57. this.view.update()
  58. },
  59. // y轴偏移量
  60. changeY(v){
  61. this.view.shadowOffsetY = v;
  62. this.view.update()
  63. },
  64. // 修改颜色
  65. changeColor(v){
  66. this.view.shadowColor = new SColor(v);
  67. this.view.update()
  68. }
  69. }
  70. }
  71. </script>
  72. <style scoped>
  73. canvas{
  74. border: 1px solid #eeeeee;
  75. outline: none;
  76. }
  77. </style>