vh/vtracer
1
0
Fork 0
mirror of https://github.com/visioncortex/vtracer.git synced 2025-12-06 17:15:41 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

SVG path string numeric precision

Browse Source
This commit is contained in:
Bobby Ng
2021-07-23 23:35:45 +08:00
committed by Chris Tsang
parent 9ce7df176a
commit d0593e716a
10 changed files with 74 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cmdapp/Cargo.toml
View File

@@ -13,4 +13,4 @@ keywords = ["svg", "computer-graphics"]
[dependencies]
clap = "2.33.3"
image = "0.23.10"
visioncortex = "0.4.0"
visioncortex = "0.6.0"

35
cmdapp/src/config.rs
View File

@@ -33,6 +33,7 @@ pub struct Config {
pub length_threshold: f64,
pub max_iterations: usize,
pub splice_threshold: i32,
pub path_precision: Option<u32>,
}
pub(crate) struct ConverterConfig {
@@ -48,6 +49,7 @@ pub(crate) struct ConverterConfig {
pub length_threshold: f64,
pub max_iterations: usize,
pub splice_threshold: f64,
pub path_precision: Option<u32>,
}
impl Default for Config {
@@ -65,6 +67,7 @@ impl Default for Config {
length_threshold: 4.0,
splice_threshold: 45,
max_iterations: 10,
path_precision: Some(8),
}
}
}
@@ -194,6 +197,11 @@ impl Config {
.takes_value(true)
.help("Curver fitting mode `pixel`, `polygon`, `spline`"));
let app = app.arg(Arg::with_name("path_precision")
.long("path_precision")
.takes_value(true)
.help("Number of deciaml places to use in path string"));
// Extract matches
let matches = app.get_matches();
@@ -225,7 +233,7 @@ impl Config {
} else if value == "spline" {
"spline"
} else {
panic!("Parser Error: Curve fitting mode is invalid with value {}", value);
panic!("Parser Error: Curve fitting mode is invalid: {}", value);
});
}
@@ -237,7 +245,7 @@ impl Config {
}
config.filter_speckle = value;
} else {
panic!("Parser Error: Filter speckle is not a positive integer with value {}.", value);
panic!("Parser Error: Filter speckle is not a positive integer: {}.", value);
}
}
@@ -249,7 +257,7 @@ impl Config {
}
config.color_precision = value;
} else {
panic!("Parser Error: Color precision is not an integer with value {}.", value);
panic!("Parser Error: Color precision is not an integer: {}.", value);
}
}
@@ -261,7 +269,7 @@ impl Config {
}
config.layer_difference = value;
} else {
panic!("Parser Error: Gradient step is not an integer with value {}.", value);
panic!("Parser Error: Gradient step is not an integer: {}.", value);
}
}
@@ -273,7 +281,7 @@ impl Config {
}
config.corner_threshold = value
} else {
panic!("Parser Error: Corner threshold is not numeric with value {}.", value);
panic!("Parser Error: Corner threshold is not numeric: {}.", value);
}
}
@@ -285,7 +293,7 @@ impl Config {
}
config.length_threshold = value;
} else {
panic!("Parser Error: Segment length is not numeric with value {}.", value);
panic!("Parser Error: Segment length is not numeric: {}.", value);
}
}
@@ -297,7 +305,16 @@ impl Config {
}
config.splice_threshold = value;
} else {
panic!("Parser Error: Segment length is not numeric with value {}.", value);
panic!("Parser Error: Segment length is not numeric: {}.", value);
}
}
if let Some(value) = matches.value_of("path_precision") {
if value.trim().parse::<u32>().is_ok() { // is numeric
let value = value.trim().parse::<u32>().ok();
config.path_precision = value;
} else {
panic!("Parser Error: Path precision is not an unsigned integer: {}.", value);
}
}
@@ -321,6 +338,7 @@ impl Config {
length_threshold: 4.0,
max_iterations: 10,
splice_threshold: 45,
path_precision: Some(8),
},
Preset::Poster => Self {
input_path,
@@ -335,6 +353,7 @@ impl Config {
length_threshold: 4.0,
max_iterations: 10,
splice_threshold: 45,
path_precision: Some(8),
},
Preset::Photo => Self {
input_path,
@@ -349,6 +368,7 @@ impl Config {
length_threshold: 4.0,
max_iterations: 10,
splice_threshold: 45,
path_precision: Some(8),
}
}
}
@@ -367,6 +387,7 @@ impl Config {
length_threshold: self.length_threshold,
max_iterations: self.max_iterations,
splice_threshold: deg2rad(self.splice_threshold),
path_precision: self.path_precision,
}
}
}

4
cmdapp/src/converter.rs
View File

@@ -74,7 +74,7 @@ fn color_image_to_svg(config: ConverterConfig) -> Result<(), String> {
config.max_iterations,
config.splice_threshold
);
svg.add_path(paths, cluster.residue_color());
svg.add_path(paths, cluster.residue_color(), config.path_precision);
}
write_svg(svg, config.output_path)
@@ -106,7 +106,7 @@ fn binary_image_to_svg(config: ConverterConfig) -> Result<(), String> {
config.max_iterations,
config.splice_threshold,
);
svg.add_path(paths, Color::color(&ColorName::Black));
svg.add_path(paths, Color::color(&ColorName::Black), config.path_precision);
}
}

6
cmdapp/src/svg.rs
View File

@@ -10,6 +10,7 @@ pub struct SvgFile {
pub struct SvgPath {
pub path: CompoundPath,
pub color: Color,
pub path_precision: Option<u32>,
}
impl SvgFile {
@@ -21,10 +22,11 @@ impl SvgFile {
}
}
pub fn add_path(&mut self, path: CompoundPath, color: Color) {
pub fn add_path(&mut self, path: CompoundPath, color: Color, path_precision: Option<u32>) {
self.paths.push(SvgPath {
path,
color,
path_precision,
})
}
}
@@ -47,7 +49,7 @@ impl fmt::Display for SvgFile {
impl fmt::Display for SvgPath {
fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
let (string, offset) = self.path.to_svg_string(true, PointF64::default());
let (string, offset) = self.path.to_svg_string(true, PointF64::default(), self.path_precision);
writeln!(
f, "<path d=\"{}\" fill=\"{}\" transform=\"translate({},{})\"/>",
string, self.color.to_hex_string(),

2
webapp/Cargo.toml
View File

@@ -22,7 +22,7 @@ console_log = { version = "0.2", features = ["color"] }
wasm-bindgen = { version = "0.2", features = ["serde-serialize"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
visioncortex = "0.4.0"
visioncortex = "0.6.0"
# The `console_error_panic_hook` crate provides better debugging of panics by
# logging them with `console.error`. This is great for development, but requires

13
webapp/app/index.html
View File

@@ -185,6 +185,19 @@
<input id="splice" type="range" min="0" max="180" step="1" value="45">
</div>
<div style="display: none">
<div class="spline-options">
<div title="Number of decimal places used in svg path string">
Path Precision <span>(More digits)</span>
</div>
</div>
<div id="pathprecisionvalue" class="spline-options">
8
</div>
<div class="spline-options">
<input id="pathprecision" class="uk-range" type="range" min="0" max="16" step="1" value="8">
</div>
</div>
</div>
</div>
<script src="./bootstrap.js"></script>

21
webapp/app/index.js
View File

@@ -52,6 +52,7 @@ var presetConfigs = [
clustering_hierarchical: 'stacked',
filter_speckle: 4,
color_precision: 6,
path_precision: 8,
layer_difference: 16,
mode: 'spline',
corner_threshold: 60,
@@ -66,6 +67,7 @@ var presetConfigs = [
clustering_hierarchical: 'stacked',
filter_speckle: 4,
color_precision: 8,
path_precision: 8,
layer_difference: 25,
mode: 'spline',
corner_threshold: 60,
@@ -77,9 +79,10 @@ var presetConfigs = [
{
src: 'assets/samples/Gum Tree Vector.jpg',
clustering_mode: 'color',
clustering_hierarchical: 'cutout',
clustering_hierarchical: 'stacked',
filter_speckle: 4,
color_precision: 8,
path_precision: 8,
layer_difference: 28,
mode: 'spline',
corner_threshold: 60,
@@ -94,6 +97,7 @@ var presetConfigs = [
clustering_hierarchical: 'stacked',
filter_speckle: 8,
color_precision: 7,
path_precision: 8,
layer_difference: 64,
mode: 'spline',
corner_threshold: 60,
@@ -108,6 +112,7 @@ var presetConfigs = [
clustering_hierarchical: 'stacked',
filter_speckle: 10,
color_precision: 8,
path_precision: 8,
layer_difference: 48,
mode: 'spline',
corner_threshold: 180,
@@ -122,6 +127,7 @@ var presetConfigs = [
clustering_hierarchical: 'stacked',
filter_speckle: 0,
color_precision: 8,
path_precision: 8,
layer_difference: 0,
mode: 'none',
corner_threshold: 180,
@@ -178,6 +184,9 @@ function loadConfig(config) {
document.getElementById('layerdifferencevalue').innerHTML = globallayerdifference;
document.getElementById('layerdifference').value = globallayerdifference;
globalpathprecision = config.path_precision;
document.getElementById('pathprecisionvalue').innerHTML = globalpathprecision;
document.getElementById('pathprecision').value = globalpathprecision;
}
// Choose template from gallery
@@ -244,7 +253,8 @@ var globalcorner = parseInt(document.getElementById('corner').value),
globalsplice = parseInt(document.getElementById('splice').value),
globalfilterspeckle = parseInt(document.getElementById('filterspeckle').value),
globalcolorprecision = parseInt(document.getElementById('colorprecision').value),
globallayerdifference = parseInt(document.getElementById('layerdifference').value);
globallayerdifference = parseInt(document.getElementById('layerdifference').value),
globalpathprecision = parseInt(document.getElementById('pathprecision').value);
// Load past inputs from localStorage
/*
@@ -327,6 +337,12 @@ document.getElementById('splice').addEventListener('change', function (e) {
restart();
});
document.getElementById('pathprecision').addEventListener('change', function (e) {
globalpathprecision = parseInt(this.value);
document.getElementById('pathprecisionvalue').innerHTML = this.value;
restart();
});
// Save inputs before unloading
/*
window.addEventListener('beforeunload', function () {
@@ -404,6 +420,7 @@ function restart() {
'filter_speckle': globalfilterspeckle*globalfilterspeckle,
'color_precision': 8-globalcolorprecision,
'layer_difference': globallayerdifference,
'path_precision': globalpathprecision,
});
if (runner) {
runner.stop();

2
webapp/src/conversion/binary_image.rs
View File

@@ -17,6 +17,7 @@ pub struct BinaryImageConverterParams {
pub max_iterations: usize,
pub splice_threshold: f64,
pub filter_speckle: usize,
pub path_precision: u32,
}
#[wasm_bindgen]
@@ -80,6 +81,7 @@ impl BinaryImageConverter {
self.svg.prepend_path(
&paths,
&color,
Some(self.params.path_precision),
);
}
self.counter += 1;

2
webapp/src/conversion/color_image.rs
View File

@@ -21,6 +21,7 @@ pub struct ColorImageConverterParams {
pub filter_speckle: usize,
pub color_precision: i32,
pub layer_difference: i32,
pub path_precision: u32,
}
#[wasm_bindgen]
@@ -137,6 +138,7 @@ impl ColorImageConverter {
self.svg.prepend_path(
&paths,
&cluster.residue_color(),
Some(self.params.path_precision),
);
self.counter += 1;
false

4
webapp/src/svg.rs
View File

@@ -13,11 +13,11 @@ impl Svg {
Self { element }
}
pub fn prepend_path(&mut self, paths: &CompoundPath, color: &Color) {
pub fn prepend_path(&mut self, paths: &CompoundPath, color: &Color, precision: Option<u32>) {
let path = document()
.create_element_ns(Some("http://www.w3.org/2000/svg"), "path")
.unwrap();
let (string, offset) = paths.to_svg_string(true, PointF64::default());
let (string, offset) = paths.to_svg_string(true, PointF64::default(), precision);
path.set_attribute("d", &string).unwrap();
path.set_attribute(
"transform",