arc.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. /**
  2. * 绘制圆形
  3. */
  4. export default class DrawArc {
  5. constructor(params) {
  6. const { Context, commonUtilMethods, commonDrawMethods } = params
  7. this.Context = Context
  8. this.commonUtilMethods = commonUtilMethods
  9. this.commonDrawMethods = commonDrawMethods
  10. }
  11. /**
  12. * 获取绘制参数
  13. * @param { Object } params 参数
  14. * @param { Boolean } conversion 是否需要转换单位
  15. */
  16. getDrawParams(params = {}, conversion = true) {
  17. const globalDataParams = this.commonUtilMethods.getGlobalDataDrawParams(params)
  18. // 绘制圆的参数
  19. const { s = 0, e = Math.PI * 2, d = false } = params
  20. const arcParams = {
  21. ...globalDataParams,
  22. s,
  23. e,
  24. d,
  25. }
  26. return conversion ? this.commonUtilMethods.conversionUnit(arcParams) : arcParams
  27. }
  28. /**
  29. * 绘制矩形
  30. * @param { Object } params 矩形参数
  31. * @param { Boolean } conversion 是否需要转换单位
  32. */
  33. draw(params = {}, conversion = true) {
  34. const { Context, commonUtilMethods, commonDrawMethods } = this
  35. const { canvasWidth, is2d } = commonUtilMethods
  36. let {
  37. x, y, r, s, e, d, alpha, isFill, lineWidth, color, rotate,
  38. windowAlign, borderColor, borderWidth, offsetRight,
  39. drawImage, shadow, gradient
  40. } = this.getDrawParams(params, conversion)
  41. if (color === 'black' && drawImage) {
  42. color = 'none'
  43. } else if(color === 'black') {
  44. color = '#ffffff'
  45. }
  46. if (shadow.show) {
  47. // Context.save()
  48. commonDrawMethods.setShadow(shadow.x, shadow.y, shadow.blur, shadow.color)
  49. }
  50. x = x + r
  51. y = y + r
  52. if (windowAlign !== 'none') {
  53. x = commonDrawMethods.computedCenterX(canvasWidth, r * 2, windowAlign, offsetRight)
  54. x += r
  55. }
  56. if (!drawImage && rotate.deg) {
  57. Context.save()
  58. commonDrawMethods.setRotate(x - r, y - r, r * 2, r * 2, rotate)
  59. }
  60. Context.beginPath()
  61. commonDrawMethods.setAlpha(alpha)
  62. Context.arc(x, y, r, s, e, d)
  63. if (isFill) {
  64. if (borderWidth != 0) {
  65. commonDrawMethods.setLineWidth(borderWidth)
  66. commonDrawMethods.setStrokeStyle(borderColor)
  67. Context.stroke()
  68. }
  69. if (gradient.show) {
  70. const { type, relative, position, colors } = gradient
  71. color = commonUtilMethods.getGradient(type || 'linear', relative, commonUtilMethods.conversionUnit(position), colors, { x, y })
  72. }
  73. if (!drawImage || (drawImage && color !== 'none')) {
  74. commonDrawMethods.setFillStyle(color)
  75. Context.fill()
  76. }
  77. } else {
  78. commonDrawMethods.setLineWidth(lineWidth)
  79. commonDrawMethods.setStrokeStyle(color)
  80. Context.stroke()
  81. }
  82. commonDrawMethods.setAlpha(1)
  83. if (!drawImage && rotate.deg) {
  84. Context.restore()
  85. }
  86. if (shadow.show) {
  87. commonDrawMethods.setShadow(0, 0, 0, 'black')
  88. }
  89. }
  90. }