GraphView.ts 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib"
  2. export class GraphView extends SCanvasView {
  3. // 0 :line 1:area 2:img
  4. _type: number = 0;
  5. get type(): number {
  6. return this._type
  7. }
  8. set type(v: number) {
  9. this._type = v;
  10. this.update()
  11. }
  12. // 线条颜色
  13. private _strokecolor: string = "";
  14. get strokecolor(): string {
  15. return this._strokecolor
  16. }
  17. set strokecolor(v: string) {
  18. this._strokecolor = v;
  19. this.update()
  20. }
  21. // 背景颜色
  22. private _bgcolor: string = "";
  23. get bgcolor(): string {
  24. return this._bgcolor
  25. }
  26. set bgcolor(v: string) {
  27. this._bgcolor = v;
  28. this.update()
  29. }
  30. //线条类型
  31. private _lineType: string = "";
  32. get lineType(): string {
  33. return this._lineType
  34. }
  35. set lineType(v: string) {
  36. this._lineType = v;
  37. this.update()
  38. }
  39. //线条粗细
  40. private _lineWidth: number = 1;
  41. get lineWidth(): number {
  42. return this._lineWidth
  43. }
  44. set lineWidth(v: number) {
  45. this._lineWidth = v;
  46. this.update()
  47. }
  48. /** 图片dom */
  49. img: CanvasImageSource | undefined;
  50. /** 图片地址 */
  51. private _url: string = "";
  52. get url(): string {
  53. return this._url;
  54. }
  55. set url(v: string) {
  56. this._url = v;
  57. this.img = new Image();
  58. this.img.src = v;
  59. this.img.onload = (): void => {
  60. this.update();
  61. };
  62. this.img.onerror = (e): void => {
  63. this.update();
  64. };
  65. }
  66. constructor(id: string) {
  67. super(id)
  68. }
  69. onDraw(canvas: SPainter): void {
  70. canvas.clearRect(0, 0, this.width, this.height)
  71. canvas.pen.lineWidth = this.lineWidth;
  72. if (this.lineType == 'dashed') {
  73. canvas.pen.lineDash = [10, 2]
  74. }
  75. if (this.lineType == 'dotted') {
  76. canvas.pen.lineDash = [this.lineWidth, this.lineWidth]
  77. }
  78. canvas.pen.color = new SColor(this.strokecolor);
  79. canvas.brush.color = new SColor(this.bgcolor);
  80. if (this.type == 0) {
  81. canvas.drawLine(0, 14, 28, 14);
  82. } else if (this.type == 1) {
  83. canvas.drawRect(0, 0, 28, 28);
  84. } else if (this.type == 2) {
  85. if (this.img) {
  86. console.log(this.img)
  87. canvas.drawImage(this.img, 0, 0, 28, 28)
  88. }
  89. }
  90. }
  91. }