Question

我想绘制一个像这个图像

的形状

我知道绘制圆圈的代码。但我不知道如何制作褪色的尺寸：

const input1 = [1, 2, 3, 3, 4, 5,2, 6,3,6,1];
const input2 = [1, 2, 3, 3, 4, 5,2, 6,3,6,7];

function removeDuplicate(arr) {
    let length = 0;
    const tmp = {};

    for (let i = 0; i < arr.length; i++) {
        if (!tmp[arr[i]]) {
            tmp[arr[i]] = 1;
            arr[length] = arr[i];
            length++;
        }
    }
    
    // the last element is not a duplicate
    if (!tmp[arr[arr.length-1]]) {
        length--;
    }
    arr.length = length;
    return arr;
}

console.log(removeDuplicate(input1));
console.log(removeDuplicate(input2));

如何制作这样的图像。我的项目针对iOS 7.0及更高版本。谢谢！

Answer 1

您可以截取该特定元素的屏幕截图并将其模糊

func captureScreenshot() -> UIImage {

    UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)
    self.layer.render(in: UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return image!

}

func addBlurEffect() {
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = self.bounds

    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] // for supporting device rotation
    self.addSubview(blurEffectView)

    UIView.animate(withDuration: 0.5) { 
        blurEffectView.effect = UIBlurEffect(style: UIBlurEffectStyle.light)
    }
}

Answer 2

对于iOS 8.0+，请在UIVisualEffectView

上使用UIImageView

var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))    
visualEffectView.frame = imageView.bounds
imageView.addSubview(visualEffectView)

Answer 3

您可以参考this blog。

此博客为您提供了三种模糊视图的选项。

使用Core Image框架模糊
使用Brad Larson的GPUImage框架模糊
使用Apple的UIImage + ImageEffects类别模糊

使用Core Image框架模糊

-(UIImage *)blurWithCoreImage:(UIImage *)sourceImage
{
CIImage *inputImage = [CIImage imageWithCGImage:sourceImage.CGImage];

// Apply Affine-Clamp filter to stretch the image so that it does not
// look shrunken when gaussian blur is applied
CGAffineTransform transform = CGAffineTransformIdentity;
CIFilter *clampFilter = [CIFilter filterWithName:@"CIAffineClamp"];
[clampFilter setValue:inputImage forKey:@"inputImage"];
[clampFilter setValue:[NSValue valueWithBytes:&transform objCType:@encode(CGAffineTransform)] forKey:@"inputTransform"];

// Apply gaussian blur filter with radius of 30
CIFilter *gaussianBlurFilter = [CIFilter filterWithName: @"CIGaussianBlur"];
[gaussianBlurFilter setValue:clampFilter.outputImage forKey: @"inputImage"];
[gaussianBlurFilter setValue:@30 forKey:@"inputRadius"];

CIContext *context = [CIContext contextWithOptions:nil];
CGImageRef cgImage = [context createCGImage:gaussianBlurFilter.outputImage fromRect:[inputImage extent]];

// Set up output context.
UIGraphicsBeginImageContext(self.view.frame.size);
CGContextRef outputContext = UIGraphicsGetCurrentContext();

// Invert image coordinates
CGContextScaleCTM(outputContext, 1.0, -1.0);
CGContextTranslateCTM(outputContext, 0, -self.view.frame.size.height);

// Draw base image.
CGContextDrawImage(outputContext, self.view.frame, cgImage);

// Apply white tint
CGContextSaveGState(outputContext);
CGContextSetFillColorWithColor(outputContext, [UIColor colorWithWhite:1 alpha:0.2].CGColor);
CGContextFillRect(outputContext, self.view.frame);
CGContextRestoreGState(outputContext);

// Output image is ready.
UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

return outputImage;
}

使用Brad Larson的GPUImage框架模糊

GPUImage是一个用于图像和视频处理的开源iOS框架，由Brad Larson创建和维护。它包括一系列GPU加速滤镜，可应用于图像，实时摄像机视频和电影。

GPUImage framework包含在本教程的源文件中，但将框架添加到您自己的项目中非常简单：

首先下载框架或从中克隆存储库 GitHub的。
打开终端窗口，导航到GPUImage文件夹，然后运行构建脚本build.sh来编译框架。
将GPUImage.framework从build文件夹复制到项目中文件夹，然后将其拖放到Project Navigator中。
然后，您可以通过导入在项目中使用GPUImage框架框架标题#import <GPUImage/GPUImage.h>.

GPUImage框架包含类似于Core Image框架中的过滤器。对于我们的示例应用程序，我们对两个过滤器感兴趣，GPUImageGaussianBlurFilter和GPUImageiOSBlurFilter。

-(UIImage *)blurWithGPUImage:(UIImage *)sourceImage
{
    // Gaussian Blur
    GPUImageGaussianBlurFilter *blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
    blurFilter.blurRadiusInPixels = 30.0;

    return [blurFilter imageByFilteringImage: sourceImage];
}

您可以使用GPUImageGaussianblur类代替GPUImageiOSblur类，而不是：{/ p>

// iOS Blur

GPUImageiOSBlurFilter *blurFilter = [[GPUImageiOSBlurFilter alloc] init];
blurFilter.blurRadiusInPixels = 30.0;

使用Apple的UIImage + ImageEffects类别模糊

您可以从Apple的开发者网站下载Apple的ImageEffects示例项目，并在项目中使用它。

#import "UIImage+ImageEffects.h"

...

- (UIImage *)blurWithImageEffects:(UIImage *)image
{
    return [image applyBlurWithRadius:30 tintColor:[UIColor colorWithWhite:1 alpha:0.2] saturationDeltaFactor:1.5 maskImage:nil];
}

希望这会对你有所帮助。快乐的编码。： - ）

如何画出模糊的形状？

3 个答案: