Skip to content

editor › Globals › SvgDrawable

Class: SvgDrawable

Offers functionality to draw SVGs and get their polygons. In order to be compatible with the other drawables, it will always take the viewBox center as center position for positioning and rotating around.

For rendering engravings and cutouts on the gpu in the fragment shader, we had to do the following: The gpu can only repeat textures in a rectangular pattern. Sometimes, we still want to have other arrangements, e.g. with the hexagons. You can make a texture that tiles well with multiple hexagons on it, but you will have to split some cutouts there. This does not work well with polygon clipping as we have touching (or even overlapping) polygons then. Our workaround is to put every polygon that touches the viewbox border in the svg twice, but one copy will be colored differently. For the polygon clipping, we can then simply remove the colored polygons and are left with non-touching polygons where as for the texture creation, we can just render the polygons and get a rectangular texture.

Beautiful ascii art:

SVG viewport

| | | | |###| polygons which exceed the SVG viewport have one colored duplicate. | | _ |###| | |_| | | polygon inside | |_______|

texture representation (content clipped to svg viewport, used for texture)

| | | | |#| | | _ |#| | |_| | | | |_______|

polygon clipping representation - colored polygons will be filtered out

_ _
_
_
_______

Hierarchy

↳ SvgDrawable

Index

Constructors

Properties

Methods

Object literals

Constructors

constructor

+ new SvgDrawable(fileName: string, svgString: string, assetData: IAssetData, cuttingPolygons: Polygon[], texturePolygons: Polygon[]): SvgDrawable

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:115

One of the three parameters must be given.

Parameters:

Name Type Default Description
fileName string null -
svgString string null -
assetData IAssetData null -
cuttingPolygons Polygon[] null the cutting polygons defined in this svg if we already know them (for performance reasons)
texturePolygons Polygon[] null the texture polygons defined in this svg if we already know them (for performance reasons)

Returns: SvgDrawable

Properties

Private Readonly assetData

• assetData: IAssetData = null

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:105

Private cuttingPolygonCache

• cuttingPolygonCache: Array‹object› = []

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:95

Private cuttingPolygonsCache

• cuttingPolygonsCache: Map‹string, Polygon‹›[]› = new Map()

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:115

Private Readonly fileName

• fileName: string = null

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:90

Protected image

• image: HTMLImageElement = null

Inherited from Drawable.image

Defined in src/model/visualization/textures/drawables/Drawable.ts:25

Private imagePromise

• imagePromise: Promise‹HTMLImageElement› = null

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:93

Private loadingPromise

• loadingPromise: Promise‹string› = null

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:92

Private svgContext

• svgContext: any = null

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:106

Private svgString

• svgString: string = null

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:91

Private texturePolygonPromise

• texturePolygonPromise: Promise‹Polygon[]› = null

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:102

Private texturePolygons

• texturePolygons: Polygon[] = null

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:103

Static Private Readonly scaleRange

▪ scaleRange: 2 = 2

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:76

defines the size of the supported scale intervals. 2 means 0-2; 2-4; 4-8; 8-16; … TODO the SvgDrawable should decide on it's scale range based on quality metrics returned by the svg-import

Methods

Private _configValuesFromScaleBoundaries

▸ _configValuesFromScaleBoundaries(supportedScale: object): any | void

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:404

Parameters:

▪ supportedScale: object

Name Type
max number
min number

Returns: any | void

Protected _createTexture

▸ _createTexture(): void

Inherited from Drawable._createTexture

Defined in src/model/visualization/textures/drawables/Drawable.ts:173

Subclasses must call this to ensure that the texture is set

Returns: void

Private _getSvgContext

▸ _getSvgContext(svgString: string, supportedScale: object): SvgContext

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:396

Parameters:

▪ svgString: string

▪ supportedScale: object

Name Type
max number
min number

Returns: SvgContext

Protected _initializeTexture

▸ _initializeTexture(texture: Texture): void

Inherited from Drawable._initializeTexture

Defined in src/model/visualization/textures/drawables/Drawable.ts:188

Parameters:

Name Type
texture Texture

Returns: void

_loadFromAssetData

▸ _loadFromAssetData(assetData: IAssetData): Promise‹Object3D | string | Texture | ArrayBuffer | Record‹string, any› | null›

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:329

Parameters:

Name Type
assetData IAssetData

Returns: Promise‹Object3D | string | Texture | ArrayBuffer | Record‹string, any› | null›

_normalizePolygon

▸ _normalizePolygon(polygon: Polygon | MultiPolygon, size: IDimensions2): void

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:391

Parameters:

Name Type
polygon Polygon | MultiPolygon
size IDimensions2

Returns: void

_polygonsFromSegments

▸ _polygonsFromSegments(svgSegments: Segment[]): Polygon[]

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:367

Parameters:

Name Type
svgSegments Segment[]

Returns: Polygon[]

_svgContextToPolygons

▸ _svgContextToPolygons(svgContext: SvgContext): Promise‹Polygon[]›

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:341

Convert the svg context into an array of polygons. They are in mm and centered around the origin.

Parameters:

Name Type Description
svgContext SvgContext -

Returns: Promise‹Polygon[]›

canDrawSync

▸ canDrawSync(): boolean

Inherited from Drawable.canDrawSync

Defined in src/model/visualization/textures/drawables/Drawable.ts:79

Return whether drawSync can be called

Returns: boolean

drawAsync

▸ drawAsync(params: IDrawParameters): object

Inherited from Drawable.drawAsync

Defined in src/model/visualization/textures/drawables/Drawable.ts:64

Draw asynchronously. Return a promise that indicates when we are finished.

Parameters:

Name Type
params IDrawParameters

Returns: object

  • cancelFn(): function

  • (): void

  • drawPromise: Promise‹void›

drawSync

▸ drawSync(params: IDrawParameters): void

Inherited from Drawable.drawSync

Defined in src/model/visualization/textures/drawables/Drawable.ts:87

Renders the drawable into context, centered around dx, dy.

Parameters:

Name Type Description
params IDrawParameters {@see IDrawParameters} specifying the draw.

Returns: void

filledToCanvas

▸ filledToCanvas(): Promise‹HTMLCanvasElement›

Overrides Drawable.filledToCanvas

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:161

Returns: Promise‹HTMLCanvasElement›

getCutoutTexture

▸ getCutoutTexture(): Texture

Inherited from Drawable.getCutoutTexture

Defined in src/model/visualization/textures/drawables/Drawable.ts:50

Returns: Texture

THREE Texture of the drawable that's used for cutout-rendering. Should be black / white only, black means this spot should be transparent.

getCuttingPolygons

▸ getCuttingPolygons(scale: number): Promise‹Polygon[]›

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:266

Return the polygons normalized to the coordinates from -1 to 1. Blue color will be filtered out.

Parameters:

Name Type Default
scale number 1

Returns: Promise‹Polygon[]›

getCuttingPolygonsSync

▸ getCuttingPolygonsSync(scale: number): Polygon[] | null

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:311

Return the stored polygons if they were already calculated (use getCuttingPolygons() to trigger the computation) Otherwise, return null

Parameters:

Name Type Default
scale number 1

Returns: Polygon[] | null

getImage

▸ getImage(): Promise‹HTMLImageElement›

Overrides Drawable.getImage

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:224

Takes an image (presumably initialized with an SVG as src) and renders it on a nearly* transparent canvas, whose pixelData is then used to create the image which is returned from this method.

Use case: (semi)transparent SVGs will be rendered onto a transparent black background (rgba(0,0,0,0)). This will produce visual artifacts when being rendered onto plates, i.e. the transition from transparent -> white in the image should not be visible (because white for us means "do not engrave"), but since the pixel values are interpolated from (0, 0, 0, 0) to (255, 255, 255, 1), there is a slim dark border that is not transparent, but also not white. typically when users embed raster graphics that have a white border that appear seamless in illustrator, but would produce rectangular seams in kyub.

*nearly = The correct approach to solve this would be to set all transparent pixels to (255, 255, 255, 0). However, as soon as the transparency is set to 0, color values are discarded. Thus, we set the transparency to barely visible

Returns: Promise‹HTMLImageElement›

getLoadedPromise

▸ getLoadedPromise(): Promise‹void›

Inherited from Drawable.getLoadedPromise

Defined in src/model/visualization/textures/drawables/Drawable.ts:42

Returns: Promise‹void›

getPhysicalSize

▸ getPhysicalSize(): Promise‹IDimensions2›

Overrides Drawable.getPhysicalSize

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:318

Estimates the size by using SvgContext's determineResolution guessing {@see Drawable#getPhysicalSize()}

Returns: Promise‹IDimensions2›

getSize

▸ getSize(): Promise‹IDimensions2›

Inherited from Drawable.getSize

Defined in src/model/visualization/textures/drawables/Drawable.ts:148

Return a promise that resolves to the natural size of the drawable. The natural size is in CSS pixel units.

Returns: Promise‹IDimensions2›

getSvgString

▸ getSvgString(): Promise‹string›

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:183

Returns: Promise‹string›

getTexture

▸ getTexture(): Texture

Inherited from Drawable.getTexture

Defined in src/model/visualization/textures/drawables/Drawable.ts:38

Returns: Texture

THREE Texture of the drawable

getTexturePolygons

▸ getTexturePolygons(): Promise‹Polygon[]›

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:239

Return the polygons normalized to the coordinates from -1 to 1. Opposed to getCuttingPolygons, no color filtering will happen

Returns: Promise‹Polygon[]›

loadSVG

▸ loadSVG(): Promise‹string›

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:187

Returns: Promise‹string›

toCanvas

▸ toCanvas(): Promise‹HTMLCanvasElement›

Inherited from Drawable.toCanvas

Defined in src/model/visualization/textures/drawables/Drawable.ts:127

Create a canvas and draw own content to that.

Returns: Promise‹HTMLCanvasElement›

Static getSupportedScaleRange

▸ getSupportedScaleRange(scale: number): object

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:77

Parameters:

Name Type
scale number

Returns: object

  • max: number

  • min: number

Object literals

Private supportedScale

▪ supportedScale: object

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:114

When importing SVGs they get linearized. To increase the performance we want a good approximation with as few lines as possible. When scaling, the approximation gets worse with increasing scale. The range of supported scale is the interval in which we think the quality meets our standards without being too hard on performance.

max

• max: number = SvgDrawable.scaleRange

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:114

min

• min: number = 0

Defined in src/model/visualization/textures/drawables/SvgDrawable.ts:114