Constructor
new SvgRenderer(canvasopt)
Create a quirks-mode SVG renderer for a particular canvas.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
canvas |
HTMLCanvasElement |
<optional> |
An optional canvas element to draw to. If this is not provided, the renderer will create a new canvas. |
Members
canvas
size
viewOffset
Methods
_createSVGElement(tagName) → (non-null) {DOMElement}
Helper to create an SVG element with the correct NS.
Parameters:
Name | Type | Description |
---|---|---|
tagName |
string | Tag name for the element. |
Returns:
Element created.
- Type
- DOMElement
_draw()
Draw the SVG to a canvas.
_findLargestStrokeWidth(rootNode) → {number}
Find the largest stroke width in the svg. If a shape has no
stroke
property, it has a stroke-width of 0. If it has a stroke
,
it is by default a stroke-width of 1.
This is used to enlarge the computed bounding box, which doesn't take
stroke width into account.
Parameters:
Name | Type | Description |
---|---|---|
rootNode |
SVGSVGElement | The root SVG node to traverse. |
Returns:
The largest stroke width in the SVG.
- Type
- number
_loadString(svgString)
Load an SVG string and normalize it. All the steps before drawing/measuring.
Parameters:
Name | Type | Description |
---|---|---|
svgString |
string | String of SVG data to draw in quirks-mode. |
_toString() → {string}
Serialize the active SVG DOM to a string.
Returns:
String representing current SVG data.
- Type
- string
_transformMeasurements()
Transform the measurements of the SVG.
In Scratch 2.0, SVGs are drawn without respect to the width,
height, and viewBox attribute on the tag. The exporter
does output these properties - but they appear to be incorrect often.
To address the incorrect measurements, we append the DOM to the
document, and then use SVG's native getBBox
to find the real
drawn dimensions. This ensures things drawn in negative dimensions,
outside the given viewBox, etc., are all eventually drawn to the canvas.
I tried to do this several other ways: stripping the width/height/viewBox
attributes and then drawing (Firefox won't draw anything),
or inflating them and then measuring a canvas. But this seems to be
a natural and performant way.
_transformText()
Transforms an SVG's text elements for Scratch 2.0 quirks. These quirks include:
x
andy
properties are removed/ignored.- Alignment is set to
text-before-edge
. - Line-breaks are converted to explicit
elements. - Any required fonts are injected.
fromString(svgString, onFinishopt)
Load an SVG from a string and draw it.
This will be parsed and transformed, and finally drawn.
When drawing is finished, the onFinish
callback is called.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
svgString |
string | String of SVG data to draw in quirks-mode. |
|
onFinish |
function |
<optional> |
Optional callback for when drawing finished. |
getDrawRatio() → {number}
Get the drawing ratio, adjusted for HiDPI screens.
Returns:
Scale ratio to draw to canvases with.
- Type
- number
measure(svgString) → {object}
Load an SVG from a string and measure it.
Parameters:
Name | Type | Description |
---|---|---|
svgString |
string | String of SVG data to draw in quirks-mode. |
Returns:
the natural size, in Scratch units, of this SVG.
- Type
- object