Refactor `flattenPath` and `canonicalizePath` out
This commit is contained in:
parent
b51028568b
commit
27ba918192
|
@ -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];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
|
@ -17,12 +17,12 @@ import STENCIL_FRAGMENT_SHADER_SOURCE from "./stencil.fs.glsl";
|
||||||
import SVG from "../resources/svg/Ghostscript_Tiger.svg";
|
import SVG from "../resources/svg/Ghostscript_Tiger.svg";
|
||||||
import AREA_LUT from "../resources/textures/area-lut.png";
|
import AREA_LUT from "../resources/textures/area-lut.png";
|
||||||
import {Matrix2D, Point2D, Rect, Size2D, Vector3D, approxEq, cross, lerp} from "./geometry";
|
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 {SVGPath, TILE_SIZE, TileDebugger, Tiler, testIntervals, TileStrip} from "./tiling";
|
||||||
import {staticCast, unwrapNull} from "./util";
|
import {staticCast, unwrapNull} from "./util";
|
||||||
|
|
||||||
const SVGPath: (path: string) => SVGPath = require('svgpath');
|
const SVGPath: (path: string) => SVGPath = require('svgpath');
|
||||||
const parseColor: (color: string) => any = require('parse-color');
|
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";
|
const SVG_NS: string = "http://www.w3.org/2000/svg";
|
||||||
|
|
||||||
|
@ -475,6 +475,7 @@ class Scene {
|
||||||
|
|
||||||
//const tileDebugger = new TileDebugger(document);
|
//const tileDebugger = new TileDebugger(document);
|
||||||
|
|
||||||
|
let fillCount = 0, strokeCount = 0;
|
||||||
const paths: SVGPath[] = [];
|
const paths: SVGPath[] = [];
|
||||||
for (let pathElementIndex = 0;
|
for (let pathElementIndex = 0;
|
||||||
pathElementIndex < pathElements.length;
|
pathElementIndex < pathElements.length;
|
||||||
|
@ -484,9 +485,11 @@ class Scene {
|
||||||
|
|
||||||
const style = window.getComputedStyle(pathElement);
|
const style = window.getComputedStyle(pathElement);
|
||||||
if (style.fill != null && style.fill !== 'none') {
|
if (style.fill != null && style.fill !== 'none') {
|
||||||
|
fillCount++;
|
||||||
this.addPath(paths, pathColors, style.fill, pathString);
|
this.addPath(paths, pathColors, style.fill, pathString);
|
||||||
}
|
}
|
||||||
if (style.stroke != null && style.stroke !== 'none') {
|
if (style.stroke != null && style.stroke !== 'none') {
|
||||||
|
strokeCount++;
|
||||||
/*
|
/*
|
||||||
const strokeWidth =
|
const strokeWidth =
|
||||||
style.strokeWidth == null ? 1.0 : parseFloat(style.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();
|
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):
|
function waitForQuery(gl: WebGL2RenderingContext, disjointTimerQueryExt: any, query: WebGLQuery):
|
||||||
void {
|
void {
|
||||||
const queryResultAvailable = disjointTimerQueryExt.QUERY_RESULT_AVAILABLE_EXT;
|
const queryResultAvailable = disjointTimerQueryExt.QUERY_RESULT_AVAILABLE_EXT;
|
||||||
|
|
Loading…
Reference in New Issue