GraphView.js 2.2 KB

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