import * as em from "./Enums"; import * as ds from "./Types"; import { ObjectBase } from "./ObjectBase"; import { type SvgDocument } from "./SvgDocument"; import { GraphicsPath } from "./GraphicsPath"; import { type FontCollection } from "./FontCollection"; import { type Transform } from "./Transform"; import { Layout } from "./Layout"; import { Font } from "./Font"; import { Format } from "./Format"; import { Pen } from "./Pen"; /** * Represents an abstract drawing surface. **/ export declare abstract class DrawingContext extends ObjectBase { /** * Gets the type of {@link DrawingContext}. **/ abstract get type(): em.ContextType; /** * Gets the resolution of the {@link DrawingContext}, in dots per Inch. **/ abstract get resolution(): number; /** * Gets the width of the {@link DrawingContext}, in context graphic units. **/ abstract get width(): number; /** * Gets the height of the {@link DrawingContext}, in context graphic units. **/ abstract get height(): number; /** * Creates a new {@link GraphicsPath}. * @returns A new instance of the {@link GraphicsPath}. **/ createPath(): GraphicsPath; /** * Draws and fills a graphics path. * @param path The {@link GraphicsPath} object to draw. * @param drawPathOptions The options for drawing and filling the {@link GraphicsPath}. * * @example * const ctx = new BmpContext(800, 600, 0.5, "Honeydew"); * * const path = ctx.createPath(); * * path.beginFigure(100, 350); * path.addLine(210, 310); * path.addArc({ * size: { width: 183, height: 173 }, * sweepDirection: SweepDirection.Clockwise, * point: { x: 550, y: 205 } * }); * path.addLine(650, 170); * path.addLine(680, 250); * path.addLine(575, 285); * path.addArc({ * size: { width: 183, height: 173 }, * sweepDirection: SweepDirection.Clockwise, * point: { x: 240, y: 390 } * }); * path.addLine(130, 430); * path.endFigure(true); * path.addEllipse({ x: 295, y: 197, width: 200, height: 190 }); * * ctx.drawPath(path, { * fillColor: "MediumAquamarine", * lineColor: "Green", * lineWidth: 20 * }); * * const res: Uint8Array = ctx.bitmap.saveAsPng(); **/ drawPath(path: GraphicsPath, drawPathOptions: ds.DrawPathOptions): void; /** * Draws a line between two points, using the specified pen. * @param x1 The X coordinate of the first point. * @param y1 The Y coordinate of the first point. * @param x2 The X coordinate of the second point. * @param y2 The Y coordinate of the second point. * @param pen The {@link Pen} object or settings for creating a pen. **/ drawLine(x1: number, y1: number, x2: number, y2: number, pen: Pen | ds.PenProperties): void; /** * Draws a series of connected lines, using a specified pen. * @param points The array of points to connect. * @param pen The {@link Pen} object or settings for creating a pen. **/ drawLines(points: ds.Point[], pen: Pen | ds.PenProperties): void; /** * Draws and fills a polygon. * @param points The array of points or a quadrilateral specifying the polygon. * @param drawPolygonOptions The options for drawing and filling a polygon. **/ drawPolygon(points: ds.Point[] | ds.Quadrilateral, drawPolygonOptions: ds.DrawPolygonOptions): void; /** * Draws and fills a rectangle or rounded rectangle. * @param x The X coordinate of the rectangle. * @param y The Y coordinate of the rectangle. * @param width The width of the rectangle. * @param height The height of the rectangle. * @param drawRectangleOptions The options for drawing and filling a rectangle. **/ drawRect(x: number, y: number, width: number, height: number, drawRectangleOptions: ds.DrawRectangleOptions): void; /** * Draws and fills a rectangle or rounded rectangle. * @param bounds The rectangle bounds. * @param drawRectangleOptions The options for drawing and filling a rectangle. **/ drawRect(bounds: ds.Bounds, drawRectangleOptions: ds.DrawRectangleOptions): void; /** * Draws and fills an ellipse. * @param x The X coordinate of the rectangle enclosing an ellipse. * @param y The Y coordinate of the rectangle enclosing an ellipse. * @param width The width of the rectangle enclosing an ellipse. * @param height The height of the rectangle enclosing an ellipse. * @param drawEllipseOptions The options for drawing and filling an ellipse. **/ drawEllipse(x: number, y: number, width: number, height: number, drawEllipseOptions: ds.DrawEllipseOptions): void; /** * Draws and fills an ellipse. * @param bounds The rectangle enclosing an ellipse. * @param drawEllipseOptions The options for drawing and filling an ellipse. **/ drawEllipse(bounds: ds.Bounds, drawEllipseOptions: ds.DrawEllipseOptions): void; /** * Draws an image or bitmap with specified size, location, and opacity. * @param image The image object to draw. * @param x The X coordinate of the destination rectangle. * @param y The Y coordinate of the destination rectangle. * @param width The width of the destination rectangle. * @param height The height of the destination rectangle. * @param drawImageOptions The options for drawing an image. **/ drawImage(image: ds.ImageOrBitmap, x: number, y: number, width: number, height: number, drawImageOptions?: ds.DrawImageOptions): void; /** * Draws an image or bitmap with specified size, location, and opacity. * @param image The image object to draw. * @param bounds The destination rectangle. * @param drawImageOptions The options for drawing an image. **/ drawImage(image: ds.ImageOrBitmap, bounds: ds.Bounds, drawImageOptions?: ds.DrawImageOptions): void; /** * Draws a {@link SvgDocument} at a point specifying the position of SVG viewport. * To specify the position of SVG content rather than viewport, see the drawSvgContent method. * @param svgDocument The {@link SvgDocument} to draw. * @param x The X coordinate of SVG viewport. * @param y The Y coordinate of SVG viewport. * @param opacity The opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). * The default is 1.0. * * @example * const svgDoc = SvgDocument.load(svgData); * const margin = 50; * * const rect = svgDoc.measure(0, 0); * const ctx = new BmpContext( * rect.width + margin * 2, * rect.height + margin * 2, * 0.7, * "Linen" * }); * ctx.slowAntialiasing = true; * ctx.drawSvg(svgDoc, -rect.x + margin, -rect.y + margin); * * const res: Uint8Array = ctx.bitmap.saveAsPng(); **/ drawSvg(svgDocument: SvgDocument, x: number, y: number, opacity?: number): void; /** * Draws a {@link SvgDocument}, resizing its viewport to fit into the specified rectangle. * To draw just the content of the SVG ignoring viewport position, see the drawSvgToContentRect method. * @param svgDocument The {@link SvgDocument} to draw. * @param x The X coordinate of the target rectangle for SVG viewport. * @param y The Y coordinate of the target rectangle for SVG viewport. * @param width The width of the target rectangle for SVG viewport. * @param height The height of the target rectangle for SVG viewport. * @param opacity The opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). * The default is 1.0. **/ drawSvgToRect(svgDocument: SvgDocument, x: number, y: number, width: number, height: number, opacity?: number): void; /** * Draws a {@link SvgDocument}, resizing its viewport to fit into the specified rectangle. * To draw just the content of the SVG ignoring viewport position, see the drawSvgToContentRect method. * @param svgDocument The {@link SvgDocument} to draw. * @param bounds The target rectangle for SVG viewport. * @param opacity The opacity factor to be applied to the SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). * The default is 1.0. **/ drawSvgToRect(svgDocument: SvgDocument, bounds: ds.Bounds, opacity?: number): void; /** * Draws the content of a specified {@link SvgDocument} at a point specifying the top-left corner of SVG content. * To specify the position of SVG viewport rather than content, see the drawSvg method. * @param svgDocument The {@link SvgDocument} to draw. * @param x The X coordinate of SVG content. * @param y The Y coordinate of SVG content. * @param opacity The opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). * The default is 1.0. **/ drawSvgContent(svgDocument: SvgDocument, x: number, y: number, opacity?: number): void; /** * Draws the content of a specified {@link SvgDocument}, resizing the content to fit into a specified rectangle. * To draw the SVG resizing its viewport rather than just the content, see the drawSvgToRect method. * @param svgDocument The {@link SvgDocument} to draw. * @param contentX The X coordinate of the target rectangle for SVG content. * @param contentY The Y coordinate of the target rectangle for SVG content. * @param contentWidth The width of the target rectangle for SVG content. * @param contentHeight The height of the target rectangle for SVG content. * @param opacity The opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). * The default is 1.0. **/ drawSvgToContentRect(svgDocument: SvgDocument, contentX: number, contentY: number, contentWidth: number, contentHeight: number, opacity?: number): void; /** * Draws the content of a specified {@link SvgDocument}, resizing the content to fit into a specified rectangle. * To draw the SVG resizing its viewport rather than just the content, see the drawSvgToRect method. * @param svgDocument The {@link SvgDocument} to draw. * @param contentBounds The target rectangle for SVG content. * @param opacity The opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). * The default is 1.0. **/ drawSvgToContentRect(svgDocument: SvgDocument, contentBounds: ds.Bounds, opacity?: number): void; /** * Gets or sets a value indicating if text is rendered using the graphic paths instead of the specialized text drawing services. * Assigning a null value resets the property to a default value that depends on context type. * This property does not affect drawing to {@link BmpContext}. **/ get drawTextAsPath(): boolean; /** * Gets or sets a value indicating if text is rendered using the graphic paths instead of the specialized text drawing services. * Assigning a null value resets the property to a default value that depends on context type. * This property does not affect drawing to {@link BmpContext}. **/ set drawTextAsPath(value: boolean | null); /** * Gets or sets the {@link FontCollection} used by measureText and {@link DrawingContext#drawText}/{@link DrawingContext#drawLayout} methods. **/ get fontCollection(): FontCollection | null; /** * Gets or sets the {@link FontCollection} used by measureText and {@link DrawingContext#drawText}/{@link DrawingContext#drawLayout} methods. **/ set fontCollection(coll: FontCollection | null); /** * Draws text using a specified format at the specified position. * @param text The text to draw. * @param format The text format to use. * @param x The X coordinate at which to draw the text. * @param y The Y coordinate at which to draw the text. * @param maxWidth If provided, specifies the maximum width of text. **/ drawText(text: string, format: Format, x: number, y: number, maxWidth?: number | null): void; /** * Draws text using specified format attributes at a specified location. * @param text The text to draw. * @param font The font to use. * @param fontSize The font size. * @param foreColor The text color. * @param x The X coordinate at which to draw the text. * @param y The Y coordinate at which to draw the text. * @param maxWidth If provided, specifies the maximum width of text. **/ drawText(text: string, font: Font, fontSize: number, foreColor: ds.Color, x: number, y: number, maxWidth?: number | null): void; /** * Draws a text run at the specified position. * @param textRun The formatted text section to draw. * @param x The X coordinate at which to draw the text. * @param y The Y coordinate at which to draw the text. * @param maxWidth If provided, specifies the maximum width of text. * * @example * const pericFont = Font.load(await Util.loadFontAsArray("peric.ttf")); * const emojiFont = Font.load(await Util.loadFontAsArray("seguiemj.ttf")); * * const fontColl = new FontCollection(); * fontColl.loadFont(await Util.loadFontAsArray("arial.ttf")); * * const g = new BmpContext(540, 320, 2, "FloralWhite"); * g.fontCollection = fontColl; * * g.drawText("Peric Font", pericFont, 40, "Black", 4, 90); * g.drawText({ text: "Arial Font", fontFamily: "Arial", fontSize: 20 }, 300, 110); * g.drawText({ * text: "Emoji: " + String.fromCodePoint(0x1F433, 0x1F349, 0x1F367), * font: emojiFont, * fontSize: 40, * paletteIndex: 0 * }, 4, 140); * * const res: Uint8Array = g.bitmap.saveAsPng(); **/ drawText(textRun: ds.RunProperties, x: number, y: number, maxWidth?: number | null): void; /** * Measures text using a specified {@link Format}. * @param text The string to measure. * @param format The text format to use. * @param maxWidth If provided, specifies the maximum width of text. * @returns The actual size needed to draw the text. **/ measureText(text: string, format: Format, maxWidth?: number | null): ds.Size; /** * Measures text using a specified font, font size and layout width. * @param text The string to measure. * @param font The font to use. * @param fontSize The font size to use. * @param maxWidth If provided, specifies the maximum width of text. * @returns The actual size needed to draw the text. **/ measureText(text: string, font: Font, fontSize: number, maxWidth?: number | null): ds.Size; /** * Measures the size of the given text run. * @param textRun The formatted text section to measure. * @param maxWidth If provided, specifies the maximum width of text. * @returns The actual size needed to draw the text. **/ measureText(textRun: ds.RunProperties, maxWidth?: number | null): ds.Size; /** * Draws a {@link Layout} at the specified position. * @param layout An existing Layout object or the properties describing a new Layout settings. * @param x The X coordinate at which to draw the Layout. * @param y The Y coordinate at which to draw the Layout. * * @example * const font = Font.getPdfFont(StandardPdfFont.CourierBold); * const sb = new SolidBrush("CadetBlue"); * const lgb = new LinearGradientBrush({ * startColor: "Red", startPoint: { x: 0, y: 0 }, * gradientStops: [{ offset: 0.5, color: "Green" }], * endColor: "Blue", endPoint: { x: 1, y: 0 } * }); * const rgb = new RadialGradientBrush({ startColor: "Red", endColor: "Green" }); * * const bitmap = new Bitmap(600, 420); * const ctx = bitmap.newContext({ backColor: "Yellow" }); * const tf = new Format({ font: font, fontSize: 40 }); * * ctx.drawLayout({ * maxWidth: 600, * firstLineIndent: 50, * runs: [ * { text: "test font Solid fill brush in DsPdfJS\n", format: tf, * fillBrush: sb }, * { text: "test Linear Gradient fill in DsPdfJS\n", format: tf, * fillBrush: lgb }, * { text: "test Radial Gradient fill that spans multiple lines in DsPdfJS", * format: tf, fillBrush: rgb } * ] * }, 0, 0); * * const res: Uint8Array = bitmap.saveAsPng(); **/ drawLayout(layout: Layout | ds.LayoutProperties, x: number, y: number): void; /** * Specifies a rectangle to which all subsequent drawing operations are clipped. * @param x The X coordinate of the clipping rectangle. * @param y The Y coordinate of the clipping rectangle. * @param width The width of the clipping rectangle. * @param height The height of the clipping rectangle. **/ pushClip(x: number, y: number, width: number, height: number): void; /** * Specifies a rectangle to which all subsequent drawing operations are clipped. * @param bounds The clipping rectangle. **/ pushClip(bounds: ds.Bounds): void; /** * Specifies a path to which all subsequent drawing operations are clipped. * @param path The {@link GraphicsPath} object defining clipping area. **/ pushClip(path: GraphicsPath): void; /** * Removes the last clip. After this method is called, the last clip is no longer applied to subsequent drawing operations. **/ popClip(): void; /** * Adds a transparency layer to the target surface. That layer receives all subsequent drawing operations until popLayer is called. * @param opacity An opacity value that is applied uniformly to all drawings in the layer when compositing to the backplate. * The value is between 0.0 and 1.0. * @param contentBounds The content bounds of the transparency layer. Content won't render outside these bounds. * If not set, the content bounds are effectively taken to be the bounds of the target surface. **/ pushLayer(opacity: number, contentBounds?: ds.Bounds | null): void; /** * Stops redirecting drawing operations to the transparency layer that was created by the last pushLayer call. **/ popLayer(): void; /** * Gets or sets the current transformation of the drawing surface. **/ get transform(): Transform; /** * Gets or sets the current transformation of the drawing surface. **/ set transform(transform: Transform); /** * Applies a new transformation to the current transformation matrix. * @param transform The {@link Transform} object to be multiplied by the current transformation matrix. **/ applyTransform(transform: Transform): void; /** * Saves the current transformation to the stack. **/ pushTransform(): void; /** * Restores the previously pushed transformation from the stack. **/ popTransform(): void; /** * Gets or sets the transformation matrix. * The matrix consists of six numbers (their meaning is simplified for clarity): * m11 - scales the drawing horizontally * m12 - skew the the drawing horizontally * m21 - skew the the drawing vertically * m22 - scales the drawing vertically * m31 - moves the the drawing horizontally * m32 - moves the the drawing vertically **/ get matrix(): number[]; /** * Gets or sets the transformation matrix. * The matrix consists of six numbers (their meaning is simplified for clarity): * m11 - scales the drawing horizontally * m12 - skew the the drawing horizontally * m21 - skew the the drawing vertically * m22 - scales the drawing vertically * m31 - moves the the drawing horizontally * m32 - moves the the drawing vertically **/ set matrix(matrix: number[]); /** * Resets the transformation to the identity matrix. **/ resetTransform(): void; /** * Applies the translation transformation. * @param offsetX The horizontal offset. * @param offsetY The vertical offset. **/ translate(offsetX: number, offsetY: number): void; /** * Applies the scaling transformation. * @param scaleFactor The value to scale by on the X and Y axes. * @param cx The optional center point X offset. * @param cy The optional center point Y offset. **/ scale(scaleFactor: number, cx?: number, cy?: number): void; /** * Applies the scaling transformation. * @param scaleX The value to scale by on the X axis. * @param scaleY The value to scale by on the Y axis. * @param cx The optional center point X offset. * @param cy The optional center point Y offset. **/ scaleXY(scaleX: number, scaleY: number, cx?: number, cy?: number): void; /** * Applies the rotation transformation. * @param angle The rotation angle. * @param angleUnits The angle units. The default is Radians. * @param cx The optional center point X offset. * @param cy The optional center point Y offset. **/ rotate(angle: number, angleUnits?: em.AngleUnits, cx?: number, cy?: number): void; /** * Applies the skew transformation. * @param angleX The X angle. * @param angleY The Y angle. * @param angleUnits The angle units. The default is Radians. * @param cx The optional center point X offset. * @param cy The optional center point Y offset. **/ skew(angleX: number, angleY: number, angleUnits?: em.AngleUnits, cx?: number, cy?: number): void; /** * Applies the skew transformation along the X axis. * @param angle The X angle. * @param angleUnits The angle units. The default is Radians. **/ skewX(angle: number, angleUnits?: em.AngleUnits): void; /** * Applies the skew transformation along the Y axis. * @param angle The Y angle. * @param angleUnits The angle units. The default is Radians. **/ skewY(angle: number, angleUnits?: em.AngleUnits): void; }