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

ellipse.tsx 2.4KB

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