Add screenshot functionality to the demo
This commit is contained in:
parent
f5eea1cc7a
commit
473c28e16d
|
@ -40,6 +40,8 @@ export abstract class AppController {
|
||||||
|
|
||||||
protected canvas: HTMLCanvasElement;
|
protected canvas: HTMLCanvasElement;
|
||||||
|
|
||||||
|
protected screenshotButton: HTMLButtonElement | null;
|
||||||
|
|
||||||
protected fileData: ArrayBuffer;
|
protected fileData: ArrayBuffer;
|
||||||
|
|
||||||
protected abstract fileLoaded(): void;
|
protected abstract fileLoaded(): void;
|
||||||
|
@ -71,6 +73,15 @@ export abstract class DemoAppController<View extends PathfinderDemoView> extends
|
||||||
document.body.addEventListener('click', () => {
|
document.body.addEventListener('click', () => {
|
||||||
this.settingsCard.classList.add('pf-invisible');
|
this.settingsCard.classList.add('pf-invisible');
|
||||||
}, false);
|
}, false);
|
||||||
|
this.settingsCard.addEventListener('click', event => event.stopPropagation(), false);
|
||||||
|
|
||||||
|
const screenshotButton = document.getElementById('pf-screenshot-button') as
|
||||||
|
HTMLButtonElement | null;
|
||||||
|
if (screenshotButton != null) {
|
||||||
|
screenshotButton.addEventListener('click', () => {
|
||||||
|
this.view.then(view => view.queueScreenshot());
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
this.filePickerElement = document.getElementById('pf-file-select') as
|
this.filePickerElement = document.getElementById('pf-file-select') as
|
||||||
(HTMLInputElement | null);
|
(HTMLInputElement | null);
|
||||||
|
|
|
@ -107,6 +107,8 @@ export abstract class PathfinderDemoView extends PathfinderView {
|
||||||
this.pathTransformBufferTextures = [];
|
this.pathTransformBufferTextures = [];
|
||||||
this.pathColorsBufferTextures = [];
|
this.pathColorsBufferTextures = [];
|
||||||
|
|
||||||
|
this.wantsScreenshot = false;
|
||||||
|
|
||||||
this.antialiasingStrategy = new NoAAStrategy(0, false);
|
this.antialiasingStrategy = new NoAAStrategy(0, false);
|
||||||
this.antialiasingStrategy.init(this);
|
this.antialiasingStrategy.init(this);
|
||||||
}
|
}
|
||||||
|
@ -262,8 +264,14 @@ export abstract class PathfinderDemoView extends PathfinderView {
|
||||||
// Draw the glyphs with the resolved atlas to the default framebuffer.
|
// Draw the glyphs with the resolved atlas to the default framebuffer.
|
||||||
this.compositeIfNecessary();
|
this.compositeIfNecessary();
|
||||||
|
|
||||||
// Finish timing, and finish.
|
// Finish timing.
|
||||||
this.finishTiming();
|
this.finishTiming();
|
||||||
|
|
||||||
|
// Take a screenshot if desired.
|
||||||
|
if (this.wantsScreenshot) {
|
||||||
|
this.wantsScreenshot = false;
|
||||||
|
this.takeScreenshot();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private setTransformUniform(uniforms: UniformMap, objectIndex: number) {
|
private setTransformUniform(uniforms: UniformMap, objectIndex: number) {
|
||||||
|
@ -424,6 +432,28 @@ export abstract class PathfinderDemoView extends PathfinderView {
|
||||||
this.gl.uniform2f(uniforms.uTexScale, usedSize[0], usedSize[1]);
|
this.gl.uniform2f(uniforms.uTexScale, usedSize[0], usedSize[1]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
queueScreenshot() {
|
||||||
|
this.wantsScreenshot = true;
|
||||||
|
this.setDirty();
|
||||||
|
}
|
||||||
|
|
||||||
|
private takeScreenshot() {
|
||||||
|
const width = this.canvas.width, height = this.canvas.height;
|
||||||
|
const scratchCanvas = document.createElement('canvas');
|
||||||
|
scratchCanvas.width = width;
|
||||||
|
scratchCanvas.height = height;
|
||||||
|
const scratch2DContext = unwrapNull(scratchCanvas.getContext('2d'));
|
||||||
|
scratch2DContext.drawImage(this.canvas, 0, 0, width, height);
|
||||||
|
|
||||||
|
const scratchLink = document.createElement('a');
|
||||||
|
scratchLink.download = 'pathfinder-screenshot.png';
|
||||||
|
scratchLink.href = scratchCanvas.toDataURL();
|
||||||
|
scratchLink.style.position = 'absolute';
|
||||||
|
document.body.appendChild(scratchLink);
|
||||||
|
scratchLink.click();
|
||||||
|
document.body.removeChild(scratchLink);
|
||||||
|
}
|
||||||
|
|
||||||
protected getModelviewTransform(pathIndex: number): glmatrix.mat4 {
|
protected getModelviewTransform(pathIndex: number): glmatrix.mat4 {
|
||||||
return glmatrix.mat4.create();
|
return glmatrix.mat4.create();
|
||||||
}
|
}
|
||||||
|
@ -475,6 +505,8 @@ export abstract class PathfinderDemoView extends PathfinderView {
|
||||||
private atlasRenderingTimerQuery: WebGLQuery;
|
private atlasRenderingTimerQuery: WebGLQuery;
|
||||||
private compositingTimerQuery: WebGLQuery;
|
private compositingTimerQuery: WebGLQuery;
|
||||||
private timerQueryPollInterval: number | null;
|
private timerQueryPollInterval: number | null;
|
||||||
|
|
||||||
|
private wantsScreenshot: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export abstract class MonochromePathfinderView extends PathfinderDemoView {
|
export abstract class MonochromePathfinderView extends PathfinderDemoView {
|
||||||
|
|
Loading…
Reference in New Issue