github/scratch-render
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

First pass at re-rasterizing SVGs when scaled

Browse Source
This commit is contained in:
Christopher Willis-Ford
2018-01-17 00:16:19 -05:00
parent 89d09e9b98
commit 89b5ed32d0
3 changed files with 71 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/SVGSkin.js
View File

@@ -5,6 +5,8 @@ const SvgRenderer = require('./svg-quirks-mode/svg-renderer');
const Silhouette = require('./Silhouette');
const MAX_TEXTURE_DIMENSION = 2048;
class SVGSkin extends Skin {
/**
* Create a new SVG skin.
@@ -25,6 +27,12 @@ class SVGSkin extends Skin {
/** @type {WebGLTexture} */
this._texture = null;
/** @type {number} */
this._textureScale = 1;
/** @type {Number} */
this._maxTextureScale = 0;
this._silhouette = new Silhouette();
}
@@ -57,11 +65,29 @@ class SVGSkin extends Skin {
}
/**
* @param {Array<number>} scale - The scaling factors to be used.
* @param {Array<number>} scale - The scaling factors to be used, each in the [0,100] range.
* @return {WebGLTexture} The GL texture representation of this skin when drawing at the given scale.
*/
// eslint-disable-next-line no-unused-vars
getTexture (scale) {
// The texture only ever gets uniform scale. Take the larger of the two axes.
const scaleMax = scale ? Math.max(Math.abs(scale[0]), Math.abs(scale[1])) : 100;
const requestedScale = Math.min(scaleMax / 100, this._maxTextureScale);
let newScale = this._textureScale;
while ((newScale < this._maxTextureScale) && (requestedScale >= 1.5 * newScale)) {
newScale *= 2;
}
if (this._textureScale !== newScale) {
this._textureScale = newScale;
this._svgRenderer._draw(this._textureScale, () => {
if (this._textureScale === newScale) {
const gl = this._renderer.gl;
gl.bindTexture(gl.TEXTURE_2D, this._texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._svgRenderer.canvas);
}
});
}
/** @todo re-render a scaled version if the requested scale is significantly larger than the current render */
return this._texture;
}
@@ -74,8 +100,10 @@ class SVGSkin extends Skin {
* @fires Skin.event:WasAltered
*/
setSVG (svgData, rotationCenter) {
this._svgRenderer.fromString(svgData, () => {
this._svgRenderer.fromString(svgData, 1, () => {
const gl = this._renderer.gl;
this._textureScale = this._maxTextureScale = 1;
this._svgRenderer.extraScale = 1;
if (this._texture) {
gl.bindTexture(gl.TEXTURE_2D, this._texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._svgRenderer.canvas);
@@ -91,6 +119,13 @@ class SVGSkin extends Skin {
this._texture = twgl.createTexture(gl, textureOptions);
this._silhouette.update(this._svgRenderer.canvas);
}
const maxDimension = Math.max(this._svgRenderer.canvas.width, this._svgRenderer.canvas.height);
let testScale = 2;
for (testScale; maxDimension * testScale <= MAX_TEXTURE_DIMENSION; testScale *= 2) {
this._maxTextureScale = testScale;
}
if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
this.setRotationCenter.apply(this, rotationCenter);
this.emit(Skin.Events.WasAltered);