¿Es posible desenfocar un elemento de ruta cerrada que tiene un relleno usando paperjs? ¿Tendría que crear una primitiva SVG feGaussianBlur para cada ruta que quisiera desenfocar? ¿Cómo afectaría eso al rendimiento si hubiera unos pocos cientos de elementos de ruta en el lienzo? Pensé en hacer uso de shadowBlur con algo de magia de color, donde la sombra coincidiría con la ruta seleccionada, pero no es exactamente el mismo efecto. No quiero usar raster.
Un truco podría ser usar la propiedad shadowBlur del elemento.
Lo único es que la sombra solo se dibuja si el elemento tiene relleno.
Y no queremos que se muestre el relleno sino solo la sombra.
Entonces podríamos hacer un uso inteligente de los modos de fusión para ocultar el relleno pero no la sombra.
Aquí hay un boceto simple que demuestra esto.
new Path.Circle({ center: view.center, radius: 50, shadowColor: 'black', shadowBlur: 20, selected: true, // set a fill color to make sure that the shadow is displayed fillColor: 'white', // use blendmode to hide the fill and only see the shadow blendMode: 'multiply', }); De hecho, esta técnica parece llegar a un límite cuando se trata de apilar elementos uno encima del otro.
Podemos evitar que el modo de mezcla multiply "se desvanezca" envolviendo el elemento en un grupo que tenga un modo de mezcla de source-over . Esto tiene el efecto de abarcar los modos de mezcla secundarios.
Pero todavía hay un truco para encontrar para componer los elementos juntos.
Aquí hay un boceto que demuestra dónde detuve mi investigación.
Estoy bastante seguro de que puede encontrar una solución siguiendo esta pista.
function drawBlurryCircle(center, radius, blurAmount, color) { const circle = new Path.Circle({ center, radius, shadowColor: color, shadowBlur: blurAmount, // set a fill color to make sure that the shadow is displayed fillColor: 'white', // use blendmode to hide the fill and only see the shadow blendMode: 'multiply' }); const blurPlaceholder = circle .clone() .set({ shadowColor: null, fillColor: null }) .scale((circle.bounds.width + (blurAmount * 2)) / circle.bounds.width); return new Group({ children: [circle, blurPlaceholder], blendMode: 'source-over' }); } drawBlurryCircle(view.center, 50, 20, 'red'); drawBlurryCircle(view.center + 30, 40, 30, 'lime'); drawBlurryCircle(view.center + 60, 30, 30, 'blue');