如何将 SVG 中的 feGaussianBlur 转换为 JavaFX 中的 GaussianBlur 效果?
Posted
技术标签:
【中文标题】如何将 SVG 中的 feGaussianBlur 转换为 JavaFX 中的 GaussianBlur 效果?【英文标题】:How to convert a feGaussianBlur in SVG to a GaussianBlur effect in JavaFX? 【发布时间】:2021-12-20 20:24:00 【问题描述】:我正在开发一个库 (fxsvgimage),用于在 JavaFX 中显示 SVG 图像。我在实现过滤器的过程中,我有一个关于 feGaussianBlur 过滤器的问题:是否可以将 feGaussianBlur 的stdDeviation
参数可靠地转换为 GaussianBlur 效果的radius
参数?
似乎如果我使用相同的值,JavaFX 中的结果比 SVG 中的模糊度要低。例如,如果我使用这个 svg 图片:
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156.364 147.239">
<filter id="blur-shadow">
<feGaussianBlur stdDeviation="3" />
</filter>
<style>.st0fill:#DEDEDE; .st1fill:#3E295E; .st2fill:#FFFFFF; .st3fill:#429946; .st4fill:#F5EB30;</style>
<g filter="url(#blur-shadow)">
<path class="st0" d="M149.18 34.834c-1.763-.91-4.134-.674-6.548.092-10.262 1.984-17.453 12.88-17.453 12.88s-8.05 1.577-12.96 2.358c10.125-3.084 24.564-9.366 21.786-22.434-1.268-5.97-8.025-6.787-13.127-6.463-6.048.384-11.54 2.974-16.475 6.358-2.884 1.978-4.76 4.745-7.837 6.526-.006 0-.013-.004-.02-.007-.462-3.778-1.33-10.193-2.626-17.04-2.042-10.79-20.226-2.148-25.08 1.727-4.855 3.876-13.762-2.594-22.162 1.525-4.757 2.333-3.22 10.92-.994 17.93-5.432-.777-10.88-1.32-16.39-.896-9.97.764-22.917 7.744-19.078 19.653l.1.304c3.498 10.17 19.07 13.142 28.376 13.244.173.003.345.003.518.002 2.115-.01 4.253-.143 6.395-.376-.064 1.434-.174 2.864-.58 4.266-.17.58-.307 1.142-.43 1.7-5.75-2.656-17.935-7.27-26.095-3.19-11 5.5-13.6 14.1-13.6 14.1s16.4 4.6 25 5.4c4.973.462 7.865-.48 9.425-1.356-4.118 3.43-14.906 13.63-14.826 26.254 0 0 18.656-6.395 25.547-18.147l.02.034c.977 2.207 2.092 4.147 3.903 6.133l.046.067c5.166 7.335 10.387 14.63 15.65 21.896 3.747 5.172 8.444 10.05 10.103 16.208 7.312-4.96 12.66-12.077 19.427-17.57 3.678-2.986 7.084-5.738 9.576-9.95 1.612-2.726 2.412-5.904 4.143-8.554 1.717-2.63 4.17-4.03 6.41-6.102 5.57-5.157 10.444-11.597 15.22-17.483 5.818-7.165 12.75-14.346 15.697-23.296 1.704-5.17 5.88-22.205-1.063-25.79z"/>
<path class="st1" d="M48.514 44.41S37.29 20.786 45.692 16.666c8.4-4.12 17.308 2.35 22.163-1.525 4.854-3.875 23.04-12.518 25.08-1.726 2.042 10.792 3.024 20.522 3.024 20.522L48.513 44.41z"/>
<path class="st1" d="M47.275 54.935c-1.746 1.45-4.162 5.82-5.43 2.113-.565-1.648.767-4.317 1.387-5.774 1.4-3.29 3.403-7.09 5.934-9.613 6.194-6.172 13.696-10.795 22.266-12.356 10.006-1.822 26.644-2.166 32.58 7.943-1.524 1.615-4.11 1.254-6.154 1.46-4.975.503-9.97 1.322-14.884 2.25-8.597 1.62-16.594 3.387-24.397 7.305-3.872 1.943-7.958 3.897-11.302 6.673z"/>
<path class="st2" d="M53.065 44.975c-1.2.828-2.797 3.226-3.788 1.303-.44-.855.435-2.315.835-3.11.907-1.79 2.23-3.874 3.956-5.296 4.225-3.48 9.415-6.185 15.438-7.3 7.03-1.304 18.79-2.045 23.244 3.117-1.038.906-2.876.8-4.318.98-3.505.433-7.017 1.035-10.47 1.69-6.04 1.15-11.65 2.356-17.07 4.695-2.69 1.163-5.532 2.336-7.827 3.92z"/>
<path class="st1" d="M9.23 53.353c-3.84-11.91 9.11-18.89 19.078-19.654 10.908-.84 21.567 2.104 32.34 3.17 4.47.444 8.984.638 13.46.19 7.78-.777 14.192-2.672 21.123-6.387 3.297-1.767 5.193-4.683 8.188-6.738 4.934-3.385 10.426-5.975 16.474-6.358 5.102-.324 11.858.494 13.127 6.463 2.895 13.62-12.918 19.873-23.05 22.812-4.49 1.302-8.826 3.556-13.305 5.083-9.54 3.253-20.404 4.374-29.536 8.43-8.87 3.938-19.136 6.495-28.905 6.538h-.518C28.4 66.8 12.83 63.827 9.332 53.657c-.036-.103-.07-.204-.102-.305z"/>
<path class="st1" d="M71.954 40.42c-.674-.042-1.354-.04-2.042.027-11.94 1.147-21.738 8.624-24.74 20.434-.825 3.252-.19 6.657-1.134 9.91-1.077 3.713-1.236 6.87-.598 10.71.352 2.118.803 4.11 1.606 6.103.7 1.736 2.074 3.128 2.76 4.884 1.5 3.835 2.684 6.693 5.638 9.742 4.74 4.892 10.302 8.76 15.022 13.695 3.335 3.488 5.977 6.998 8.704 10.948 2.706 3.92 3.293.213 5.455-2.683 5.29-7.084 11.808-13.878 17.65-20.26 3.97-4.334 5.623-8.78 7.548-14.28 1.69-4.827 4.334-7.498 7.958-11.118 1.905-1.9 3.068-4.387 4.935-6.314 2.27-2.343 5.334-3.523 8.17-5.008 3.186-1.672 5.976-3.945 8.897-6.02 2.37-1.684 4.818-3.34 6.672-5.615 2.005-2.46 3.283-5.488 4.335-8.453.7-1.976 1.362-3.8 1.56-5.895.236-2.504.962-5.457-.3-7.825-1.31-2.46-4.706-2.65-7.112-2.373-10.947 1.257-18.747 13.084-18.747 13.084s-12.83 2.515-15.976 2.766c-4.583.366-4.358-1.523-6.45-4.828-2.28-3.598-7.27-3.285-10.918-2.476-3.666.814-6.038 3.18-9.987 2.59-2.996-.446-5.89-1.553-8.906-1.745z"/>
<path class="st3" d="M123.417 52.3c1.146-.056 2.807 1.233 3.806 1.723.586.288.935.576 1.11.86 8.192-7.585 14.485-7.868 17.428-7.402 3.457-9.133 2.724-18.51-8.36-12.3-.086.05-.167.1-.252.15 1.014.693 1.382 2.736.806 4.926-.652 2.48-2.266 4.207-3.605 3.856-1.34-.353-1.895-2.65-1.244-5.13.126-.48.29-.93.478-1.345-8.02 5.9-10.273 12.767-10.273 12.767l-.377-4.027s-2.64 1.636-17.36 2.39c-4.575.236-10.343.916-14.362 3.27-3.872 2.267-6.598 6.035-10.702 7.994-3.466 1.655-6.385 2.345-10.102 1.143-3.986-1.29-7.342-3.79-11.708-1.483 4.056-4.517 13.172-5.255 18.77-4.347 2.604.423 5.304 1.292 7.724-.55 1.48-1.126 2.255-3.306 1.53-5.077-.877-2.14-2.595-1.842-4.498-2.308-4.683-1.145-8.73-3.78-13.757-2.79-6.58 1.296-12.49 5.987-16.57 11.148-2.968 3.75-3.617 7.155-4.643 11.6-1.206 5.222-2.315 10.52.07 15.622 4.53 9.687 19.877 15.348 31.577 6.416 0 0-2.137 4.403-8.93 6.29 0 0 18.493-1.005 27.676-6.542 9.184-5.535 15.852-14.34 15.852-14.34s-9.31 3.144-16.733 8.303c0 0 10.945-8.43 16.733-11.07 5.5-2.51 26.437-13.995 31.53-23.012-1.505-.32-4.764-.468-9.498 2.247-.357.205-.695.408-1.02.61.2.968.346 2.888.334 3.092-.062 1.07-.025 2.622-.69 3.537-1.738 2.393-2.19-2.408-4.02-3.47-3.062 2.443-5.996 4.883-13.618 7.72-.892.334-1.88.696-2.932 1.08-.09.97-.333 2.338-.382 2.497-.305.967-.632 2.396-1.452 3.08-2.058 1.713-1.5-2.353-2.708-3.922-3.93 1.426-8.346 3.027-12.63 4.627-.085.972-.338 2.405-.39 2.568-.303.965-.63 2.397-1.45 3.08-2.062 1.717-1.5-2.366-2.716-3.93-7.707 2.95-14.147 5.66-15.19 6.935-2.2 2.69.61 7.578-2.445 7.946-3.055.367-2.076-3.91-2.076-3.91.734-4.354 6.043-7.69 13.196-10.62.096-1.974-2.062-4.997.463-4.506 1.127.22 2.43 1.87 3.28 2.586.143.12.26.232.366.342 4.087-1.48 8.55-2.88 12.986-4.286.59-1.91-2.2-5.53.546-4.994 1.126.22 2.43 1.87 3.28 2.585.41.345.67.652.803.927.05-.015.1-.033.148-.05l-.082-.026c.19-.034.372-.087.56-.128 6.032-1.977 11.704-4.038 15.952-6.42 2.004-1.87-3.505-5.764-.225-5.93z"/>
<path class="st4" d="M145.027 49.032c-.96-.203-2.637-.335-4.952.3-1.82.722-3.56 1.523-5.266 2.377-.098.058-.205.118-.3.178.2.968.346 2.888.334 3.092-.062 1.07-.025 2.622-.69 3.537-1.738 2.394-2.19-2.407-4.02-3.468-3.062 2.44-5.996 4.88-13.618 7.72-.892.332-1.88.694-2.932 1.08-.09.97-.333 2.336-.382 2.495-.305.967-.632 2.396-1.452 3.08-2.058 1.713-1.5-2.353-2.708-3.922-3.93 1.426-8.346 3.027-12.63 4.627-.085.972-.338 2.405-.39 2.568-.303.965-.63 2.397-1.45 3.08-2.062 1.717-1.5-2.366-2.716-3.93-7.707 2.95-14.147 5.66-15.19 6.935-2.2 2.69.61 7.578-2.445 7.946-1.977.235-2.263-1.47-2.22-2.705-3.035 2.15-10.978 3.108-8.62 9.695 5.107.593 10.632-.584 15.52-4.316 0 0-2.137 4.403-8.93 6.29 0 0 18.493-1.005 27.676-6.542 9.184-5.535 15.852-14.34 15.852-14.34s-9.31 3.144-16.733 8.303c0 0 10.945-8.43 16.733-11.07 5.5-2.512 26.437-13.997 31.53-23.013z"/>
<path class="st2" d="M71.863 60.182c-1.31-.102-2.574-.5-3.575-1.312-.438-.356-1.08-1.02-.82-1.668.333-.825 1.657-.5 2.36-.453 1.41.095 1.7 1.408 2.802 2.23-.013-.01.592-1.752.752-1.886.663-.553 2.447-.12 3.22-.024 2.657.327 1.124 1.932-.383 2.483-1.305.478-2.863.746-4.357.63z"/>
<path class="st3" d="M94.924 48.59c-1.24.477-4.767 3.145-4.713.465.032-1.52.863-3.392 1.647-4.678 1.226-2.01 4.08-2.646 6.23-1.812 1.508.585 3.855 2.724 2.29 4.277-1.38 1.367-3.71 1.078-5.453 1.75z"/>
<path class="st1" d="M95.552 50.233s-6.52 4.645-17.504 14.202c-10.985 9.558-33.368 8.75-33.368 8.75s-5.484 8.964 8.35 28.602c5.165 7.335 10.386 14.63 15.65 21.896 3.747 5.17 8.444 10.05 10.103 16.208 7.313-4.96 12.66-12.077 19.428-17.57 3.68-2.986 7.085-5.738 9.577-9.95 1.612-2.726 2.412-5.904 4.143-8.554 1.717-2.63 4.17-4.03 6.41-6.1 5.57-5.158 10.444-11.598 15.222-17.484 5.817-7.166 12.75-14.347 15.696-23.297 1.703-5.172 5.88-22.207-1.064-25.792-4.33-2.232-12.323 2.38-15.63 5.027-2.678 2.144-7.06 8.546-10.396 9.16-.08.016-19.175 3.534-19.175 3.534l-5.76.017-1.68 1.353z"/>
<path class="st4" d="M80.525 132.647c.222-.208-10.082-13.848-10.795-14.835-2.476-3.434-5.204-6.81-7.412-10.42-1.853-3.028-2.482-6.538-2.822-10.027-.152-1.567-1.383-5.96 1.498-5.4 1.773.345 4.04 2.61 5.49 3.657 1.21.875 2.514 1.53 3.743 2.344-1.168-1.793-2.148-3.726-3.118-5.643-1.65-3.253-3.84-6.12-5.716-9.22-.977-1.616-1.99-3.508-2.326-5.38-.546-3.047 1.793-2.39 4.074-2.853 6.515-1.323 13.243-3.57 18.336-8 3.14-2.733 6.323-5.42 9.56-8.04 3.6-2.915 8.1-7.232 13.102-7.996 4.782-.73 10.382-.843 15.318-1.193 2.22-.156 1.872 1.97 1.554 3.782-.558 3.174-2.4 6.314-4.425 8.79 3.055-2.076 5.637-5.315 7.287-8.583 3.7-7.333 9.74-14.243 17.604-17.4 8.268-3.313 5.57 11.09 4.946 15.31-1.446 9.758-9.358 20.89-16.818 26.996-4.71 3.855-9.554 7.53-14.576 10.95-4.25 2.892-8.547 6.166-12.982 8.736-3.37 1.953-6.965 3.546-10.617 4.975-4.036 1.58-14.33 6.128-16.863.135 1.38 3.833 1.752 6.657 6.44 7.9 3.542.937 7.864-.228 11.103-1.818 2.175-1.068 4.675-3.668 7.238-3.547 9.606.454-2.076 10.49-3.812 12.218-4.94 4.92-9.936 9.784-15.01 14.562z"/>
<path class="st1" d="M46.837 74.102s-18.323-10.3-29.323-4.8c-11 5.5-13.6 14.1-13.6 14.1s16.4 4.6 25 5.4c8.6.8 10.998-2.6 10.998-2.6S23.415 98.1 23.514 113.698c0 0 22.56-7.73 27.23-21.815 4.67-14.084 3.67-18.284 3.67-18.284l-7.577.502z"/>
<path class="st4" d="M27.375 108.64c1.26-4.986 4.15-9.452 7.5-13.29 1.288-1.476 2.782-2.74 4.098-4.176 1.495-1.632 3.85-2.617 4.864-4.674.488-.99.875-2.07 1.2-3.125.354-1.15 1.12-2.497 1.16-3.66-2.724.252-5.423.586-8.212.586-3.635 0-7.423-.046-10.97-.026 4.964 1.398 10.194 1.794 15.163 3.02-1.185.763-2.606 1.063-3.966 1.406-2.116.533-4.606.993-6.785.993-.7 0-1.445-.036-2.215-.108-5.767-.536-15.407-2.91-20.688-4.29 1.615-2.566 4.746-6.26 10.434-9.105 1.692-.847 3.793-1.275 6.245-1.275 9.228 0 19.946 5.942 20.053 6.003l.835.468 5.027-.33c-.297 2.514-1.143 6.88-3.44 13.813-2.687 8.106-13.12 14.453-20.302 17.77z"/>
</g>
</svg>
stdDeviation
为 3,我在 SVG 中有这个:
这在 JavaFX 中通过使用 radius
的相同值:
【问题讨论】:
见Gaussian Blur—Standard Deviation, Radius and Kernel Size。 【参考方案1】:尝试将您的半径设置为2 * stdDeviation
。两者之间的关系通常是这样的。希望 JavaFX 也遵循该规则。
【讨论】:
谢谢,好多了!以上是关于如何将 SVG 中的 feGaussianBlur 转换为 JavaFX 中的 GaussianBlur 效果?的主要内容,如果未能解决你的问题,请参考以下文章