CameraGroup-bak.ts 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import { fabric } from 'fabric';
  2. import cameraActiveImg from '@/assets/camera/camera-active.png';
  3. import cameraImg from '@/assets/camera/camera.png';
  4. import favoritesImg from '@/assets/camera/favorites.png';
  5. import { getRandomPosition } from './utils';
  6. import { CameraImage } from './types';
  7. class CameraGroup extends fabric.Group {
  8. g: fabric.Group | null = null;
  9. cameraImg: CameraImage | null = null;
  10. favImg: CameraImage | null = null;
  11. cameraId = '';
  12. constructor() {
  13. super();
  14. fabric.Image.fromURL(cameraActiveImg, (cImg) => {
  15. cImg.set({
  16. left: 0,
  17. top: 0,
  18. });
  19. this.cameraImg = cImg;
  20. fabric.Image.fromURL(favoritesImg, (favImg) => {
  21. favImg.set({
  22. left: 50,
  23. top: 0,
  24. });
  25. this.favImg = favImg as CameraImage;
  26. this.g = new fabric.Group([cImg, favImg]);
  27. });
  28. });
  29. }
  30. init() {}
  31. /** 提供copy功能,每次新建的时候执行copy就行了 */
  32. clone(): Promise<CameraGroup> {
  33. console.log('clone');
  34. return new Promise((resolve) => {
  35. this.g?.clone((e) => {
  36. console.log('clone', e);
  37. resolve(e as CameraGroup);
  38. });
  39. });
  40. }
  41. setSelected() {
  42. this.cameraImg?.setSrc(cameraActiveImg);
  43. }
  44. setUnSelected() {
  45. this.cameraImg?.setSrc(cameraImg);
  46. }
  47. /** 设为默认摄像头 */
  48. setDefault() {
  49. this.favImg?.set('visible', true);
  50. }
  51. /** 取消默认摄像头 */
  52. cancelDefault() {
  53. this.favImg?.set('visible', false);
  54. }
  55. setAttr(attr: { cameraId: string; left: number; top: number }) {
  56. if (attr.cameraId) {
  57. this.cameraId = attr.cameraId;
  58. }
  59. this.g?.set(attr);
  60. return this.g;
  61. }
  62. }
  63. export default CameraGroup;