Fix colors and view box for the reference in the SVG reftest
This commit is contained in:
parent
c5187deedd
commit
275a937439
|
@ -243,7 +243,7 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
|
||||||
this.view.then(view => {
|
this.view.then(view => {
|
||||||
view.recreateRenderer();
|
view.recreateRenderer();
|
||||||
view.attachMeshes([meshes]);
|
view.attachMeshes([meshes]);
|
||||||
view.initCameraBounds(this.svgLoader.svgBounds);
|
view.initCameraBounds(this.svgLoader.svgViewBox);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -401,9 +401,9 @@ class BenchmarkTestView extends DemoView {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
initCameraBounds(bounds: glmatrix.vec4): void {
|
initCameraBounds(viewBox: glmatrix.vec4): void {
|
||||||
if (this.renderer instanceof BenchmarkSVGRenderer)
|
if (this.renderer instanceof BenchmarkSVGRenderer)
|
||||||
this.renderer.initCameraBounds(bounds);
|
this.renderer.initCameraBounds(viewBox);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected renderingFinished(): void {
|
protected renderingFinished(): void {
|
||||||
|
@ -470,7 +470,7 @@ class BenchmarkTextRenderer extends Renderer {
|
||||||
return glmatrix.vec2.clone([1.0, 1.0]);
|
return glmatrix.vec2.clone([1.0, 1.0]);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected get worldTransform() {
|
protected get worldTransform(): glmatrix.mat4 {
|
||||||
const canvas = this.renderContext.canvas;
|
const canvas = this.renderContext.canvas;
|
||||||
|
|
||||||
const transform = glmatrix.mat4.create();
|
const transform = glmatrix.mat4.create();
|
||||||
|
@ -612,7 +612,7 @@ class BenchmarkSVGRenderer extends SVGRenderer {
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(renderContext: BenchmarkTestView) {
|
constructor(renderContext: BenchmarkTestView) {
|
||||||
super(renderContext);
|
super(renderContext, {sizeToFit: false});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -516,7 +516,7 @@ class ReferenceTestAppController extends DemoAppController<ReferenceTestView> {
|
||||||
this.view.then(view => {
|
this.view.then(view => {
|
||||||
view.recreateRenderer();
|
view.recreateRenderer();
|
||||||
view.attachMeshes([meshes]);
|
view.attachMeshes([meshes]);
|
||||||
view.initCameraBounds(this.svgLoader.svgBounds);
|
view.initCameraBounds(this.svgLoader.svgViewBox);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -537,7 +537,6 @@ class ReferenceTestAppController extends DemoAppController<ReferenceTestView> {
|
||||||
break;
|
break;
|
||||||
case 'svg':
|
case 'svg':
|
||||||
// TODO(pcwalton): Custom SVGs.
|
// TODO(pcwalton): Custom SVGs.
|
||||||
// TODO(pcwalton): Detect scale.
|
|
||||||
request = {
|
request = {
|
||||||
name: unwrapNull(this.builtinSvgName),
|
name: unwrapNull(this.builtinSvgName),
|
||||||
renderer: 'pixman',
|
renderer: 'pixman',
|
||||||
|
@ -614,9 +613,9 @@ class ReferenceTestView extends DemoView {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
initCameraBounds(bounds: glmatrix.vec4): void {
|
initCameraBounds(viewBox: glmatrix.vec4): void {
|
||||||
if (this.renderer instanceof ReferenceTestSVGRenderer)
|
if (this.renderer instanceof ReferenceTestSVGRenderer)
|
||||||
this.renderer.initCameraBounds(bounds);
|
this.renderer.initCameraBounds(viewBox);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected renderingFinished(): void {
|
protected renderingFinished(): void {
|
||||||
|
@ -701,7 +700,7 @@ class ReferenceTestTextRenderer extends Renderer {
|
||||||
return glmatrix.vec2.clone([1.0, 1.0]);
|
return glmatrix.vec2.clone([1.0, 1.0]);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected get worldTransform() {
|
protected get worldTransform(): glmatrix.mat4 {
|
||||||
const canvas = this.renderContext.canvas;
|
const canvas = this.renderContext.canvas;
|
||||||
|
|
||||||
const transform = glmatrix.mat4.create();
|
const transform = glmatrix.mat4.create();
|
||||||
|
@ -836,7 +835,7 @@ class ReferenceTestSVGRenderer extends SVGRenderer {
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(renderContext: ReferenceTestView) {
|
constructor(renderContext: ReferenceTestView) {
|
||||||
super(renderContext);
|
super(renderContext, {sizeToFit: false});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -62,7 +62,7 @@ class SVGDemoController extends DemoAppController<SVGDemoView> {
|
||||||
private meshesReceived(): void {
|
private meshesReceived(): void {
|
||||||
this.view.then(view => {
|
this.view.then(view => {
|
||||||
view.attachMeshes([this.meshes]);
|
view.attachMeshes([this.meshes]);
|
||||||
view.initCameraBounds(this.loader.svgBounds);
|
view.initCameraBounds(this.loader.svgViewBox);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -82,13 +82,13 @@ class SVGDemoView extends DemoView {
|
||||||
super(gammaLUT, commonShaderSource, shaderSources);
|
super(gammaLUT, commonShaderSource, shaderSources);
|
||||||
|
|
||||||
this.appController = appController;
|
this.appController = appController;
|
||||||
this.renderer = new SVGDemoRenderer(this);
|
this.renderer = new SVGDemoRenderer(this, {sizeToFit: true});
|
||||||
|
|
||||||
this.resizeToFit(true);
|
this.resizeToFit(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
initCameraBounds(bounds: glmatrix.vec4): void {
|
initCameraBounds(viewBox: glmatrix.vec4): void {
|
||||||
this.renderer.initCameraBounds(bounds);
|
this.renderer.initCameraBounds(viewBox);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -95,6 +95,7 @@ export class SVGLoader {
|
||||||
scale: number;
|
scale: number;
|
||||||
pathBounds: glmatrix.vec4[];
|
pathBounds: glmatrix.vec4[];
|
||||||
svgBounds: glmatrix.vec4;
|
svgBounds: glmatrix.vec4;
|
||||||
|
svgViewBox: glmatrix.vec4;
|
||||||
isMonochrome: boolean;
|
isMonochrome: boolean;
|
||||||
|
|
||||||
private svg: SVGSVGElement;
|
private svg: SVGSVGElement;
|
||||||
|
@ -146,6 +147,10 @@ export class SVGLoader {
|
||||||
while ((kid = svgElement.firstChild) != null)
|
while ((kid = svgElement.firstChild) != null)
|
||||||
this.svg.appendChild(kid);
|
this.svg.appendChild(kid);
|
||||||
|
|
||||||
|
const viewBox = svgElement.viewBox.baseVal;
|
||||||
|
this.svg.setAttribute('width', "" + viewBox.width);
|
||||||
|
this.svg.setAttribute('height', "" + viewBox.height);
|
||||||
|
|
||||||
// Scan for geometry elements.
|
// Scan for geometry elements.
|
||||||
this.pathInstances.length = 0;
|
this.pathInstances.length = 0;
|
||||||
this.clipPathIDs = {};
|
this.clipPathIDs = {};
|
||||||
|
@ -153,15 +158,12 @@ export class SVGLoader {
|
||||||
|
|
||||||
this.paths = [];
|
this.paths = [];
|
||||||
|
|
||||||
const svgBottomLeft = glmatrix.vec2.create(), svgTopRight = glmatrix.vec2.create();
|
|
||||||
|
|
||||||
for (const instance of this.pathInstances) {
|
for (const instance of this.pathInstances) {
|
||||||
const element = instance.element;
|
const element = instance.element;
|
||||||
const svgCTM = element.getCTM();
|
const svgCTM = element.getCTM();
|
||||||
const ctm = glmatrix.mat2d.fromValues(svgCTM.a, svgCTM.b,
|
const ctm = glmatrix.mat2d.fromValues(svgCTM.a, -svgCTM.b,
|
||||||
svgCTM.c, svgCTM.d,
|
svgCTM.c, -svgCTM.d,
|
||||||
svgCTM.e, svgCTM.f);
|
svgCTM.e, viewBox.height - svgCTM.f);
|
||||||
glmatrix.mat2d.scale(ctm, ctm, [1.0, -1.0]);
|
|
||||||
glmatrix.mat2d.scale(ctm, ctm, [this.scale, this.scale]);
|
glmatrix.mat2d.scale(ctm, ctm, [this.scale, this.scale]);
|
||||||
|
|
||||||
const bottomLeft = glmatrix.vec2.create();
|
const bottomLeft = glmatrix.vec2.create();
|
||||||
|
@ -188,9 +190,6 @@ export class SVGLoader {
|
||||||
topRight[0], topRight[1],
|
topRight[0], topRight[1],
|
||||||
]);
|
]);
|
||||||
|
|
||||||
glmatrix.vec2.min(svgBottomLeft, svgBottomLeft, bottomLeft);
|
|
||||||
glmatrix.vec2.max(svgTopRight, svgTopRight, topRight);
|
|
||||||
|
|
||||||
if (instance instanceof SVGFill) {
|
if (instance instanceof SVGFill) {
|
||||||
this.paths.push({
|
this.paths.push({
|
||||||
kind: { Fill: instance.pathfinderFillRule },
|
kind: { Fill: instance.pathfinderFillRule },
|
||||||
|
@ -207,9 +206,8 @@ export class SVGLoader {
|
||||||
return glmatrix.vec4.equals(pathInstance.color, this.pathInstances[0].color);
|
return glmatrix.vec4.equals(pathInstance.color, this.pathInstances[0].color);
|
||||||
});
|
});
|
||||||
|
|
||||||
this.svgBounds = glmatrix.vec4.clone([
|
this.svgViewBox = glmatrix.vec4.clone([
|
||||||
svgBottomLeft[0], svgBottomLeft[1],
|
viewBox.x, viewBox.y, viewBox.x + viewBox.width, viewBox.y + viewBox.height,
|
||||||
svgTopRight[0], svgTopRight[1],
|
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -35,11 +35,17 @@ const ANTIALIASING_STRATEGIES: AntialiasingStrategyTable = {
|
||||||
xcaa: MCAAStrategy,
|
xcaa: MCAAStrategy,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export interface SVGRendererOptions {
|
||||||
|
sizeToFit?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
export abstract class SVGRenderer extends Renderer {
|
export abstract class SVGRenderer extends Renderer {
|
||||||
renderContext: RenderContext;
|
renderContext: RenderContext;
|
||||||
|
|
||||||
camera: OrthographicCamera;
|
camera: OrthographicCamera;
|
||||||
|
|
||||||
|
private options: SVGRendererOptions;
|
||||||
|
|
||||||
get isMulticolor(): boolean {
|
get isMulticolor(): boolean {
|
||||||
return !this.loader.isMonochrome;
|
return !this.loader.isMonochrome;
|
||||||
}
|
}
|
||||||
|
@ -80,9 +86,11 @@ export abstract class SVGRenderer extends Renderer {
|
||||||
protected abstract get loader(): SVGLoader;
|
protected abstract get loader(): SVGLoader;
|
||||||
protected abstract get canvas(): HTMLCanvasElement;
|
protected abstract get canvas(): HTMLCanvasElement;
|
||||||
|
|
||||||
constructor(renderContext: RenderContext) {
|
constructor(renderContext: RenderContext, options: SVGRendererOptions) {
|
||||||
super(renderContext);
|
super(renderContext);
|
||||||
|
|
||||||
|
this.options = options;
|
||||||
|
|
||||||
this.camera = new OrthographicCamera(this.canvas, { scaleBounds: true });
|
this.camera = new OrthographicCamera(this.canvas, { scaleBounds: true });
|
||||||
this.camera.onPan = () => this.renderContext.setDirty();
|
this.camera.onPan = () => this.renderContext.setDirty();
|
||||||
this.camera.onZoom = () => this.renderContext.setDirty();
|
this.camera.onZoom = () => this.renderContext.setDirty();
|
||||||
|
@ -107,9 +115,12 @@ export abstract class SVGRenderer extends Renderer {
|
||||||
this.uploadPathTransforms(1);
|
this.uploadPathTransforms(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
initCameraBounds(bounds: glmatrix.vec4): void {
|
initCameraBounds(svgViewBox: glmatrix.vec4): void {
|
||||||
this.camera.bounds = bounds;
|
// The SVG origin is in the upper left, but the camera origin is in the lower left.
|
||||||
this.camera.zoomToFit();
|
this.camera.bounds = svgViewBox;
|
||||||
|
|
||||||
|
if (this.options.sizeToFit)
|
||||||
|
this.camera.zoomToFit();
|
||||||
}
|
}
|
||||||
|
|
||||||
meshIndexForObject(objectIndex: number): number {
|
meshIndexForObject(objectIndex: number): number {
|
||||||
|
|
|
@ -640,7 +640,9 @@ fn render_reference_svg(request: Json<RenderSvgReferenceRequest>)
|
||||||
svg_handle.render_cairo(&cairo_context);
|
svg_handle.render_cairo(&cairo_context);
|
||||||
}
|
}
|
||||||
|
|
||||||
let image_data = (*surface.get_data().unwrap()).to_vec();
|
let mut image_data = (*surface.get_data().unwrap()).to_vec();
|
||||||
|
image_data.chunks_mut(4).for_each(|color| color.swap(0, 2));
|
||||||
|
|
||||||
let image_buffer = match ImageBuffer::from_raw(image_size.width as u32,
|
let image_buffer = match ImageBuffer::from_raw(image_size.width as u32,
|
||||||
image_size.height as u32,
|
image_size.height as u32,
|
||||||
image_data) {
|
image_data) {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
<svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900" version="1.1">
|
<svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" version="1.1">
|
||||||
<g id="g4" fill="none" transform="matrix(1.7656463,0,0,1.7656463,324.90716,255.00942)">
|
<g id="g4" fill="none" transform="matrix(0.392366,0,0,0.392366,75.0,57.5)">
|
||||||
<g id="g6" stroke-width="0.17200001" stroke="#000" fill="#FFF">
|
<g id="g6" stroke-width="0.17200001" stroke="#000" fill="#FFF">
|
||||||
<path id="path8" d="m-122.3,84.285s0.1,1.894-0.73,1.875c-0.82-0.019-17.27-48.094-37.8-45.851,0,0,17.78-7.353,38.53,43.976z"/>
|
<path id="path8" d="m-122.3,84.285s0.1,1.894-0.73,1.875c-0.82-0.019-17.27-48.094-37.8-45.851,0,0,17.78-7.353,38.53,43.976z"/>
|
||||||
</g>
|
</g>
|
||||||
|
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
Loading…
Reference in New Issue