【问题标题】:How to remove a path duplicate created by pressure sensitive pens?如何删除由压敏笔创建的路径重复?
【发布时间】:2014-01-17 19:47:00
【问题描述】:

我是 svg 和 js 的新手。我有一些使用压敏笔绘制的 svg 文件,它们的路径内部带有填充,并且路径重复(包含填充)。在 Illustrator 中,您可以选择整个路径,然后将笔更改为基本笔(无压力感应),这会将路径更改为简单路径(每行没有重复路径的路径)。下面的 svg 示例显示每条线有 2 条并行路径:

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

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

我正在考虑使用 snap svg 更改每个路径的 d 属性。请注意,小路径已被手动剪切为单个路径。

path.attr({

'd' = 'value'

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

如何以与 Illustrator 相同的方式删除每行的第二条路径,但请以编程方式使用 js?

任何想法将不胜感激。

****更新:

我做了一些研究并解决了这个问题,这是我的发现:

1- 我需要将所有子路径转换为路径,并将所有路径转换为绝对值。(这部分已经由 Ian 完成)

这里:http://jsbin.com/fiwofukitegu/2/edit

2-然后我应该计算每个路径段的C的数量,并有一个检查功能来检查C命令的数量是偶数还是奇数,

类似这样的:

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

3- 我实际上手动检查了这个:

如果每个路径段中C的数量是偶数 比如 2 ,4, 6,8,10,... 我应该先数它们,然后从 2, 3, 4,5,6 C 及其后面的数字中删除。

4-如果每个路径段中C的数量是奇数

像 1, 3,5,7,9,...我应该先数它们,然后从 1,2,3,4,5 和它们后面的数字中删除。

那么结果将是一个只有一行的路径段,而不是重复的行。

我非常感谢任何 js 专家并愿意帮助完成这项工作的人!

【问题讨论】:

    标签: javascript svg raphael snap.svg


    【解决方案1】:

    我认为你必须解析你的“d”路径。 为此,您可以看到它是如何在 snapjs 中完成的 或使用一些像这样的代码 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);
    };
    

    【讨论】:

    • 您好,欢迎来到 SO!请从您的链接中复制/粘贴相关代码,因为它可能并不总是存在,如果有一天它消失了,您的回答将不再有用,谢谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-08-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-04
    • 2021-10-11
    相关资源
    最近更新 更多