Creates an SvgContext for drawing graphics and converting to SvgDocument.
The width of the image, in device-independent pixels.
The height of the image, in device-independent pixels.
OptionalsvgContextProperties: SvgContextPropertiesThe settings for creating a DrawingContext for SVG.
Creates an SvgContext for drawing graphics and converting to SvgDocument.
An object manager that controls the lifetime of the SvgContext object.
The width of the image, in device-independent pixels.
The height of the image, in device-independent pixels.
OptionalsvgContextProperties: SvgContextPropertiesThe settings for creating a DrawingContext for SVG.
Gets or sets the description of the SVG document.
Gets or sets the description of the SVG document.
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 BmpContext.
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 BmpContext.
Gets or sets a value indicating whether fonts used in 'text' elements should be embedded.
Gets or sets a value indicating whether fonts used in 'text' elements should be embedded.
Gets or sets the FontCollection used by measureText and DrawingContext#drawText/DrawingContext#drawLayout methods.
Gets or sets the FontCollection used by measureText and DrawingContext#drawText/DrawingContext#drawLayout methods.
Gets or sets the height of the image, in device-independent pixels.
Gets or sets the height of the image, in device-independent pixels.
Gets the reference to the object.
Gets or sets a string to be appended to the auto-generated ID values.
Gets or sets a string to be appended to the auto-generated ID values.
Gets or sets a hint to the implementation about how to make speed vs. quality tradeoffs as it performs image processing.
Gets or sets a hint to the implementation about how to make speed vs. quality tradeoffs as it performs image processing.
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
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
Gets the owner ObjectManager instance.
Gets or sets a value indicating whether the positions are set for each individual character within the 'text' element.
Gets or sets a value indicating whether the positions are set for each individual character within the 'text' element.
Gets or sets a hint to the implementation about what tradeoffs to make as it renders vector graphics elements.
Gets or sets a hint to the implementation about what tradeoffs to make as it renders vector graphics elements.
Gets or sets the title of the SVG document.
Gets or sets the title of the SVG document.
Gets the type of DrawingContext.
Gets or sets the width of the image, in device-independent pixels.
Gets or sets the width of the image, in device-independent pixels.
Draws and fills an ellipse.
The X coordinate of the rectangle enclosing an ellipse.
The Y coordinate of the rectangle enclosing an ellipse.
The width of the rectangle enclosing an ellipse.
The height of the rectangle enclosing an ellipse.
The options for drawing and filling an ellipse.
Draws and fills an ellipse.
The rectangle enclosing an ellipse.
The options for drawing and filling an ellipse.
Draws an image or bitmap with specified size, location, and opacity.
The image object to draw.
The X coordinate of the destination rectangle.
The Y coordinate of the destination rectangle.
The width of the destination rectangle.
The height of the destination rectangle.
OptionaldrawImageOptions: DrawImageOptionsThe options for drawing an image.
Draws an image or bitmap with specified size, location, and opacity.
The image object to draw.
The destination rectangle.
OptionaldrawImageOptions: DrawImageOptionsThe options for drawing an image.
Draws a Layout at the specified position.
An existing Layout object or the properties describing a new Layout settings.
The X coordinate at which to draw the Layout.
The Y coordinate at which to draw the Layout.
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();
Draws a line between two points, using the specified pen.
The X coordinate of the first point.
The Y coordinate of the first point.
The X coordinate of the second point.
The Y coordinate of the second point.
The Pen object or settings for creating a pen.
Draws a series of connected lines, using a specified pen.
The array of points to connect.
The Pen object or settings for creating a pen.
Draws and fills a graphics path.
The GraphicsPath object to draw.
The options for drawing and filling the GraphicsPath.
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();
Draws and fills a polygon.
The array of points or a quadrilateral specifying the polygon.
The options for drawing and filling a polygon.
Draws and fills a rectangle or rounded rectangle.
The X coordinate of the rectangle.
The Y coordinate of the rectangle.
The width of the rectangle.
The height of the rectangle.
The options for drawing and filling a rectangle.
Draws and fills a rectangle or rounded rectangle.
The rectangle bounds.
The options for drawing and filling a rectangle.
Draws a SvgDocument at a point specifying the position of SVG viewport. To specify the position of SVG content rather than viewport, see the drawSvgContent method.
The SvgDocument to draw.
The X coordinate of SVG viewport.
The Y coordinate of SVG viewport.
Optionalopacity: numberThe opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.
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();
Draws the content of a specified 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.
The SvgDocument to draw.
The X coordinate of SVG content.
The Y coordinate of SVG content.
Optionalopacity: numberThe opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.
Draws the content of a specified 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.
The SvgDocument to draw.
The X coordinate of the target rectangle for SVG content.
The Y coordinate of the target rectangle for SVG content.
The width of the target rectangle for SVG content.
The height of the target rectangle for SVG content.
Optionalopacity: numberThe opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.
Draws the content of a specified 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.
The SvgDocument to draw.
The target rectangle for SVG content.
Optionalopacity: numberThe opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.
Draws a 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.
The SvgDocument to draw.
The X coordinate of the target rectangle for SVG viewport.
The Y coordinate of the target rectangle for SVG viewport.
The width of the target rectangle for SVG viewport.
The height of the target rectangle for SVG viewport.
Optionalopacity: numberThe opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.
Draws a 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.
The SvgDocument to draw.
The target rectangle for SVG viewport.
Optionalopacity: numberThe opacity factor to be applied to the SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.
Draws text using a specified format at the specified position.
The text to draw.
The text format to use.
The X coordinate at which to draw the text.
The Y coordinate at which to draw the text.
OptionalmaxWidth: number | nullIf provided, specifies the maximum width of text.
Draws text using a specified attributes at a specified location.
The text to draw.
The font to use.
The font size.
The text color.
The X coordinate at which to draw the text.
The Y coordinate at which to draw the text.
OptionalmaxWidth: number | nullIf provided, specifies the maximum width of text.
Draws a text run at the specified position.
The formatted text section to draw.
The X coordinate at which to draw the text.
The Y coordinate at which to draw the text.
OptionalmaxWidth: number | nullIf provided, specifies the maximum width of text.
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();
Detaches the object from the ObjectManager and deallocates its memory, if possible.
Measures text using a specified font, font size and layout width.
The string to measure.
The font to use.
The font size to use.
OptionalmaxWidth: number | nullIf provided, specifies the maximum width of text.
The actual size needed to draw the text.
Measures the size of the given text run.
The formatted text section to measure.
OptionalmaxWidth: number | nullIf provided, specifies the maximum width of text.
The actual size needed to draw the text.
Removes the last clip. After this method is called, the last clip is no longer applied to subsequent drawing operations.
Ends the group that was created by the last SvgContext#pushGroup call.
Stops redirecting drawing operations to the transparency layer that was created by the last pushLayer call.
Restores the previously pushed transformation from the stack.
Specifies a rectangle to which all subsequent drawing operations are clipped.
The X coordinate of the clipping rectangle.
The Y coordinate of the clipping rectangle.
The width of the clipping rectangle.
The height of the clipping rectangle.
Specifies a rectangle to which all subsequent drawing operations are clipped.
The clipping rectangle.
Specifies a path to which all subsequent drawing operations are clipped.
The GraphicsPath object defining clipping area.
Starts a group ('g') element with custom attributes in the SVG document. Call the SvgContext#popGroup method to end the group.
The name of the attribute, including the optional prefix.
A string value of the attribute.
Optionalnamespace: stringThe optional namespace of the attribute.
Starts a group ('g') element with custom attributes in the SVG document. Call the SvgContext#popGroup method to end the group.
The list of attributes to be associated with the group.
Adds a transparency layer to the target surface. That layer receives all subsequent drawing operations until popLayer is called.
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.
OptionalcontentBounds: Bounds | nullThe 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.
Saves the current transformation to the stack.
Rebinds the object from the current ObjectManager to the specified one.
The new ObjectManager for the object.
Resets the transformation to the identity matrix.
Applies the rotation transformation.
The rotation angle.
OptionalangleUnits: AngleUnitsThe angle units. The default is Degrees.
Optionalcx: numberThe optional center point X offset.
Optionalcy: numberThe optional center point Y offset.
Applies the scaling transformation.
The value to scale by on the X and Y axes.
Optionalcx: numberThe optional center point X offset.
Optionalcy: numberThe optional center point Y offset.
Applies the scaling transformation.
The value to scale by on the X axis.
The value to scale by on the Y axis.
Optionalcx: numberThe optional center point X offset.
Optionalcy: numberThe optional center point Y offset.
Applies the skew transformation.
The X angle.
The Y angle.
OptionalangleUnits: AngleUnitsThe angle units. The default is Degrees.
Optionalcx: numberThe optional center point X offset.
Optionalcy: numberThe optional center point Y offset.
Applies the skew transformation along the X axis.
The X angle.
OptionalangleUnits: AngleUnitsThe angle units. The default is Degrees.
Applies the skew transformation along the Y axis.
The Y angle.
OptionalangleUnits: AngleUnitsThe angle units. The default is Degrees.
Generates a SvgDocument from this context, and clears the context's command list afterwards.
The resulting SvgDocument.
Applies the translation transformation.
The horizontal offset.
The vertical offset.
Represents a drawing context for a new SvgDocument.