Skip to content

Snap之Filter

Jump to bottom
hebo edited this page Jul 26, 2019 · 2 revisions

[TOC]

Paper.filter(filstr)

  • filstr (string) SVG fragment of filter provided as a string

Creates a <filter> element

注意：建议用元素放到一个空的中

let pproto = Paper.prototype

pproto.filter = function (filstr) {
    var paper = this;
    if (paper.type != "svg") {
        paper = paper.paper
    }
    var f = Snap.parse(Str(filstr)),
        id = Snap._.id(),
        width = paper.node.offsetWidth,
        height = paper.node.offsetHeight,
        filter = $("filter");
        
    $(filter, {
        id: id,
        filterUnits: "userSpaceOnUse" // 按用户单位指定边界，默认是objectBoundingBox
    });
    filter.appendChild(f.node)
    paper.defs.appendChild(filter)
    return new Element(filter)
}

示例：

// Gaussian 高斯
let svg = Snap('#svg')
let f = svg.paper.filter('<feGaussianBlur stdDeviation="2"/>') // 高斯模糊
let c = svg.paper.circle(100, 100, 50).attr({
           filter: f
       })

Snap.filter.blur(x, y)

  • x (number) amount of horizontal blur, in pixels
  • y (number) #optional amount of vertical blur, in pixels

运用高斯模糊，返回

Snap.filter.blur = function (x, y) {
    if (x == null) {
        x = 2;
    }
    var def = y == null ? x : [x, y];
    return Snap.format('\<feGaussianBlur stdDeviation="{def}"/>', {
        def: def
    });
};

Snap.filter.blur.toString = function () {
    return this();
};

示例：

let svg = Snap('#svg')
let f = svg.paper.filter(Snap.filter.blur(5, 10))
let c = svg.paper.circle(100, 100, 50).attr({
           filter: f
       })

Snap.filter.shadow(dx, dy, [blur=4], [color="#000"], [opacity=1])

  • dx (number) #optional horizontal shift of the shadow, in pixels
  • dy (number) #optional vertical shift of the shadow, in pixels
  • blur (number) #optional amount of blur
  • color (string) #optional color of the shadow
  • opacity (number) #optional 0..1 opacity of the shadow

Returns an SVG markup string for the shadow filter

Snap.filter.shadow = function (dx, dy, blur, color, opacity) {
    if (opacity == null) {
        if (color == null) {
            opacity = blur;
            blur = 4;
            color = "#000";
        } else {
            opacity = color;
            color = blur;
            blur = 4;
        }
    }
    if (blur == null) {
        blur = 4;
    }
    if (opacity == null) {
        opacity = 1;
    }
    if (dx == null) {
        dx = 0;
        dy = 2;
    }
    if (dy == null) {
        dy = dx;
    }
    color = Snap.color(color);
    return Snap.format('<feGaussianBlur in="SourceAlpha" stdDeviation="{blur}"/><feOffset dx="{dx}" dy="{dy}" result="offsetblur"/><feFlood flood-color="{color}"/><feComposite in2="offsetblur" operator="in"/><feComponentTransfer><feFuncA type="linear" slope="{opacity}"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>', {
        color: color,
        dx: dx,
        dy: dy,
        blur: blur,
        opacity: opacity
    });
};

Snap.filter.shadow.toString = function () {
    return this();
};

示例：

let svg = Snap("#svg");
let f = svg.paper.filter(Snap.filter.shadow(0, 2, 3)),
    c = svg.paper.circle(50, 50, 40).attr({
        fill: "red",
        filter: f
    });

Snap.filter.grayscale(amount)

  • amount (number) amount of filter (0..1)

灰度滤镜

Snap.filter.grayscale = function (amount) {
    if (amount == null) {
        amount = 1;
    }
    return Snap.format('<feColorMatrix type="matrix" values="{a} {b} {c} 0 0 {d} {e} {f} 0 0 {g} {b} {h} 0 0 0 0 0 1 0"/>', {
        a: 0.2126 + 0.7874 * (1 - amount),
        b: 0.7152 - 0.7152 * (1 - amount),
        c: 0.0722 - 0.0722 * (1 - amount),
        d: 0.2126 - 0.2126 * (1 - amount),
        e: 0.7152 + 0.2848 * (1 - amount),
        f: 0.0722 - 0.0722 * (1 - amount),
        g: 0.2126 - 0.2126 * (1 - amount),
        h: 0.0722 + 0.9278 * (1 - amount)
    });
};

Snap.filter.grayscale.toString = function () {
    return this();
};

示例：

let svg = Snap("#svg")
let src = 'https://avatars0.githubusercontent.com/u/4695440?s=460&v=4'
let image = svg.paper.image(src, 10, 10, 260, 260)
let f = svg.paper.filter(Snap.filter.grayscale(0.8))
image.attr({
    filter: f
})

Snap.filter.sepia(amount)

  • amount (number) amount of filter (0..1)

棕褐色滤镜

Snap.filter.sepia = function (amount) {
    if (amount == null) {
        amount = 1;
    }
    return Snap.format('<feColorMatrix type="matrix" values="{a} {b} {c} 0 0 {d} {e} {f} 0 0 {g} {h} {i} 0 0 0 0 0 1 0"/>', {
        a: 0.393 + 0.607 * (1 - amount),
        b: 0.769 - 0.769 * (1 - amount),
        c: 0.189 - 0.189 * (1 - amount),
        d: 0.349 - 0.349 * (1 - amount),
        e: 0.686 + 0.314 * (1 - amount),
        f: 0.168 - 0.168 * (1 - amount),
        g: 0.272 - 0.272 * (1 - amount),
        h: 0.534 - 0.534 * (1 - amount),
        i: 0.131 + 0.869 * (1 - amount)
    });
};

Snap.filter.sepia.toString = function () {
    return this();
};

示例：

let svg = Snap("#svg")
let src = 'https://avatars0.githubusercontent.com/u/4695440?s=460&v=4'
let image = svg.paper.image(src, 10, 10, 260, 260)
let f = svg.paper.filter(Snap.filter.sepia(0.8))
image.attr({
    filter: f
})

Snap.filter.saturate(amount)

  • amount (number) amount of filter (0..1)

饱和度滤镜

Snap.filter.saturate = function (amount) {
    if (amount == null) {
        amount = 1;
    }
    return Snap.format('<feColorMatrix type="saturate" values="{amount}"/>', {
        amount: 1 - amount
    });
};

Snap.filter.saturate.toString = function () {
    return this();
};

示例：

let svg = Snap("#svg")
let src = 'https://avatars0.githubusercontent.com/u/4695440?s=460&v=4'
let image = svg.paper.image(src, 10, 10, 260, 260)
let f = svg.paper.filter(Snap.filter.saturate(0.8))
image.attr({
    filter: f
})

Snap.filter.hueRotate(angle)

  • angle (number) angle of rotation（0-360）

色相旋转滤镜，描述颜色的色相值应该被旋转多少度

在 HSL 和 HSV 色彩空间中，H 指的就是色相，可以将不同色相的颜色分布在一个环上，以角度表 示颜色。例如红色为 0 度(360 度)，绿色为 120 度，蓝色为 240 度。

Snap.filter.hueRotate = function (angle) {
    angle = angle || 0;
    return Snap.format('<feColorMatrix type="hueRotate" values="{angle}"/>', {
        angle: angle
    });
};

Snap.filter.hueRotate.toString = function () {
    return this();
};

示例：

let svg = Snap("#svg")
let src = 'https://avatars0.githubusercontent.com/u/4695440?s=460&v=4'
let image = svg.paper.image(src, 10, 10, 260, 260)
let f = svg.paper.filter(Snap.filter.hueRotate(190))
image.attr({
    filter: f
})

Snap.filter.invert(amount)

  • amount (number) amount of filter (0..1)

反相滤镜

Snap.filter.invert = function (amount) {
    if (amount == null) {
        amount = 1;
    }
//        <feColorMatrix type="matrix" values="-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0" color-interpolation-filters="sRGB"/>
    return Snap.format('<feComponentTransfer><feFuncR type="table" tableValues="{amount} {amount2}"/><feFuncG type="table" tableValues="{amount} {amount2}"/><feFuncB type="table" tableValues="{amount} {amount2}"/></feComponentTransfer>', {
        amount: amount,
        amount2: 1 - amount
    });
};

Snap.filter.invert.toString = function () {
    return this();
};

示例：

let svg = Snap("#svg")
let src = 'https://avatars0.githubusercontent.com/u/4695440?s=460&v=4'
let image = svg.paper.image(src, 10, 10, 260, 260)
let f = svg.paper.filter(Snap.filter.invert(0.9))
image.attr({
    filter: f
})

Snap.filter.brightness(amount)

  • amount (number) amount of filter (0..1) 0表示全黑，1表示没有变化，真实亮度

亮度滤镜

Snap.filter.brightness = function (amount) {
    if (amount == null) {
        amount = 1;
    }
    return Snap.format('<feComponentTransfer><feFuncR type="linear" slope="{amount}"/><feFuncG type="linear" slope="{amount}"/><feFuncB type="linear" slope="{amount}"/></feComponentTransfer>', {
        amount: amount
    });
};

Snap.filter.brightness.toString = function () {
    return this();
};

示例：

let svg = Snap("#svg")
let src = 'https://avatars0.githubusercontent.com/u/4695440?s=460&v=4'
let image = svg.paper.image(src, 10, 10, 260, 260)
let f = svg.paper.filter(Snap.filter.brightness(0.1))
image.attr({
    filter: f
})

Snap.filter.contrast(amount)

  • amount (number) amount of filter (0..1)

反差滤镜

Snap.filter.contrast = function (amount) {
    if (amount == null) {
        amount = 1;
    }
    return Snap.format('<feComponentTransfer><feFuncR type="linear" slope="{amount}" intercept="{amount2}"/><feFuncG type="linear" slope="{amount}" intercept="{amount2}"/><feFuncB type="linear" slope="{amount}" intercept="{amount2}"/></feComponentTransfer>', {
        amount: amount,
        amount2: .5 - amount / 2
    });
};

Snap.filter.contrast.toString = function () {
    return this();
};

示例：

let svg = Snap("#svg")
let src = 'https://avatars0.githubusercontent.com/u/4695440?s=460&v=4'
let image = svg.paper.image(src, 10, 10, 260, 260)
let f = svg.paper.filter(Snap.filter.contrast(0.1))
image.attr({
    filter: f
})

参考

Clone this wiki locally