iOS LED灯效果展示

LED灯的效果展示。
整理了一下，自己所了解的知识。通过一些其他方式。
在App界面展示出现LED的效果。

屏幕快照 2020-10-27 上午9.43.30.png

1.绘制图片 （或者是图片）
2.通过获取到像素点的颜色去进行展示。每一个像素点有 RGB A 这个四个
3.通过获取到的 bitMap 展示出LED的效果

第一步随意找一张图片 方便获取到他的像素点

第二步

//2.获取到图片的 bitMap
    /**
     - 传入图片的信息，返回图片的像素点信息
     - 返回的数据排列。 R  G  B  ，A ：亮度，   row：行数， col 列数
     */
    func getImagePixel(_ image:UIImage) -> Array{
        //存储像素的数据
        let grayScale: [Pixel] = (image.pixelData.map {
            //将RGB的颜色记录下来
            return $0
            
        })
        //返回像素的数据
        return grayScale
    }


//MARK: 创建接受像素点的model
struct Pixel {
    var r: Float
    var g: Float
    var b: Float
    var a: Float
    var row: Int
    var col: Int
    init(r: UInt8, g: UInt8, b: UInt8, a: UInt8, row: Int, col: Int) {
        self.r = Float(r)
        self.g = Float(g)
        self.b = Float(b)
        self.a = Float(a)
        self.row = row
        self.col = col
    }
    var color: UIColor {
        return UIColor(
            red: CGFloat(r/255.0),
            green: CGFloat(g/255.0),
            blue: CGFloat(b/255.0),
            alpha: CGFloat(a/255.0)
        )
    }
    var description: String {
        return "\(r), \(g), \(b), \(a) ,\(row) ,\(col)"
    }
}


//MARK： 读取像素点的方法
extension UIImage{
    
    var pixelData: [Pixel] {
  
        var pixelS = [Pixel]()
        for row in 0 ..< Int(self.size.width){
            for col in 0 ..< Int(self.size.height){
                let coloR = self.cxg_getPointColor(withImage: self, point: CGPoint(x: row, y: col))
                pixelS.append(Pixel(r: coloR![0], g: coloR![1], b: coloR![2], a: coloR![3], row: row, col: col))
            }
        }
        //返回取出颜色的数组 返回RGB 亮度 行数、列数
        return pixelS
    }
    /// - Parameters:
    ///   - image: 要获取颜色的图片
    ///   - point: 每一次要获取到的点的颜色
    /// - Returns: 获取到的颜色
    func cxg_getPointColor(withImage image: UIImage, point: CGPoint) -> [ UInt8]? {
        guard CGRect(origin: CGPoint(x: 0, y: 0), size: image.size).contains(point) else {
            return nil
        }
        let pointX = trunc(point.x);
        let pointY = trunc(point.y);
        
        let width = image.size.width;
        let height = image.size.height;
        let colorSpace = CGColorSpaceCreateDeviceRGB();
        var pixelData: [UInt8] = [0, 0, 0, 0]
        
        pixelData.withUnsafeMutableBytes { pointer in
            if let context = CGContext(data: pointer.baseAddress, width: 1, height: 1, bitsPerComponent: 8, bytesPerRow: 4, space: colorSpace, bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue), let cgImage = image.cgImage {
                context.setBlendMode(.copy)
                context.translateBy(x: -pointX, y: pointY - height)
                context.draw(cgImage, in: CGRect(x: 0, y: 0, width: width, height: height))
            }
        }
        return pixelData
    }
}

第三步

//3.通过获取到的 点阵的位置绘制出来点阵图
class TestView:UIView{
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    }
    var x:CGFloat = 0.0
    var y:CGFloat = 0.0
    
    var imagePixel_Array:Array?
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        //获取绘图上下文
        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }
        self.backgroundColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
        if imagePixel_Array != nil{
            //控制小格子有多大
            let size: CGSize = .init(width: self.frame.size.width / 18, height: self.frame.size.height/12)
            for (index, pixel) in (imagePixel_Array?.enumerated())! {
                
                //创建一个矩形，它的所有边都内缩3点
                let drawingRect = CGRect(x: x, y: y, width: size.width, height: size.height)
                //创建并设置路径
                let path = CGMutablePath()
                //绘制矩形
                path.addRect(drawingRect)
                //添加路径到图形上下文
                context.addPath(path)
                //设置填充颜色
                context.setFillColor(UIColor.init(red: CGFloat(pixel.r / 255), green: CGFloat(pixel.g / 255), blue: CGFloat(pixel.b / 255), alpha: CGFloat(pixel.a / 255)).cgColor)
                //绘制路径并填充
                context.drawPath(using: .fillStroke)
                print("---\(pixel.description)")
                
                y += size.height
                if index % 12 == 0 && index != 0{
                    x += size.width
                    y = 0
                }
            }
        }
    }
}

如何调用

        let image_Png = UIImage.init(named: "1111")!
        let imagePixel_Array_2 = self.getImagePixel(image_Png!)
        let testView_2 = TestView.init(frame: CGRect(x: 100, y: 400, width: 18 * 12, height: 12 * 12))
        testView_2.imagePixel_Array = (imagePixel_Array_2  as! Array)
        testView_2.setNeedsDisplay()
        self.view.addSubview(testView_2)

现在只是效果只是完成了一丢丢
后面接着去研发，去研究这个展示 led效果的功能
如果有疑惑，评论。我就会去和大家讨论