| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- import { fabric } from 'fabric';
- import cameraActiveImg from '@/assets/camera/camera-active.png';
- import cameraImg from '@/assets/camera/camera.png';
- import favoritesImg from '@/assets/camera/favorites.png';
- import { getRandomPosition } from './utils';
- import { CameraImage } from './types';
- class CameraGroup extends fabric.Group {
- g: fabric.Group | null = null;
- cameraImg: CameraImage | null = null;
- favImg: CameraImage | null = null;
- cameraId = '';
- constructor() {
- super();
- fabric.Image.fromURL(cameraActiveImg, (cImg) => {
- cImg.set({
- left: 0,
- top: 0,
- });
- this.cameraImg = cImg;
- fabric.Image.fromURL(favoritesImg, (favImg) => {
- favImg.set({
- left: 50,
- top: 0,
- });
- this.favImg = favImg as CameraImage;
- this.g = new fabric.Group([cImg, favImg]);
- });
- });
- }
- init() {}
- /** 提供copy功能,每次新建的时候执行copy就行了 */
- clone(): Promise<CameraGroup> {
- console.log('clone');
- return new Promise((resolve) => {
- this.g?.clone((e) => {
- console.log('clone', e);
- resolve(e as CameraGroup);
- });
- });
- }
- setSelected() {
- this.cameraImg?.setSrc(cameraActiveImg);
- }
- setUnSelected() {
- this.cameraImg?.setSrc(cameraImg);
- }
- /** 设为默认摄像头 */
- setDefault() {
- this.favImg?.set('visible', true);
- }
- /** 取消默认摄像头 */
- cancelDefault() {
- this.favImg?.set('visible', false);
- }
- setAttr(attr: { cameraId: string; left: number; top: number }) {
- if (attr.cameraId) {
- this.cameraId = attr.cameraId;
- }
- this.g?.set(attr);
- return this.g;
- }
- }
- export default CameraGroup;
|