您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

circle.tsx 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import { v4 as uuid } from 'uuid'
  2. import * as vec from 'utils/vec'
  3. import { CircleShape, ColorStyle, DashStyle, ShapeType, SizeStyle } from 'types'
  4. import { registerShapeUtils } from './index'
  5. import { boundsContained } from 'utils/bounds'
  6. import { intersectCircleBounds } from 'utils/intersections'
  7. import { pointInCircle } from 'utils/hitTests'
  8. import { translateBounds } from 'utils/utils'
  9. import { defaultStyle, getShapeStyle } from 'lib/shape-styles'
  10. const circle = registerShapeUtils<CircleShape>({
  11. boundsCache: new WeakMap([]),
  12. create(props) {
  13. return {
  14. id: uuid(),
  15. type: ShapeType.Circle,
  16. isGenerated: false,
  17. name: 'Circle',
  18. parentId: 'page0',
  19. childIndex: 0,
  20. point: [0, 0],
  21. rotation: 0,
  22. radius: 1,
  23. isAspectRatioLocked: false,
  24. isLocked: false,
  25. isHidden: false,
  26. style: defaultStyle,
  27. ...props,
  28. }
  29. },
  30. render({ id, radius, style }) {
  31. const styles = getShapeStyle(style)
  32. return (
  33. <circle
  34. id={id}
  35. cx={radius}
  36. cy={radius}
  37. r={Math.max(0, radius - Number(styles.strokeWidth) / 2)}
  38. />
  39. )
  40. },
  41. getBounds(shape) {
  42. if (!this.boundsCache.has(shape)) {
  43. const { radius } = shape
  44. const bounds = {
  45. minX: 0,
  46. maxX: radius * 2,
  47. minY: 0,
  48. maxY: radius * 2,
  49. width: radius * 2,
  50. height: radius * 2,
  51. }
  52. this.boundsCache.set(shape, bounds)
  53. }
  54. return translateBounds(this.boundsCache.get(shape), shape.point)
  55. },
  56. getRotatedBounds(shape) {
  57. return this.getBounds(shape)
  58. },
  59. getCenter(shape) {
  60. return [shape.point[0] + shape.radius, shape.point[1] + shape.radius]
  61. },
  62. hitTest(shape, point) {
  63. return pointInCircle(
  64. point,
  65. vec.addScalar(shape.point, shape.radius),
  66. shape.radius
  67. )
  68. },
  69. hitTestBounds(shape, bounds) {
  70. const shapeBounds = this.getBounds(shape)
  71. return (
  72. boundsContained(shapeBounds, bounds) ||
  73. intersectCircleBounds(
  74. vec.addScalar(shape.point, shape.radius),
  75. shape.radius,
  76. bounds
  77. ).length > 0
  78. )
  79. },
  80. transform(shape, bounds, { initialShape, transformOrigin, scaleX, scaleY }) {
  81. shape.radius =
  82. initialShape.radius * Math.min(Math.abs(scaleX), Math.abs(scaleY))
  83. shape.point = [
  84. bounds.minX +
  85. (bounds.width - shape.radius * 2) *
  86. (scaleX < 0 ? 1 - transformOrigin[0] : transformOrigin[0]),
  87. bounds.minY +
  88. (bounds.height - shape.radius * 2) *
  89. (scaleY < 0 ? 1 - transformOrigin[1] : transformOrigin[1]),
  90. ]
  91. return this
  92. },
  93. transformSingle(shape, bounds, info) {
  94. shape.radius = Math.min(bounds.width, bounds.height) / 2
  95. shape.point = [bounds.minX, bounds.minY]
  96. return this
  97. },
  98. canChangeAspectRatio: false,
  99. })
  100. export default circle