Source: packages/graphics-extras/src/drawChamferRect.ts

  1. import type { Graphics } from '@pixi/graphics';
  2. /**
  3. * Draw Rectangle with chamfer corners. These are angled corners.
  4. *
  5. * _Note: Only available with **@pixi/graphics-extras**._
  6. * @method PIXI.Graphics#drawChamferRect
  7. * @param this
  8. * @param {number} x - Upper left corner of rect
  9. * @param {number} y - Upper right corner of rect
  10. * @param {number} width - Width of rect
  11. * @param {number} height - Height of rect
  12. * @param {number} chamfer - non-zero real number, size of corner cutout
  13. * @returns {PIXI.Graphics} Returns self.
  14. */
  15. export function drawChamferRect(this: Graphics,
  16. x: number,
  17. y: number,
  18. width: number,
  19. height: number,
  20. chamfer: number): Graphics
  21. {
  22. if (chamfer <= 0)
  23. {
  24. return this.drawRect(x, y, width, height);
  25. }
  26. const inset = Math.min(chamfer, Math.min(width, height) / 2);
  27. const right = x + width;
  28. const bottom = y + height;
  29. const points = [
  30. x + inset, y,
  31. right - inset, y,
  32. right, y + inset,
  33. right, bottom - inset,
  34. right - inset, bottom,
  35. x + inset, bottom,
  36. x, bottom - inset,
  37. x, y + inset,
  38. ];
  39. // Remove overlapping points
  40. for (let i = points.length - 1; i >= 2; i -= 2)
  41. {
  42. if (points[i] === points[i - 2] && points[i - 1] === points[i - 3])
  43. {
  44. points.splice(i - 1, 2);
  45. }
  46. }
  47. return this.drawPolygon(points);
  48. }