用于 svg.js 添加 svg过滤器的插件_JavaScript_代码_相关文件_下载

# svg.filter.js A plugin for [svg.js](https://svgdotjs.github.io) adding filter functionality. svg.filter.js is licensed under the terms of the MIT License. - [Examples](#examples) - [Furthermore](#furthermore) - [unfilter](#unfilter) - [referencing the filter node](#referencing-the-filter-node) - [Animating filter values](#animating-filter-values) - [Chaining Effects](#chaining-effects) - [Effect Classes](#effect-classes) ## Usage ### Npm ```sh npm i @svgdotjs/svg.filter.js ``` ### Yarn ```sh yarn add @svgdotjs/svg.filter.js ``` Include this plugin after including the svg.js library in your html document. Here is how each filter effect on the example page is achieved. ## Examples - [gaussian blur](#gaussian-blur) - [horizontal blur](#horizontal-blur) - [desaturate](#desaturate) - [contrast](#contrast) - [sepiatone](#sepiatone) - [hue rotate 180](#hue-rotate-180) - [luminance to alpha](#luminance-to-alpha) - [colorize](#colorize) - [posterize](#posterize) - [darken](#darken) - [lighten](#lighten) - [invert](#invert) - [gamma correct 1](#gamma-correct-1) - [gamma correct 2](#gamma-correct-2) - [drop shadow](#drop-shadow) - [extrude](#extrude) ### original ```javascript var image = draw.image('path/to/image.jpg').size(300, 300) ``` ### gaussian blur ```javascript image.filterWith(function(add) { add.gaussianBlur(30) }) ``` ### horizontal blur ```javascript image.filterWith(function(add) { add.gaussianBlur(30, 0) }) ``` ### desaturate ```javascript image.filterWith(function(add) { add.colorMatrix('saturate', 0) }) ``` ### contrast ```javascript image.filterWith(function(add) { var amount = 1.5 add.componentTransfer({ type: 'linear', slope: amount, intercept: -(0.3 * amount) + 0.3 }) }) ``` ### sepiatone ```javascript image.filterWith(function(add) { add.colorMatrix('matrix', [ .343, .669, .119, 0, 0 , .249, .626, .130, 0, 0 , .172, .334, .111, 0, 0 , .000, .000, .000, 1, 0 ]) }) ``` ### hue rotate 180 ```javascript image.filterWith(function(add) { add.colorMatrix('hueRotate', 180) }) ``` ### luminance to alpha ```javascript image.filterWith(function(add) { add.colorMatrix('luminanceToAlpha') }) ``` ### colorize ```javascript image.filterWith(function(add) { add.colorMatrix('matrix', [ 1.0, 0, 0, 0, 0 , 0, 0.2, 0, 0, 0 , 0, 0, 0.2, 0, 0 , 0, 0, 0, 1.0, 0 ]) }) ``` ### posterize ```javascript image.filterWith(function(add) { add.componentTransfer({ type: 'discrete', tableValues: [0, 0.2, 0.4, 0.6, 0.8, 1] }) }) ``` ### darken ```javascript image.filterWith(function(add) { add.componentTransfer({ type: 'linear', slope: 0.2 }) }) ``` ### lighten ```javascript image.filterWith(function(add) { add.componentTransfer({ type: 'linear', slope: 1.5, intercept: 0.2 }) }) ``` ### invert ```javascript image.filterWith(function(add) { add.componentTransfer({ type: 'table' tableValues: [1, 0] }) }) ``` ### gamma correct 1 ```javascript image.filterWith(function(add) { add.componentTransfer({ g: { type: 'gamma', amplitude: 1, exponent: 0.5 } }) }) ``` ### gamma correct 2 ```javascript image.filterWith(function(add) { add.componentTransfer({ g: { type: 'gamma', amplitude: 1, exponent: 0.5, offset: -0.1 } }) }) ``` ### drop shadow You will notice that all the effect descriptions have a drop shadow. Here is how this drop shadow can be achieved: ```javascript var text = draw.text('SVG text with drop shadow').fill('#fff') text.filterWith(function(add) { var blur = add.offset(0, 1).in(add.$sourceAlpha).gaussianBlur(1) add.blend(add.$source, blur) }) ``` This technique can be achieved on any other shape of course: ```javascript var rect = draw.rect(100,100).fill('#f09').stroke({ width: 3, color: '#0f9' }).move(10,10) rect.filterWith(function(add) { var blur = add.offset(20, 20).in(add.$sourceAlpha).gaussianBlur(5) add.blend(add.$source, blur) this.size('200%','200%').move('-50%', '-50%') }) ``` If the drop shadow should get the colour of the shape so it appears like coloured glass: ```javascript var rect = draw.rect(100,100).fill('#f09').stroke({ width: 3, color: '#0f9' }).move(10,10) rect.filterWith(function(add) { var blur = add.offset(20, 20).gaussianBlur(5) add.blend(add.$source, blur) this.size('200%','200%').move('-50%', '-50%') }) ``` ### extrude ```javascript image.filterWith(function(add){ var matrix = add.convolveMatrix([ 1,0,0,0,0,0, 0,1,0,0,0,0, 0,0,1,0,0,0, 0,0,0,1,0,0, 0,0,0,0,1,0, 0,0,0,0,0,1 ]).attr({ devisor: '2', preserveAlpha: 'false' }).in(add.$sourceAlpha) //recolor it var color = add.composite(add.flood('#ff2222'),matrix,'in'); //merge all of them toggether add.merge(color,add.$source); }) ``` ## Furthermore Some more features you should know about. ### unfilter The `unfilter` method removes the filter attribute from the node: ```javascript image.unfilter() ``` ### creating a reusable filter its also posible to create a filter by using the `new` keyword *NOTE: when creating a filter this way, it can take an optional attr object* ```javascript var filter = new SVG.Filter(); // create the filters effects here filter.offset(20, 20).gaussianBlur(5); filter.blend(filter.$source, blur); filter.size('200%','200%').move('-50%', '-50%') ``` then once you have created the filter you can use it one multiple elements ```javascript var image = new SVG.Image(); var shape = new SVG.Rect(10, 10); image.filterWith(filter); shape.filterWith(filter); ``` ### referencing the filter node An internal reference to the filter node is made in the element: ```javascript image.filterer() ``` This can also be very useful to reuse an existing filter on various elements: ```javascript otherimage.filterWith(image.filterer()) ``` ### Animating filter values Every filter value can be animated as well: ```javascript var hueRotate image.filterWith(function(add) { hueRotate = add.colorMatrix('hueRotate', 0) }) hueRotate.animate(3000).attr('values', 360) ``` ### Chaining Effects [Method chaining](https://en.wikipedia.org/wiki/Method_chaining) is a programing style where each function returns the object it belongs to, for an example look at JQuery.<br> it's possible to chain the effects on a filter when you are creating them, for example: ```javascript image.filterWith(function(add){ add.flood('black',0.5).composite(add.$sourceAlpha,'in').offset(10).merge(add.$source) }) ``` this would create a basic shadow filter where the first input on the `composite` effect would be the `flood` effect, and the input on the offset effect would be the `composite` effect.<br> same with the `merge` effect, its first input would be the `offset` effect, and its second input would be `add.$source` some effects like [Merge](#merge), [Blend](blend), [Composite](#composite), [DisplacementMap](displacementmap) have thier arguments changed when they are chained, for example ```javascript image.filterWith(function(add){ add.flood('black',0.5).composite(add.$sourceAlpha,'in') }) ``` the `composite` effects first input is set to the `flood` effect and its second input becomes the first argument, this is the same for the merge, blend, composite, and displacmentMap effect. <br> for more details check out each effects doc below ## Effect Classes - [Base Effect Class](base-effect-class) - [Blend](#blend) - [ColorMatrix](#colormatrix) - [ComponentTransfer](#componenttransfer) - [Composite](#composite) - [ConvolveMatrix](#convolvematrix) - [DiffuseLighting](#diffuselighting) - [DisplacementMap](#displacementmap) - [Flood](#flood) - [GaussianBlur](#gaussianblur) - [Image](#image) - [Merge](#merge) - [Morphology](#morphology) - [Offset](#offset) - [SpecularLighting](#specularli