SGraphyRectItem.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /**
  2. * 线条
  3. */
  4. import SGraphyItem from '../SGraphyItem'
  5. import SRect from '../types/SRect';
  6. export default class SGraphyRectItem extends SGraphyItem {
  7. /**
  8. * 构造函数
  9. *
  10. * @param X 矩形的开始点X
  11. * @param Y 矩形的开始点Y
  12. * @param width 矩形的宽度
  13. * @param height 矩形的高度
  14. *
  15. * @param isFill 矩形的是否填充
  16. * @param fillColor 矩形的填充色彩
  17. * @param text 矩形的文字
  18. * @param textSize 矩形的文字大小
  19. * @param color 矩形的颜色
  20. * @param Tip 提示
  21. */
  22. constructor(X, Y, width, height, isFill, fillColor, text, textSize, color, Tip, parent = null) {
  23. super(parent)
  24. this.X = X
  25. this.Y = Y
  26. this.width = width
  27. this.height = height
  28. this.isFill = isFill
  29. this.fillColor = fillColor
  30. this.color = color
  31. this.textSize = textSize || 6
  32. this.type = 10
  33. this.hoverColor = null
  34. this.text = text.split(",")
  35. this.fontStart = this.X
  36. this.Tip = Tip
  37. }
  38. /**
  39. * Item对象边界区域
  40. *
  41. * @return SRect
  42. */
  43. boundingRect() {
  44. return new SRect(this.X, this.Y, this.width, this.height)
  45. }
  46. /**
  47. * 判断item是否包含点x,y
  48. *
  49. * @param x 横坐标(当前item)
  50. * @param y 纵坐标(当前item)
  51. *
  52. * @return boolean
  53. */
  54. contains(x) {
  55. if (this.X + this.width > x.x && x.x > this.X && this.Y + this.height > x.y && x.y > this.Y) {
  56. return true
  57. } else {
  58. return false
  59. }
  60. }
  61. /**
  62. * 绘制线条
  63. *
  64. * @param canvas 画布
  65. * @param rect 绘制区域
  66. */
  67. onDraw(canvas, rect) {
  68. canvas.beginPath();
  69. canvas.lineWidth = "1";
  70. if (this.isFill) {
  71. if (!!this.hoverColor) {
  72. canvas.fillStyle = this.hoverColor
  73. } else {
  74. canvas.fillStyle = this.fillColor
  75. }
  76. canvas.fillRect(this.X, this.Y, this.width, this.height);
  77. } else {
  78. canvas.rect(this.X, this.Y, this.width, this.height);
  79. }
  80. canvas.stroke();
  81. if (!!this.text && this.text.length <= 1) {
  82. canvas.font = this.textSize + "px 宋体";
  83. canvas.fillStyle = this.color
  84. canvas.fillText(this.text[0], this.fontStart, this.Y + this.height / 2);
  85. } else if (!!this.text && this.text.length > 1) {
  86. canvas.font = this.textSize + "px 宋体";
  87. canvas.fillStyle = this.color
  88. for (let i = 0; i < this.text.length; i++) {
  89. canvas.fillText(this.text[i], this.fontStart, this.Y + this.height / 2 - this.textSize * i);
  90. }
  91. } else {
  92. return
  93. }
  94. }
  95. }