import { CssRenderer } from "./CssRenderer"; import type { ICssImageRenderOption } from "./CssSpriteRenderer"; import { ImageRenderingMode } from "./CssSpriteRenderer"; /** * css sprite atlas render mode */ export declare enum CssSpriteAtlasRenderMode { /** * This option clips images using object-fit css property. * * The object-fit uses less resources than the clip-path. * However, in object-fit mode, the viewScale value must be fixed to 1. * * If you don't have any problems, you'd better use this method */ ObjectFit = 0, /** * This option clips images using clip-path css property. * * The object-fit uses less resources than the clip-path. * However, in object-fit mode, the viewScale value must be fixed to 1. */ ClipPath = 1 } /** * css sprite atlas renderer * * this compoenent slices the image into column and rows, it's memory efficient and fast to animate. */ export declare class CssSpriteAtlasRenderer extends CssRenderer implements ICssImageRenderOption { private _renderMode; private _imageWidth; private _imageHeight; private _imageFlipX; private _imageFlipY; private _opacity; private _imageRenderingMode; private _columnCount; private _rowCount; private _currentImageIndex; private _croppedImageWidth; private _croppedImageHeight; private _initializeFunction; protected renderInitialize(): void; protected updateCenterOffset(updateTransform: boolean): void; protected updateViewScale(updateTransform: boolean): void; private updateImageIndex; /** * image (default: null) */ get image(): HTMLImageElement | null; /** * set image from path asynchronously * @param path image path * @param columnCount sprite atlas column count * @param rowCount sprite atlas row count * @param onComplete on complete callback * @returns */ asyncSetImageFromPath(path: string, columnCount: number, rowCount: number, onComplete?: () => void): void; /** * set image from `HTMLImageElement` * @param image image must be loaded * @param columnCount sprite atlas column count * @param rowCount sprite atlas row count */ setImage(image: HTMLImageElement, columnCount: number, rowCount: number): void; /** * render mode (default: CssSpriteAtlasRenderMode.ObjectFit) * * Decide which css method to clip the image * * Change this option if you have a render problem. */ get renderMode(): CssSpriteAtlasRenderMode; /** * render mode (default: CssSpriteAtlasRenderMode.ObjectFit) * * Decide which css method to clip the image * * Change this option if you have a render problem. */ set renderMode(value: CssSpriteAtlasRenderMode); /** * image index (default: 0) * * Decide which image to display * * Index increases from left to right from top to bottom */ get imageIndex(): number; /** * image index (default: 0) * * Decide which image to display * * Index increases from left to right from top to bottom */ set imageIndex(value: number); /** * sprite atlas column count (default: 1) */ get columnCount(): number; /** * sprite atlas row count (default: 1) */ get rowCount(): number; /** * image width (default: 0) * * if this value is 0, it will automatically update when image is set */ get imageWidth(): number; /** * image width (default: 0) * * if this value is 0, it will automatically update when image is set */ set imageWidth(value: number); /** * image height (default: 0) * * if this value is 0, it will automatically update when image is set */ get imageHeight(): number; /** * image height (default: 0) * * if this value is 0, it will automatically update when image is set */ set imageHeight(value: number); /** * image flip x (default: false) */ get imageFlipX(): boolean; /** * image flip x (default: false) */ set imageFlipX(value: boolean); /** * image flip y (default: false) */ get imageFlipY(): boolean; /** * image flip y (default: false) */ set imageFlipY(value: boolean); /** * image opacity (default: 1) */ get opacity(): number; /** * image opacity (default: 1) */ set opacity(value: number); /** * image rendering mode (default: ImageRenderingMode.Pixelated) * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering */ get imageRenderingMode(): ImageRenderingMode; /** * image rendering mode (default: ImageRenderingMode.Pixelated) * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering */ set imageRenderingMode(value: ImageRenderingMode); }