bc3d23c2064ca7fb604e2e3c9283eca23db3ce392d496f892df4d7a27a88fae6231729d094477d97a5a17b54b61c1fb69d11fd10516694804ae53aa1a66e1c 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. /**
  2. * 水滴形状
  3. */
  4. import Path, { PathProps } from '../Path';
  5. export class DropletShape {
  6. cx = 0
  7. cy = 0
  8. width = 0
  9. height = 0
  10. }
  11. export interface DropletProps extends PathProps {
  12. shape?: Partial<DropletShape>
  13. }
  14. class Droplet extends Path<DropletProps> {
  15. shape: DropletShape
  16. constructor(opts?: DropletProps) {
  17. super(opts);
  18. }
  19. getDefaultShape() {
  20. return new DropletShape();
  21. }
  22. buildPath(ctx: CanvasRenderingContext2D, shape: DropletShape) {
  23. const x = shape.cx;
  24. const y = shape.cy;
  25. const a = shape.width;
  26. const b = shape.height;
  27. ctx.moveTo(x, y + a);
  28. ctx.bezierCurveTo(
  29. x + a,
  30. y + a,
  31. x + a * 3 / 2,
  32. y - a / 3,
  33. x,
  34. y - b
  35. );
  36. ctx.bezierCurveTo(
  37. x - a * 3 / 2,
  38. y - a / 3,
  39. x - a,
  40. y + a,
  41. x,
  42. y + a
  43. );
  44. ctx.closePath();
  45. }
  46. }
  47. Droplet.prototype.type = 'droplet';
  48. export default Droplet;