How to remove a path duplicate created by pressure sensitive pens?

问题

I am new to svg and js. I have some svg files that have been drawn using pressure sensitive pens, and they have paths with fills inside them and are having duplicated paths( to contain the fills). In Illustrator you can select the entire paths, and then change the pen to basic pen( no pressure sensitivity) and this changes the paths to simple paths(paths with no duplicated paths for each line). The below svg example shows that each line is having 2 paths in parallel:

http://jsfiddle.net/Y35sV/10/

https://dl.dropboxusercontent.com/u/140225334/face.svg

I was thinking about changing the d attribute of each path using snap svg.Note that the small path has been manually cut to be a single path.

path.attr({

'd' = 'value'

});// Any ideas on how to get the right value for the d?

How is it possible to remove the second path for each line the same way that Illustrator would do, but programatically using js please?

Any ideas would be greatly appreciated.

****Update:

I did some research and played around with the problem and here is my findings:

1- I need to turn all the subpaths to paths and also convert all paths toAbsolute values.( this part is being done by Ian already)

here : http://jsbin.com/fiwofukitegu/2/edit

2- Then I should count the number of C's for each path segment and have a check function to check if the number of the C commands are even or odd numbers,

something like this:

for each M 
var cValue =C. count();
function isEven(value) {
    if (value%2 == 0)
        return true;
    else
        return false;
}

3- I practically and manually have checked this:

if the the number of the C's in each path segment is even number like 2 ,4, 6,8,10,... I should count them first and then remove from 2, 3, 4,5,6 C's and their following digits.

4- if the the number of the C's in each path segment is odd number

like 1, 3,5,7,9,...I should count them first and then remove from 1,2,3,4,5 C's and their following digits.

then the result will be a path segment with only one line , not duplicated line.

I greatly appreciated Anyone who is a js expert and is willing to help to make this work!

回答1:

I think you have to parse your "d" path. for this purpose, you can see how it is done in snapjs or use some code like this one https://github.com/jkroso/parse-svg-path

/* jkroso/parse-svg-path */



var parseSvgPath = function(path){

/**
* expected argument lengths
* @type {Object}
*/
    this.length = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0};
    /**
    * segment pattern
    * @type {RegExp}
    */
    this.segment = /([astvzqmhlc])([^astvzqmhlc]*)/ig;

    this.parseValues = function(args){
        args = args.match(/-?[.0-9]+(?:e[-+]?\d+)?/ig);
        return args ? args.map(Number) : [];
    };

    /**
    * parse an svg path data string. Generates an Array
    * of commands where each command is an Array of the
    * form `[command, arg1, arg2, ...]`
    *
    * @param {String} path
    * @return {Array}
    */
this.parse = function(path) {
    var data = [];
    path.replace(this.segment, function(_, command, args){
        var type = command.toLowerCase();
        args = this.parseValues(args);
        // overloaded moveTo
        if (type == 'm' && args.length > 2) {
            data.push([command].concat(args.splice(0, 2)));
            type = 'l';
            command = command == 'm' ? 'l' : 'L';
        }
        while (true) {
            if (args.length == this.length[type]) {
                args.unshift(command);
                return data.push(args);
            }
            if (args.length < this.length[type]) throw new Error('malformed path data');
            data.push([command].concat(args.splice(0, this.length[type])));
        }
    })
    return data;
    };

    return this.parse(path);
};

来源：https://stackoverflow.com/questions/20847767/how-to-remove-a-path-duplicate-created-by-pressure-sensitive-pens

标签

javascript

svg

raphael

snap.svg