1

我如何模糊著名的图像？一个 CSS 等价于-webkit-filter: blur(5px);.

关于如何在著名/角度组合中执行此操作的示例的奖励积分。

我希望有类似的东西：

<fa-modifier fa-blur="5">
    <fa-image-surface fa-image-url="coolimage.png" fa-size="[640,320]">
    </fa-image-surface>
</fa-modifier>

在某些动作之后，我希望能够将动画从模糊变为“未模糊”。

4

2 回答 2

1

到目前为止，我发现的唯一方法是使用 css。

    <fa-image-surface class="{{blurClass}}" fa-image-url="coolimage.png" fa-size="[640,320]" fa-click="imageClick()">
    </fa-image-surface>

在控制器中

$scope.blurClass = "blur-in";  // start with no blur
$scope.imageClick = function() {
    $scope.blurClass = "blur-out"; // animate to a blur
}

在 .css 中

.blur-out {
    -webkit-filter: blur(8px);
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.blur-in {
    -webkit-filter: blur(0px);
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}
于 2014-10-10T12:06:18.877 回答
0

使用 fa-canvas-surface，在画布上绘制图像，然后使用其中一种模糊算法。我在一些浏览器中看到了 CSS 过滤器和 z 变换的分层问题，这促使我采用了画布方法。这个来自 Quasimondo 的 StackBlur 看起来比模糊 CSS 过滤器要好得多。

Quasimondo 的 StackBlur http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

于 2014-10-23T07:33:30.263 回答