vector-graphics - 支持可变粗细笔划

Question

是否有支持可变厚度路径/笔画的矢量图形标准，例如从手写笔输入:

一定程度的平滑可能是可以接受的。我假设最好的存储方式是将其存储为常规路径(例如 this )，然后在路径中的不同点处逐点稀疏厚度信息，它们之间具有梯度。

我看过 SVG，但似乎没有可以支持它的元素。是否有任何矢量图形标准可以？

Answer 1

当前实现的单一路径不允许可变厚度。有一个W3.org proposal for SVG standard , 但到目前为止还没有在纯 SVG 中实现。

“厚度可变的路径”有多种实现方式，但它依赖于 svg 对象(例如，多路径)和 C++ 或 javascript 函数。

• PowerStroke是 Inkscape 中可变粗细笔画这种想法的实现。 here 是一个很好的 C++ 源代码入口。 .

SVG和javascript中还有其他实现，依赖多路径:

• Tubefy ，一组几个js函数，原理是基于线性插值。 Tubefy有几种实现方式，最简单的是:

   $ = function (id) { return typeof id=='string'?document.getElementById(id):id };
   var root = document.rootElement;
  
   function lerp(p, a, b) { return Number(a)+(b-a)*p; }
  
   function lerpA(p, a, b) { var c=[];
       for(var i=0; i<a.length; i++) c[i]=lerp(p, a[i], b[i]);
       return c;
   }
  
   function toCss(a){ 
       for(var i=0; i<a.length; i++) a[i]=Math.round(a[i]);
       return "rgb(" + a.join() + ")";
   }
  

• Variable Stroke-Width ，基于多路径，这可能是满足您需求的最佳答案。

在其中一个例子中，js函数使用了Tubefy，直接在svg文件中实现:

<script>//<![CDATA[
    var op=1, op1=1;

    function vsw0(p0, n, g){    p0=$(p0);
        var SW=p0.getAttribute('stroke-widths').replace(/ /g,'').split(',');
        var T=p0.getTotalLength();
        var n_1=n-1,  dt=T/n, dash=(dt+1)+','+T;
        p0.setAttribute('stroke-dasharray', dash);

        for(var i=0; i<n; i++){ p=i/n_1;
            var sw=lerp(p, SW[0], SW[1]); // current stroke width
            var off=-i*dt; // current dash offset
            var c=toCss(lerpA(p, [255,0,0], [255,255,0])); // curr color

            var newP=p0.cloneNode(true);
            newP.setAttribute('style', 'stroke-width:'+sw+';stroke-dashoffset:'+off+';stroke:'+c);
            $(g).appendChild(newP);
        }
    }

    function f(){ $('abg').setAttribute('stroke', $('bg').getAttribute('fill')) }

//]]></script>
</svg>