项目地址
效果图a
原理
广告牌中经常能看到上面这种显示效果,使用LED灯实现文字甚至是图片的显示,那如何在Android中实现这种效果呢?
通常的做法应该是获取字体的点阵信息,然后经过计算在对应的位置绘制圆点,但是这样太麻烦了,于是我使用了一种比较偷懒的做法,原理是这样的:
1.首先将文字转换为Bitmap,既得到一张跟文字显示效果一样的图片;
2.按照一定的间隔点获取该图片中对应的像素点是否有颜色,如果有,则在该点绘制LED灯,否则不绘制。
使用这种方法的一个好处是,即便是图片也可以轻松转换成LED显示。
代码实现
Read the fucking source code!
废话不多说,下面看看如何具体实现代码。
1.首先我们将要显示的文字转换为Bitmap
private Bitmap renderText(CharSequence text, Paint paint) {
Bitmap bitmap = Bitmap.createBitmap(mDrawableWidth, mDrawableHeight, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
int yPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint.ascent()) / 2));
canvas.drawText(text.toString(),0,yPos,paint);
return bitmap;
}
2.根据LED灯的半径和LED的间距,生成一个所有LED灯所在位置的List,这个List存储我们计算好的所有LED灯的位置
List<Point> circlePoint = new ArrayList<>();
private void measurePoint(int width, int height) {
int halfBound = ledRadius + ledSpace / 2;
int x = halfBound;
int y = halfBound;
for (; ; ) {
for (; ; ) {
circlePoint.add(new Point(x, y));
y += halfBound * 2;
if (y > height) {
y = halfBound;
break;
}
}
x += halfBound * 2;
if (x > width) {
break;
}
}
}
3.根据已经生成的文字Bitmap和LED等的位置,生成LED图
// 获取Bitmap指定位置的颜色,
// 这个方法比较长,我简化了一下,
// 详细代码请移步项目地址查看源码
private int isInRange(Bitmap bitmap, int x, int y) {
...
int color = bitmap.getPixel(x - ledRadius, y);
....
return color;
}
// 根据Led等的位置和原始的TextBitmap生成LedBitmap
private Bitmap generateLedBitmap(Bitmap src) {
Bitmap bitmap = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
for (Point point : circlePoint) {
// Detect if the px is in range of our led position
int color = isInRange(src, point.x, point.y);
if (color != 0) {
canvas.drawCircle(point.x, point.y, ledRadius, paint);
}
}
return bitmap;
}
4.最后我们在onDraw()方法中将这个Bitmap绘制到Canvas中即可,有一点需要注意的是,如果这个Bitmap的尺寸超过 4 * 1024
在有的手机上会报OpenGL Texture最大尺寸不能超过4096像素的错误,所以在绘制的时候检查一下Bitmap的尺寸是否超过,如果是,则将这个Bitmap拆分成多个Bitmap进行绘制。