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

ellipse.tsx 2.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. import { v4 as uuid } from "uuid"
  2. import * as vec from "utils/vec"
  3. import { EllipseShape, ShapeType } from "types"
  4. import { createShape } from "./index"
  5. import { boundsContained } from "utils/bounds"
  6. import { intersectEllipseBounds } from "utils/intersections"
  7. import { pointInEllipse } from "utils/hitTests"
  8. const ellipse = createShape<EllipseShape>({
  9. boundsCache: new WeakMap([]),
  10. create(props) {
  11. return {
  12. id: uuid(),
  13. type: ShapeType.Ellipse,
  14. isGenerated: false,
  15. name: "Ellipse",
  16. parentId: "page0",
  17. childIndex: 0,
  18. point: [0, 0],
  19. radiusX: 20,
  20. radiusY: 20,
  21. rotation: 0,
  22. style: {},
  23. ...props,
  24. }
  25. },
  26. render({ id, radiusX, radiusY }) {
  27. return (
  28. <ellipse id={id} cx={radiusX} cy={radiusY} rx={radiusX} ry={radiusY} />
  29. )
  30. },
  31. getBounds(shape) {
  32. if (this.boundsCache.has(shape)) {
  33. return this.boundsCache.get(shape)
  34. }
  35. const {
  36. point: [x, y],
  37. radiusX,
  38. radiusY,
  39. } = shape
  40. const bounds = {
  41. minX: x,
  42. maxX: x + radiusX * 2,
  43. minY: y,
  44. maxY: y + radiusY * 2,
  45. width: radiusX * 2,
  46. height: radiusY * 2,
  47. }
  48. this.boundsCache.set(shape, bounds)
  49. return bounds
  50. },
  51. hitTest(shape, point) {
  52. return pointInEllipse(
  53. point,
  54. vec.add(shape.point, [shape.radiusX, shape.radiusY]),
  55. shape.radiusX,
  56. shape.radiusY
  57. )
  58. },
  59. hitTestBounds(this, shape, brushBounds) {
  60. const shapeBounds = this.getBounds(shape)
  61. return (
  62. boundsContained(shapeBounds, brushBounds) ||
  63. intersectEllipseBounds(
  64. vec.add(shape.point, [shape.radiusX, shape.radiusY]),
  65. shape.radiusX,
  66. shape.radiusY,
  67. brushBounds
  68. ).length > 0
  69. )
  70. },
  71. rotate(shape) {
  72. return shape
  73. },
  74. translate(shape, delta) {
  75. shape.point = vec.add(shape.point, delta)
  76. return shape
  77. },
  78. scale(shape, scale: number) {
  79. return shape
  80. },
  81. stretch(shape, scaleX: number, scaleY: number) {
  82. return shape
  83. },
  84. transform(shape, bounds) {
  85. shape.point = [bounds.minX, bounds.minY]
  86. shape.radiusX = bounds.width / 2
  87. shape.radiusY = bounds.height / 2
  88. return shape
  89. },
  90. canTransform: true,
  91. })
  92. export default ellipse