Android – 在video上创build一个圆形的蒙版

我对Android开发相对来说比较陌生,而且我想知道是否可以将VideoView遮罩成一个形状。 这是我迄今为止:

预期结果

预期的结果(样机)

实际结果

我的video视图和布局的XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#0088ff" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".VideoPlayerActivity" > <FrameLayout android:layout_width="250dp" android:layout_height="250dp" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:background="@drawable/circular_mask" android:foreground="@drawable/circular_mask" > <VideoView android:id="@+id/videoView1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:fitsSystemWindows="false" android:focusable="false" android:focusableInTouchMode="false" android:scrollbarAlwaysDrawVerticalTrack="false" /> <Space android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout> </RelativeLayout> 

面具形状xml:

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:padding="20dp" android:shape="oval" > <solid android:color="#FFFFFFFF" /> <corners android:radius="10dp" /> </shape> 

主要的java

 package com.example.webmvideo; import android.net.Uri; import android.os.Build; import android.os.Bundle; import android.annotation.TargetApi; import android.app.Activity; import android.view.Menu; import android.widget.MediaController; import android.widget.VideoView; import android.util.Log; import android.media.MediaPlayer; @TargetApi(Build.VERSION_CODES.HONEYCOMB) public class MainActivity extends Activity { Uri srcPath = Uri.parse("android.resource://com.example.webmvideo/" + R.raw.test); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final VideoView videoView = (VideoView) findViewById(R.id.videoView1); videoView.setVideoURI(srcPath); MediaController mediaController = new MediaController(this); mediaController.setAnchorView(videoView); videoView.setMediaController(mediaController); videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() { @Override public void onPrepared(MediaPlayer mp) { String TAG = null; Log.i(TAG , "Duration = " + videoView.getDuration()); } }); videoView.start(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } } 

Solutions Collecting From Web of "Android – 在video上创build一个圆形的蒙版"

原来,可以将video剪辑成一个圈子。 你要做的是创build你自己的SurfaceView类,并从这里重载dispatchDraw ,你可以调用canvas.clipPath并传入一个Path对象,该对象包含你想要video被屏蔽的圆。

这是观点:

 public class CircleSurface extends SurfaceView { private Path clipPath; public CircleSurface(Context context) { super(context); init(); } public CircleSurface(Context context, AttributeSet attrs) { super(context, attrs); init(); } public CircleSurface(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { clipPath = new Path(); //TODO: define the circle you actually want clipPath.addCircle(710, 330, 250, Path.Direction.CW); } @Override protected void dispatchDraw(Canvas canvas) { canvas.clipPath(clipPath); super.dispatchDraw(canvas); } } 

这是活动的样子

 public class MainActivity extends Activity implements SurfaceHolder.Callback { CircleSurface surface; MediaPlayer player; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); surface = (CircleSurface) findViewById(R.id.surface); SurfaceHolder holder = surface.getHolder(); holder.addCallback(this); player = MediaPlayer.create(this, R.raw.yourvideo); } @Override public void surfaceCreated(SurfaceHolder holder) { player.setDisplay(holder); player.start(); } @Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { //TODO: handle this } @Override public void surfaceDestroyed(SurfaceHolder holder) { //TODO: handle this } } 

我之前做过这样的面具 你可以得到你想要的,如下面的步骤
1)准备一个你想要的形状的PNG图像,并填充颜色0x0000000
2)使用空白布局,并确保它覆盖VideView
3)现在,所有的touchevents都被这个空白的布局所捕获
4)判断TouchEvent中包含的点的颜色,如果颜色为0x00000000,则将事件传递给VideView

这里有一个例子来获得一个点的颜色,它运行效率高:

 // build a drawingCache and draw the mask layer to the bitmap Bitmap drawingCache = Bitmap.createBitmap(getWidth(), getHeight(),Bitmap.Config.ARGB_4444); Canvas drawingCacheCanvas = new Canvas(drawingCache); drawingCacheCanvas.clipRect(x, y, x + 1, y + 1); draw(drawingCacheCanvas); int color = drawingCache.getPixel(x, y); if (color == getMaskColor()) { //TODO dispatch event to VideoView and let it to handle event }