/** * @import {Rect} from "./../geometries/rectangle.ts"; * @import {RoundRect} from "./../geometries/roundrect.ts"; * @import {Polygon} from "../geometries/polygon.ts"; * @import {Line} from "./../geometries/line.ts"; * @import {Ellipse} from "./../geometries/ellipse.ts"; * @import {Bounds} from "./../physics/bounds.ts"; */ /** * a base renderer object * @category Rendering */ export default class Renderer { /** * @param {ApplicationSettings} [options] - optional parameters for the renderer */ constructor(options?: ApplicationSettings); /** * The renderer renderTarget * @name renderTarget * @type {CanvasRenderTarget} */ renderTarget: CanvasRenderTarget; /** * The given constructor options * @public * @type {object} */ public settings: object; /** * the requested video size ratio * @public * @type {number} */ public designRatio: number; /** * the scaling ratio to be applied to the main canvas * @type {Vector2d} * @default <1,1> */ scaleRatio: Vector2d; /** * true if the current rendering context is valid * @default true * @type {boolean} */ isContextValid: boolean; /** * The GPU renderer string (WebGL only, undefined for Canvas) * @type {string|undefined} */ GPURenderer: string | undefined; /** * an optional custom shader to use instead of the default one. * Set by a renderable's preDraw when a shader is assigned. * (WebGL only, ignored by Canvas renderer) * @type {GLShader|ShaderEffect|undefined} */ customShader: GLShader | ShaderEffect | undefined; /** * The Path2D instance used by the renderer to draw primitives * @type {Path2D} */ path2D: Path2D; /** * The renderer type : Canvas, WebGL, etc... * (override this property with a specific value when implementing a custom renderer) * @type {string} */ type: string; /** * The background color used to clear the main framebuffer. * Note: alpha value will be set based on the transparent property of the renderer settings. * @default black * @type {Color} */ backgroundColor: Color; /** * The renderer state container (color, tint, transform, scissor, blend mode) * with a zero-allocation save/restore stack. * @type {RenderState} */ renderState: RenderState; currentColor: Color; currentTint: Color; currentScissor: Int32Array; /** * @ignore */ maskLevel: number; projectionMatrix: Matrix3d; uvOffset: number; set currentBlendMode(value: string); /** * @type {string} */ get currentBlendMode(): string; set height(value: number); /** * return the height of the canvas which this renderer draws to * @returns {number} height of the system Canvas */ get height(): number; set width(value: number); /** * return the width of the canvas which this renderer draws to * @returns {number} width of the system Canvas */ get width(): number; /** * prepare the framebuffer for drawing a new frame */ clear(): void; /** * render the main framebuffer on screen */ flush(): void; /** * Draw a textured triangle mesh. * The mesh object must provide: `vertices` (Float32Array, x/y/z triplets), * `uvs` (Float32Array, u/v pairs), `indices` (Uint16Array, triangle indices), * `texture` (TextureAtlas), `vertexCount` (number), and optionally * `cullBackFaces` (boolean, default true). * WebGL uses hardware depth testing; Canvas uses painter's algorithm (back-to-front sort). * @param {Mesh} mesh - a Mesh renderable or compatible object */ drawMesh(mesh: Mesh): void; /** * Reset context state */ reset(): void; /** * return a reference to the current render target corresponding canvas which this renderer draws to * @returns {HTMLCanvasElement} */ getCanvas(): HTMLCanvasElement; /** * return a reference to the current render target corresponding Context * @returns {CanvasRenderingContext2D|WebGLRenderingContext} */ getContext(): CanvasRenderingContext2D | WebGLRenderingContext; /** * return the list of supported compressed texture formats. * The base implementation returns null for all formats (no GPU compressed texture support). * The WebGL renderer overrides this with actual extension availability. * @returns {Object} an object with one key per extension family, each value is the WebGL extension object or null */ getSupportedCompressedTextureFormats(): Object; /** * return true if the given compressed texture format is supported * @param {number} format - a WebGL compressed texture format constant * @returns {boolean} */ hasSupportedCompressedFormats(format: number): boolean; /** * returns the current blend mode for this renderer * @returns {string} blend mode */ getBlendMode(): string; /** * set the current blend mode. * Subclasses (CanvasRenderer, WebGLRenderer) implement the actual GL/Canvas logic. * @param {string} [mode="normal"] - blend mode * @param {boolean} [premultipliedAlpha=true] - whether textures use premultiplied alpha (WebGL only) */ setBlendMode(mode?: string): void; /** * Set the current fill & stroke style color. * By default, or upon reset, the value is set to #000000. * @param {Color|string|Gradient} color - css color value or a Gradient object */ setColor(color: Color | string | Gradient): void; /** * get the current fill & stroke style color. * @returns {Color} current global color */ getColor(): Color; /** * Create a linear gradient that can be used with {@link Renderer#setColor}. * @param {number} x0 - x-axis coordinate of the start point * @param {number} y0 - y-axis coordinate of the start point * @param {number} x1 - x-axis coordinate of the end point * @param {number} y1 - y-axis coordinate of the end point * @returns {Gradient} a Gradient object */ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Gradient; /** * Create a radial gradient that can be used with {@link Renderer#setColor}. * @param {number} x0 - x-axis coordinate of the start circle * @param {number} y0 - y-axis coordinate of the start circle * @param {number} r0 - radius of the start circle * @param {number} x1 - x-axis coordinate of the end circle * @param {number} y1 - y-axis coordinate of the end circle * @param {number} r1 - radius of the end circle * @returns {Gradient} a Gradient object */ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): Gradient; /** * Set the line dash pattern for stroke operations. * @param {number[]} segments - an array of numbers specifying distances to alternately draw a line and a gap. An empty array clears the dash pattern (solid lines). * @example * // draw a dashed line * renderer.setLineDash([10, 5]); * renderer.strokeLine(0, 0, 100, 0); * // clear the dash pattern * renderer.setLineDash([]); */ setLineDash(segments: number[]): void; /** * Get the current line dash pattern. * @returns {number[]} the current dash pattern */ getLineDash(): number[]; /** * return the current global alpha * @returns {number} */ globalAlpha(): number; /** * check if the given rect or bounds overlaps with the renderer screen coordinates * @param {Rect|Bounds} bounds * @returns {boolean} true if overlaps */ overlaps(bounds: Rect | Bounds): boolean; /** * resizes the system canvas * @param {number} width - new width of the canvas * @param {number} height - new height of the canvas */ resize(width: number, height: number): void; /** * enable/disable image smoothing (scaling interpolation) for the current render target * @param {boolean} [enable=false] */ setAntiAlias(enable?: boolean): void; /** * set/change the current projection matrix (WebGL only) * @param {Matrix3d} matrix */ setProjection(matrix: Matrix3d): void; /** * stroke the given shape * @param {Rect|RoundRect|Polygon|Line|Ellipse|Bounds} shape - a shape object to stroke * @param {boolean} [fill=false] - fill the shape with the current color if true */ stroke(shape: Rect | RoundRect | Polygon | Line | Ellipse | Bounds, fill?: boolean): void; /** * fill the given shape * @param {Rect|RoundRect|Polygon|Line|Ellipse|Bounds} shape - a shape object to fill */ fill(shape: Rect | RoundRect | Polygon | Line | Ellipse | Bounds): void; /** * tint the given image or canvas using the given color * @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} src - the source image to be tinted * @param {Color|string} color - the color that will be used to tint the image * @param {string} [mode="multiply"] - the composition mode used to tint the image * @returns {HTMLCanvasElement|OffscreenCanvas} a new canvas or offscreencanvas (if supported) element representing the tinted image */ tint(src: HTMLImageElement | HTMLCanvasElement | OffscreenCanvas, color: Color | string, mode?: string): HTMLCanvasElement | OffscreenCanvas; /** * A mask limits rendering elements to the shape and position of the given mask object. * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible. * Mask are not preserved through renderer context save and restore. * @param {Rect|RoundRect|Polygon|Line|Ellipse} [mask] - the shape defining the mask to be applied * @param {boolean} [invert=false] - either the given shape should define what is visible (default) or the opposite */ setMask(): void; /** * disable (remove) the rendering mask set through setMask. * @see Renderer#setMask */ clearMask(): void; /** * set a coloring tint for sprite based renderables * @param {Color} tint - the tint color * @param {number} [alpha] - an alpha value to be applied to the tint */ setTint(tint: Color, alpha?: number): void; /** * clear the rendering tint set through setTint. * @see Renderer#setTint */ clearTint(): void; /** * creates a Blob object representing the last rendered frame * @param {string} [type="image/png"] - A string indicating the image format * @param {number} [quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range. * @returns {Promise} A Promise returning a Blob object representing the last rendered frame * @example * renderer.convertToBlob().then((blob) => console.log(blob)); */ toBlob(type?: string, quality?: number): Promise; /** * creates an ImageBitmap object of the last frame rendered * (not supported by standard Canvas) * @param {string} [type="image/png"] - A string indicating the image format * @param {number} [quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range. * @returns {Promise} A Promise returning an ImageBitmap. * @example * renderer.transferToImageBitmap().then((image) => console.log(image)); */ toImageBitmap(type?: string, quality?: number): Promise; /** * returns a data URL containing a representation of the last frame rendered * @param {string} [type="image/png"] - A string indicating the image format * @param {number} [quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range. * @returns {Promise} A Promise returning a string containing the requested data URL. * @example * renderer.toDataURL().then((dataURL) => console.log(dataURL)); */ toDataURL(type?: string, quality?: number): Promise; } import CanvasRenderTarget from "./rendertarget/canvasrendertarget.js"; import { Vector2d } from "../math/vector2d.ts"; import Path2D from "./../geometries/path2d.js"; import { Color } from "./../math/color.ts"; import RenderState from "./renderstate.js"; import { Matrix3d } from "../math/matrix3d.ts"; import { Gradient } from "./gradient.js"; import type { Rect } from "./../geometries/rectangle.ts"; import type { Bounds } from "./../physics/bounds.ts"; import type { RoundRect } from "./../geometries/roundrect.ts"; import type { Polygon } from "../geometries/polygon.ts"; import type { Line } from "./../geometries/line.ts"; import type { Ellipse } from "./../geometries/ellipse.ts"; //# sourceMappingURL=renderer.d.ts.map