ITPub博客

首页 > 应用开发 > IT综合 > 实现页面渲染,是直播搭建时不能忽略的

实现页面渲染,是直播搭建时不能忽略的

IT综合 作者:云豹科技晓彤 时间:2021-12-01 17:00:27 0 删除 编辑

渲染在直播搭建中是比较常见的技术,那么直播搭建如何实现高级渲染呢?

Paint 画笔的高级技能
渲染 Shader:
BitmapShader位图的图象渲染器
LinearGradient线性渲染
RadialGradient环形渲染
SweepGradient梯度渲染(扫描渲染)
ComposeShader组合渲染

可以绘制图片、颜色块、文字
canvas.drawCircle()
canvas.drawRect()
canvas.drawOval()


public class LinearGradientTextView extends android.support.v7.widget.AppCompatTextView {
   private TextPaint paint;
   private LinearGradient linearGradient;
   private Matrix matrix;
   private float translateX;
   private float deltaX = 20;
   public LinearGradientTextView(Context context) {
       super(context);
   }
   public LinearGradientTextView(Context context,
           @Nullable AttributeSet attrs) {
       super(context, attrs);
   }
   @Override
   protected void onSizeChanged(int w, int h, int oldw, int oldh) {
       super.onSizeChanged(w, h, oldw, oldh);
       paint = getPaint();
       //GradientSize=两个文字的大小
       String text = getText().toString();
       float textWidth = paint.measureText(text);
       int gradientSize = (int) (3 * textWidth / text.length());
       linearGradient = new LinearGradient(-gradientSize, 0, 0, 0,
               new int[]{0x22ffffff, 0xffffffff, 0x22ffffff},
               new float[]{0, 0.5f, 1}, TileMode.CLAMP);//边缘融合
       paint.setShader(linearGradient);
       matrix = new Matrix();
   }
   @Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       float textWidth = getPaint().measureText(getText().toString());
       translateX += deltaX;
       if(translateX > textWidth + 1|| translateX < 1){
           deltaX = -deltaX;
       }
//      matrix.setScale(sx, sy)
       //动画平移
       matrix.setTranslate(translateX, 0);
       linearGradient.setLocalMatrix(matrix);
       postInvalidateDelayed(50);
   }
}

public class MyGradientView extends View {
    private Bitmap bitmap;
    private Paint paint;
    private BitmapShader bitmapShader;
    private int width;
    private int height;
    private int[] colors = {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW};
    private RadialGradient radialGradient;
    private SweepGradient sweepGradient;
    //组合渲染
    private ComposeShader composeShader;
    public MyGradientView(Context context) {
        super(context);
        bitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.fengjing)).getBitmap();
        paint = new Paint();
        width = bitmap.getWidth();
        height = bitmap.getHeight();
    }
    public MyGradientView(Context context,
            @Nullable AttributeSet attrs,
            Bitmap bitmap) {
        super(context, attrs);
        this.bitmap = bitmap;
    }
    public MyGradientView(Context context,
            @Nullable AttributeSet attrs, int defStyleAttr,
            Bitmap bitmap) {
        super(context, attrs, defStyleAttr);
        this.bitmap = bitmap;
    }
    /**
     *
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        //canvas.drawBitmap(bitmap, 0, 0, paint);
        /**
         * TileMode.CLAMP 拉伸最后一个像素去铺满剩下的地方
         * TileMode.MIRROR 通过镜像翻转铺满剩下的地方
         * TileMode.REPEAT 重复图片填充整个画面(电脑设置壁纸)
         */
        bitmapShader = new BitmapShader(bitmap, TileMode.REPEAT, TileMode.REPEAT);
        //   bitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
        paint.setShader(bitmapShader);
        paint.setAntiAlias(true);
        //canvas.drawRect(new Rect(0, 0, 800, 800), paint);
        //设置像素矩阵,来调整大小,为了解决宽高不一致的问题
//        float scale = Math.max(width, height) * 1.0f / Math.min(width, height);
//        Matrix matrix = new Matrix();
//        matrix.setScale(scale, scale);//缩放比例
//        bitmapShader.setLocalMatrix(matrix);
        //  canvas.drawRect(new Rect(0, 0, 800, 800), paint);
        //canvas.drawCircle(width/2,width/2, width/2,paint);
        //     canvas.drawCircle(Math.max(width, height) / 2f,
        //         scale * Math.max(width, height) / 2f, Math.max(width, height) / 2f, paint);
        //canvas.drawOval(new RectF(0, 0, width, height * 1.5f), paint);
        // canvas.drawOval(new RectF(0,0,width,width),paint);
        //通过shapeDrawable也可以实现
//        ShapeDrawable shapeDrawable =new ShapeDrawable(new OvalShape());
//        shapeDrawable.getPaint().setShader(bitmapShader);
//        shapeDrawable.setBounds(0,0,width,width);
//        shapeDrawable.draw(canvas);
        /**
         * 线性渐变
         * x0,y0 起始点
         * x1,y1 结束点
         * int[] colors 中间依次要出现的颜色
         * float[] positions 数组大小跟colors数组一样大,中间依次摆放的几个颜色分别放置在那个位置上(参考比例从左往右)
         * title
         *
         */
//        LinearGradient linearGradient = new LinearGradient(0, 0, 400, 400, colors, null,
//                TileMode.REPEAT);
//        paint.setShader(linearGradient);
//        canvas.drawRect(0,0,400,400,paint);
//        //环形渲染
//        radialGradient = new RadialGradient(300,300,100,colors,null,TileMode.REPEAT);
//        paint.setShader(radialGradient);
//        canvas.drawCircle(300,300,300,paint);
        //梯度渲染
//        sweepGradient = new SweepGradient(300, 300, colors, null);
//        paint.setShader(sweepGradient);
//        canvas.drawCircle(300, 300, 300, paint);
        //组合渲染
        LinearGradient linearGradient = new LinearGradient(0, 0, 400, 400, colors, null,
                TileMode.REPEAT);
        composeShader = new ComposeShader(linearGradient, bitmapShader, PorterDuff.Mode.SRC_OVER);
        paint.setShader(composeShader);
        canvas.drawRect(0, 0, 800, 1000, paint);
    }
}

public class ZoomImageView extends View {
    //放大倍数
    private static final int FACTOR = 3;
    private static final int RADIUS = 100;
    public Bitmap bitmap;
    private ShapeDrawable drawable;
    private Matrix matrix = new Matrix();
    public ZoomImageView(Context context) {
        super(context);
        bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.beauty);
        Bitmap bmp = bitmap;
        bmp = Bitmap
                .createScaledBitmap(bmp, bmp.getWidth() * FACTOR, bmp.getHeight() * FACTOR, true);
        //制作一个圆形的图片(放大的局部),盖在canvas上
        BitmapShader shader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP);
        drawable = new ShapeDrawable(new OvalShape());
        drawable.getPaint().setShader(shader);
        //切出矩形区域----用于绘制圆(内切圆)
        drawable.setBounds(0, 0, RADIUS * 2, RADIUS * 2);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(bitmap, 0, 0, null);
        //画制作好的圆形图片
        drawable.draw(canvas);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        matrix.setTranslate(RADIUS - x * FACTOR, RADIUS - y * FACTOR);
        drawable.getPaint().getShader().setLocalMatrix(matrix);
        drawable.setBounds(x - RADIUS, y - RADIUS, x + RADIUS, y + RADIUS);
        //手指按下才进行缩放
        postInvalidate();
        return super.onTouchEvent(event);
    }
}

以上,就是直播搭建实现高级渲染的内容了。
声明:本文由云豹科技转发自冬日毛毛雨博客,如有侵权请联系作者删除


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/70002045/viewspace-2845216/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
音视频软件开发相关知识科普账号

注册时间:2021-06-11

  • 博文量
    163
  • 访问量
    36520