Refactor `flattenPath` and `canonicalizePath` out

This commit is contained in:
Patrick Walton 2018-12-03 16:31:25 -08:00
parent b51028568b
commit 27ba918192
2 changed files with 51 additions and 32 deletions

46
demo2/path-utils.ts Normal file
View File

@ -0,0 +1,46 @@
// pathfinder/demo2/path-utils.ts
//
// Copyright © 2018 The Pathfinder Project Developers.
//
// Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
// http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
// <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
// option. This file may not be copied, modified, or distributed
// except according to those terms.
import {Point2D} from "./geometry";
import {SVGPath} from "./tiling";
const SVGPath: (path: string) => SVGPath = require('svgpath');
export function flattenPath(path: SVGPath): SVGPath {
return path.abs().iterate(segment => {
if (segment[0] === 'C') {
const ctrl0 = new Point2D(parseFloat(segment[segment.length - 6]),
parseFloat(segment[segment.length - 5]));
const ctrl1 = new Point2D(parseFloat(segment[segment.length - 4]),
parseFloat(segment[segment.length - 3]));
const to = new Point2D(parseFloat(segment[segment.length - 2]),
parseFloat(segment[segment.length - 1]));
const ctrl = new Point2D(0.5 * (ctrl0.x + ctrl1.x), 0.5 * (ctrl0.y + ctrl1.y));
return [['Q', "" + ctrl.x, "" + ctrl.y, "" + to.x, "" + to.y]];
}
if (segment[0] === 'A') {
const to = new Point2D(parseFloat(segment[segment.length - 2]),
parseFloat(segment[segment.length - 1]));
return [['L', "" + to.x, "" + to.y]];
}
return [segment];
});
}
export function canonicalizePath(path: SVGPath): SVGPath {
return path.abs().iterate(segment => {
if (segment[0] === 'H')
return [['L', segment[1], '0']];
if (segment[0] === 'V')
return [['L', '0', segment[1]]];
return [segment];
});
}

View File

@ -17,12 +17,12 @@ import STENCIL_FRAGMENT_SHADER_SOURCE from "./stencil.fs.glsl";
import SVG from "../resources/svg/Ghostscript_Tiger.svg";
import AREA_LUT from "../resources/textures/area-lut.png";
import {Matrix2D, Point2D, Rect, Size2D, Vector3D, approxEq, cross, lerp} from "./geometry";
import {canonicalizePath, flattenPath} from "./path-utils";
import {SVGPath, TILE_SIZE, TileDebugger, Tiler, testIntervals, TileStrip} from "./tiling";
import {staticCast, unwrapNull} from "./util";
const SVGPath: (path: string) => SVGPath = require('svgpath');
const parseColor: (color: string) => any = require('parse-color');
const svgPathOutline: any = require('svg-path-outline');
const SVG_NS: string = "http://www.w3.org/2000/svg";
@ -475,6 +475,7 @@ class Scene {
//const tileDebugger = new TileDebugger(document);
let fillCount = 0, strokeCount = 0;
const paths: SVGPath[] = [];
for (let pathElementIndex = 0;
pathElementIndex < pathElements.length;
@ -484,9 +485,11 @@ class Scene {
const style = window.getComputedStyle(pathElement);
if (style.fill != null && style.fill !== 'none') {
fillCount++;
this.addPath(paths, pathColors, style.fill, pathString);
}
if (style.stroke != null && style.stroke !== 'none') {
strokeCount++;
/*
const strokeWidth =
style.strokeWidth == null ? 1.0 : parseFloat(style.strokeWidth);
@ -498,6 +501,7 @@ class Scene {
*/
}
}
console.log("", fillCount, "fills,", strokeCount, "strokes");
const startTime = window.performance.now();
@ -624,37 +628,6 @@ class Program<U extends string, A extends string> {
}
}
function flattenPath(path: SVGPath): SVGPath {
return path.abs().iterate(segment => {
if (segment[0] === 'C') {
const ctrl0 = new Point2D(parseFloat(segment[segment.length - 6]),
parseFloat(segment[segment.length - 5]));
const ctrl1 = new Point2D(parseFloat(segment[segment.length - 4]),
parseFloat(segment[segment.length - 3]));
const to = new Point2D(parseFloat(segment[segment.length - 2]),
parseFloat(segment[segment.length - 1]));
const ctrl = new Point2D(0.5 * (ctrl0.x + ctrl1.x), 0.5 * (ctrl0.y + ctrl1.y));
return [['Q', "" + ctrl.x, "" + ctrl.y, "" + to.x, "" + to.y]];
}
if (segment[0] === 'A') {
const to = new Point2D(parseFloat(segment[segment.length - 2]),
parseFloat(segment[segment.length - 1]));
return [['L', "" + to.x, "" + to.y]];
}
return [segment];
});
}
function canonicalizePath(path: SVGPath): SVGPath {
return path.abs().iterate(segment => {
if (segment[0] === 'H')
return [['L', segment[1], '0']];
if (segment[0] === 'V')
return [['L', '0', segment[1]]];
return [segment];
});
}
function waitForQuery(gl: WebGL2RenderingContext, disjointTimerQueryExt: any, query: WebGLQuery):
void {
const queryResultAvailable = disjointTimerQueryExt.QUERY_RESULT_AVAILABLE_EXT;