经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
浣跨敤feDisplacementMap+feImage婊ら暅瀹炵幇姘存尝绾规晥鏋?璁$畻鍔ㄦ€佸€?_html5
来源:jb51  时间:2022/5/9 9:44:36  对本文有异议

璇ユ枃绔犲凡缁忚鐨勭壒鍒粏鑷翠簡锛岃绡囦粎浠ユ璁板綍鍔ㄦ晥杩囩▼涓悇鐐圭殑璁$畻銆?/p>

1.feDisplacementMap

feDisplacementMap 瀹為檯涓婃槸涓€涓綅缃浛鎹㈡护闀滐紝灏辨槸鏀瑰彉鍏冪礌鍜屽浘褰㈢殑鍍忕礌浣嶇疆鐨勩€傞亶鍘嗗師鍥惧舰鐨勬墍鏈夊儚绱犵偣锛屼娇鐢?code>feDisplacementMap閲嶆柊鏄犲皠鏇挎崲涓€涓柊鐨勪綅缃紝褰㈡垚涓€涓柊鐨勫浘褰€?code>feDisplacementMap婊ら暅鍦ㄤ笟鐣岀殑涓绘祦搴旂敤鏄鍥惧舰杩涜褰㈠彉锛屾壄鏇诧紝娑插寲銆?/p>

P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

· P'(x,y)鎸囩殑鏄浆鎹箣鍚庣殑x, y鍧愭爣銆?br /> · x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5)鎸囩殑鏄叿浣撶殑杞崲瑙勫垯銆?br /> · XC(x,y)琛ㄧず褰撳墠x,y鍧愭爣鍍忕礌鐐瑰叾X杞存柟鍚戜笂璁剧疆鐨勫搴旈€氶亾鐨勮绠楀€硷紝鑼冨洿鏄?~1銆?br /> · YC(x,y)琛ㄧず褰撳墠x,y鍧愭爣鍍忕礌鐐瑰叾Y杞存柟鍚戜笂璁剧疆鐨勫搴旈€氶亾鐨勮绠楀€硷紝鑼冨洿鏄?~1銆?br /> · -0.5鏄亸绉诲€硷紝鍥犳XC(x,y) - 0.5鑼冨洿鏄?code>-0.5~0.5锛?code>YC(x,y) - 0.5鑼冨洿涔熸槸-0.5~0.5銆?br /> · scale琛ㄧず璁$畻鍚庣殑鍋忕Щ鍊肩浉涔樼殑姣斾緥锛?code>scale瓒婂ぇ锛屽垯鍋忕Щ瓒婂ぇ銆?/p>

鍐嶇敤涓€鍙ヨ瘽瑙i噴灏辨槸锛屾牴鎹瀹氱殑閫氶亾棰滆壊瀵瑰師鍥剧殑x, y鍧愭爣杩涜鍋忕Щ銆?/p>

鍊?/th> 榛樿鍊?/th> 鍙栧€?/th> 璇存槑
xChannelSelector A A or R or G or B 瀵瑰簲XC(x,y),琛ㄧずX杞村潗鏍囦娇鐢ㄧ殑鏄摢涓鑹查€氶亾杩涜浣嶇疆鍋忕Щ
yChannelSelector A A or R or G or B 瀵瑰簲YC(x,y),琛ㄧずY杞村潗鏍囦娇鐢ㄧ殑鏄摢涓鑹查€氶亾杩涜浣嶇疆鍋忕Щ
color-interpolation-filters linearRGB linearRGB or sRGB 婊ら暅瀵归鑹茶繘琛岃绠楁椂鍊欓噰鐢ㄧ殑棰滆壊妯″紡绫诲瀷
scale 0 鍙鍙礋 缂╂斁姣斾緥 閫氬父浣跨敤姝f暟鍊煎鐞嗭紝鍊艰秺澶э紝鍋忕Щ瓒婂ぇ銆?/td>
in SourceGraphic SourceGraphic锛孲ourceAlpha锛孊ackgroundImage, BackgroundAlpha锛孎illPaint锛孲trokePaint锛屼互鍙婅嚜瀹氫箟鐨勬护闀滅殑鍘熷寮曠敤 鍘熷鍥惧舰
in2 鍏冪礌鐨剅esult灞炴€у€?/feimage> 鍚宨n 鐢ㄦ潵鏄犲皠鐨勫浘褰?/td>

2.閫氳繃feDisplacementMap鍜宖eImage瀹炵幇姘存尝鐗规晥

瀹炵幇姘存尝鏁堟灉閫氬父浣跨敤涓嬪浘

<svg id='svg' width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="filter-ripple" primitiveUnits='objectBoundingBox'>
            <feImage id='feImage' result="pict2" xlink:href="涓婅堪鍥剧墖鍦板潃"  x="0" y="0" width="100%" height="100%"></feImage>
            <feDisplacementMap id='displacement-map' result='ok' scale="0" xChannelSelector="R" yChannelSelector="G" in2="pict2" in="SourceGraphic" color-interpolation-filters="sRGB"></feDisplacementMap>
            <feComposite operator="in" in2="pict2"></feComposite>
            <feComposite in2="SourceGraphic"></feComposite> //杩欎釜鐨勭洰鐨勬槸鍥犱负娣诲姞婊ら暅鐨勫厓绱犲彲瑙佸尯鍩熷拰feImage鍏冪礌鐨勫ぇ灏忎竴鑷淬€傝瀺鍚堝師鏈夊厓绱犱繚璇佹暣涓厓绱犻兘鍙
        </filter>
    </defs>
</svg>

姘存尝鐗规晥锛屾槸閫氳繃<feImage>鏍囩 x,y,width,height鍥涗釜灞炴€у拰<feDisplacementMap>鏍囩scale鍔ㄦ€佸彉鍖栧疄鐜般€?br /> 灏卞儚娑熸吉锛屼互鐭冲瓙鎺夎惤澶勪负涓績锛岃寖鍥寸敱灏忔墿澶э紝璧蜂紡鐢卞己鍑忓急銆?杞负浠g爜锛屼篃灏辨槸width,height鐢卞皬鍙樺ぇ锛?code>scale鐢卞ぇ鍙樺皬
鏍规嵁鐐瑰嚮浜嬩欢锛屽彲浠ヨ绠楀嚭涓績鍧愭爣锛坧ointX锛宲ointY锛?/code>

鍦ㄦ墿鏁h繃绋嬩腑锛屼腑蹇冨潗鏍囦笉鍙橈紝x锛寉涓哄浘鐗囩殑璧峰鍧愭爣
pointX = width/2 + x ;pointY = height/2 + y => x = pointX - width/2; y = pointY - height/2
width锛宧eight锛宻cale鐨勬渶澶у€煎氨鍙互鏍规嵁闇€姹傛潵璁剧疆鍟

鍙傝€冭祫鏂?/h3>

https://www.zhangxinxu.com/wordpress/2017/12/understand-svg-fedisplacementmap-filter/

鍒版杩欑瘒鍏充簬浣跨敤feDisplacementMap+feImage婊ら暅瀹炵幇姘存尝绾规晥鏋?璁$畻鍔ㄦ€佸€?鐨勬枃绔犲氨浠嬬粛鍒拌繖浜?鏇村鐩稿叧feDisplacementMap婊ら暅姘存尝绾瑰唴瀹硅鎼滅储鑴氭湰涔嬪浠ュ墠鐨勬枃绔犳垨缁х画娴忚涓嬮潰鐨勭浉鍏虫枃绔狅紝甯屾湜澶у浠ュ悗澶氬鏀寔鑴氭湰涔嬪锛?/p>

 友情链接: NPS