SGraphyLineItem.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. /**
  2. * 线条
  3. */
  4. import SGraphyItem from '../SGraphyItem'
  5. import SRect from '../types/SRect';
  6. export default class SGraphyLineItem extends SGraphyItem {
  7. /**
  8. * 构造函数
  9. *
  10. * @param startX 线的起始x坐标
  11. * @param startY 线的起始y坐标
  12. * @param endX 线的终止x坐标
  13. * @param endY 线的终止y坐标
  14. * @param width 线的宽度
  15. *
  16. * @param color 线的颜色
  17. * @param isVirtual 是否为虚线
  18. */
  19. constructor(startX, startY, endX, endY, color, width, isVirtual, parent = null) {
  20. super(parent)
  21. this.startX = startX
  22. this.startY = startY
  23. this.endX = endX
  24. this.endY = endY
  25. this.color = color
  26. this.width = width
  27. this.isVirtual = isVirtual
  28. this.minX = Math.min(this.startX, this.endX)
  29. this.minY = Math.min(this.startY, this.endY)
  30. this.maxX = Math.max(this.startX, this.endX)
  31. this.maxY = Math.max(this.startY, this.endY)
  32. this.name = null
  33. this.type = 2
  34. this.lineWidth = null
  35. }
  36. /**
  37. * Item对象边界区域
  38. *
  39. * @return SRect
  40. */
  41. boundingRect() {
  42. return new SRect(this.minX, this.minY, this.maxX - this.minX, this.maxY - this.minY)
  43. }
  44. /**
  45. * 绘制线条
  46. *
  47. * @param canvas 画布
  48. * @param rect 绘制区域
  49. */
  50. onDraw(canvas, rect) {
  51. canvas.lineWidth = this.lineWidth || this.width || 240
  52. canvas.strokeStyle = this.color || '#000'
  53. if (this.isVirtual) {
  54. canvas.setLineDash([100, 80])
  55. canvas.strokeStyle = 'green'
  56. }
  57. canvas.beginPath();
  58. canvas.moveTo(this.startX, this.startY)
  59. canvas.lineTo(this.endX, this.endY)
  60. canvas.stroke()
  61. }
  62. }