shadow.vue 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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 { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib";
  12. class shadowView extends SCanvasView {
  13. constructor(id) {
  14. super(id);
  15. this.shadowBlur = 10;
  16. this.shadowColor = new SColor('#00000060');
  17. this.shadowOffsetX = 10;
  18. this.shadowOffsetY = 10;
  19. }
  20. onDraw(canvas) {
  21. canvas.clearRect(0,0,740,400);
  22. canvas.pen.lineWidth = 1;
  23. canvas.pen.color = SColor.Black;
  24. canvas.brush.color = SColor.White;
  25. canvas.shadow.shadowBlur = this.shadowBlur;
  26. canvas.shadow.shadowColor = this.shadowColor;
  27. canvas.shadow.shadowOffsetX = this.shadowOffsetX;
  28. canvas.shadow.shadowOffsetY = this.shadowOffsetY;
  29. canvas.drawRect(300,50,100,100);
  30. canvas.drawRect(270,100,100,100);
  31. }
  32. }
  33. export default {
  34. name: "shadow",
  35. data(){
  36. return {
  37. view: null,
  38. blurl: 10,
  39. X:10,
  40. Y:10,
  41. color:"#CCCCCC"
  42. }
  43. },
  44. mounted() {
  45. this.view = new shadowView('shadow');
  46. },
  47. methods:{
  48. // 修改扩散距离
  49. changeblur(v) {
  50. this.view.shadowBlur = v;
  51. this.view.update()
  52. },
  53. // x轴偏移量
  54. changeX(v){
  55. this.view.shadowOffsetX = v;
  56. this.view.update()
  57. },
  58. // y轴偏移量
  59. changeY(v){
  60. this.view.shadowOffsetY = v;
  61. this.view.update()
  62. },
  63. // 修改颜色
  64. changeColor(v){
  65. this.view.shadowColor = new SColor(v);
  66. this.view.update()
  67. }
  68. }
  69. }
  70. </script>
  71. <style scoped>
  72. canvas{
  73. border: 1px solid #eeeeee;
  74. outline: none;
  75. }
  76. </style>