blurRadius for Image

Summary:
This adds blurRadius support for <Image>, similar to iOS.
The heavy-lifting was done by lambdapioneer in the stack of diffs ending with
D3924013, we're just patching this in.
Two notes: we might need to apply two postprocessors going forward, will tackle
that in a separate diff, so we can ship this asap.
However, we need a new version of fresco to be released in order
to ship this.

Reviewed By: lexs

Differential Revision: D3936438

fbshipit-source-id: 353bf1f1120ebd5f4f8266c5a20188b41478a741
This commit is contained in:
Ludo Fardel
2017-03-02 07:32:08 -08:00
committed by Facebook Github Bot
parent 94901b1e1d
commit 0b348095b6
4 changed files with 74 additions and 7 deletions

View File

@@ -82,6 +82,11 @@ public class ReactImageManager extends SimpleViewManager<ReactImageView> {
view.setSource(sources);
}
@ReactProp(name = "blurRadius")
public void setBlurRadius(ReactImageView view, float blurRadius) {
view.setBlurRadius(blurRadius);
}
// In JS this is Image.props.loadingIndicatorSource.uri
@ReactProp(name = "loadingIndicatorSrc")
public void setLoadingIndicatorSource(ReactImageView view, @Nullable String source) {

View File

@@ -46,6 +46,7 @@ import com.facebook.drawee.generic.RoundingParams;
import com.facebook.drawee.view.GenericDraweeView;
import com.facebook.imagepipeline.common.ResizeOptions;
import com.facebook.imagepipeline.image.ImageInfo;
import com.facebook.imagepipeline.postprocessors.IterativeBoxBlurPostProcessor;
import com.facebook.imagepipeline.request.BasePostprocessor;
import com.facebook.imagepipeline.request.ImageRequest;
import com.facebook.imagepipeline.request.ImageRequestBuilder;
@@ -159,6 +160,7 @@ public class ReactImageView extends GenericDraweeView {
private boolean mIsDirty;
private final AbstractDraweeControllerBuilder mDraweeControllerBuilder;
private final RoundedCornerPostprocessor mRoundedCornerPostprocessor;
private @Nullable IterativeBoxBlurPostProcessor mIterativeBoxBlurPostProcessor;
private @Nullable ControllerListener mControllerListener;
private @Nullable ControllerListener mControllerForTesting;
private final @Nullable Object mCallerContext;
@@ -226,6 +228,16 @@ public class ReactImageView extends GenericDraweeView {
mIsDirty = true;
}
public void setBlurRadius(float blurRadius) {
if (blurRadius == 0) {
mIterativeBoxBlurPostProcessor = null;
} else {
mIterativeBoxBlurPostProcessor =
new IterativeBoxBlurPostProcessor((int) PixelUtil.toPixelFromDIP(blurRadius));
}
mIsDirty = true;
}
public void setBorderColor(int borderColor) {
mBorderColor = borderColor;
mIsDirty = true;
@@ -326,7 +338,7 @@ public class ReactImageView extends GenericDraweeView {
computedCorners[2] = mBorderCornerRadii != null && !YogaConstants.isUndefined(mBorderCornerRadii[2]) ? mBorderCornerRadii[2] : defaultBorderRadius;
computedCorners[3] = mBorderCornerRadii != null && !YogaConstants.isUndefined(mBorderCornerRadii[3]) ? mBorderCornerRadii[3] : defaultBorderRadius;
}
public void setHeaders(ReadableMap headers) {
mHeaders = headers;
}
@@ -386,7 +398,13 @@ public class ReactImageView extends GenericDraweeView {
? mFadeDurationMs
: mImageSource.isResource() ? 0 : REMOTE_IMAGE_FADE_DURATION_MS);
Postprocessor postprocessor = usePostprocessorScaling ? mRoundedCornerPostprocessor : null;
// TODO: t13601664 Support multiple PostProcessors
Postprocessor postprocessor = null;
if (usePostprocessorScaling) {
postprocessor = mRoundedCornerPostprocessor;
} else if (mIterativeBoxBlurPostProcessor != null) {
postprocessor = mIterativeBoxBlurPostProcessor;
}
ResizeOptions resizeOptions = doResize ? new ResizeOptions(getWidth(), getHeight()) : null;