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<Any>{
//存储像素的数据
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<Pixel>?
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<Pixel>)
testView_2.setNeedsDisplay()
self.view.addSubview(testView_2)
现在只是效果只是完成了一丢丢
后面接着去研发，去研究这个展示 led效果的功能
如果有疑惑，评论。我就会去和大家讨论
1人点赞
