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

rectangle.tsx 975B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. import { RectangleShape, ShapeProps } from "types"
  2. import { HoverIndicator, Indicator } from "./indicator"
  3. import ShapeGroup from "./shape-g"
  4. function BaseRectangle({
  5. size,
  6. fill = "#999",
  7. stroke = "none",
  8. strokeWidth = 0,
  9. }: ShapeProps<RectangleShape>) {
  10. return (
  11. <>
  12. <HoverIndicator
  13. as="rect"
  14. x={1}
  15. y={1}
  16. width={size[0] - 2}
  17. height={size[1] - 2}
  18. />
  19. <rect
  20. x={strokeWidth / 2}
  21. y={strokeWidth / 2}
  22. width={size[0] - strokeWidth}
  23. height={size[1] - strokeWidth}
  24. fill={fill}
  25. stroke={stroke}
  26. strokeWidth={strokeWidth}
  27. />
  28. <Indicator
  29. as="rect"
  30. x={1}
  31. y={1}
  32. width={size[0] - 2}
  33. height={size[1] - 2}
  34. />
  35. </>
  36. )
  37. }
  38. export default function Rectangle({ id, point, size }: RectangleShape) {
  39. return (
  40. <ShapeGroup id={id} point={point}>
  41. <BaseRectangle size={size} />
  42. </ShapeGroup>
  43. )
  44. }