extra.es.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. var __pow = Math.pow;
  2. import { Graphics } from "@pixi/graphics";
  3. import { TextStyle, Text } from "@pixi/text";
  4. import { Rectangle } from "@pixi/math";
  5. const tempBounds = new Rectangle();
  6. class HitAreaFrames extends Graphics {
  7. constructor() {
  8. super();
  9. this.initialized = false;
  10. this.texts = [];
  11. this.strokeWidth = 4;
  12. this.normalColor = 14883354;
  13. this.activeColor = 2017330;
  14. this.interactive = true;
  15. this.on("added", this.init).on("pointermove", this.onPointerMove);
  16. }
  17. init() {
  18. const internalModel = this.parent.internalModel;
  19. const textStyle = new TextStyle({
  20. fontSize: 24,
  21. fill: "#ffffff",
  22. stroke: "#000000",
  23. strokeThickness: 4
  24. });
  25. this.texts = Object.keys(internalModel.hitAreas).map((hitAreaName) => {
  26. const text = new Text(hitAreaName, textStyle);
  27. text.visible = false;
  28. this.addChild(text);
  29. return text;
  30. });
  31. }
  32. onPointerMove(e) {
  33. const hitAreaNames = this.parent.hitTest(e.data.global.x, e.data.global.y);
  34. this.texts.forEach((text) => {
  35. text.visible = hitAreaNames.includes(text.text);
  36. });
  37. }
  38. _render(renderer) {
  39. const internalModel = this.parent.internalModel;
  40. const scale = 1 / Math.sqrt(__pow(this.transform.worldTransform.a, 2) + __pow(this.transform.worldTransform.b, 2));
  41. this.texts.forEach((text) => {
  42. this.lineStyle({
  43. width: this.strokeWidth * scale,
  44. color: text.visible ? this.activeColor : this.normalColor
  45. });
  46. const bounds = internalModel.getDrawableBounds(internalModel.hitAreas[text.text].index, tempBounds);
  47. const transform = internalModel.localTransform;
  48. bounds.x = bounds.x * transform.a + transform.tx;
  49. bounds.y = bounds.y * transform.d + transform.ty;
  50. bounds.width = bounds.width * transform.a;
  51. bounds.height = bounds.height * transform.d;
  52. this.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
  53. text.x = bounds.x + this.strokeWidth * scale;
  54. text.y = bounds.y + this.strokeWidth * scale;
  55. text.scale.set(scale);
  56. });
  57. super._render(renderer);
  58. this.clear();
  59. }
  60. }
  61. export { HitAreaFrames };