Soporte para trazo de espesor variable

Question

¿Existen estándares de gráficos vectoriales que admitan trazados / trazos de grosor variable, por ejemplo, desde una entrada de lápiz?

Puede ser aceptable cierta cantidad de suavizado. Asumiría que la mejor manera de almacenarlo sería como una ruta regular (por ejemplo, esto ) y luego información de grosor disperso por puntos en varios puntos de la ruta, con gradientes entre ellos.

He mirado SVG pero no parece haber un elemento que pueda soportarlo. ¿Existen estándares de gráficos vectoriales que puedan hacerlo?

Answer 1

Un solo camino como se implementa actualmente no permite un espesor variable. Existe una propuesta de W3.org para el estándar SVG , pero hasta ahora no se ha implementado en SVG puro.

Hay varias implementaciones de una "ruta con grosor variable", pero que se basa en objetos svg (por ejemplo, múltiples rutas) y funciones de c ++ o javascript.

• PowerStroke es una implementación de tal idea de un trazo de espesor variable en Inkscape. Una buena entrada a la fuente en c ++ está aquí .

Hay otras implementaciones en SVG y javascript, que se basan en múltiples rutas:

• Tubefy , un conjunto de pocas funciones js, el principio se basa en una interpolación lineal. Existen varias implementaciones de Tubefy, la más simple es:

   $ = 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() + ")";
   }
  

• Ancho de trazo variable , basado en múltiples rutas, que podría ser la mejor respuesta a sus necesidades.

En uno de los ejemplos, la función js usa Tubefy y se implementa directamente en el archivo 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>

Answer 2

Desafortunadamente, esto se ha propuesto pero no se ha desarrollado más como un estándar SVG:

https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke

Su mejor opción sería generar su propia curva de contorno en función de la curva interior deseada y los anchos de trazo.

Adobe Illustrator hace esto cuando usa su herramienta de ancho, e Inkscape tiene una función que también lo hace.

Entonces, técnicamente, para responder a su pregunta, el formato de archivo .ai guarda la información del ancho del trazo, pero cuando se exporta a SVG es una ruta cerrada con relleno.