透明的SurfaceView

Question

在我的项目中，我有一个操纵杆。 看起来像这样

我的问题是黑色，如何使其透明。

这是我的代码

public class JoyStickView extends SurfaceView implements SurfaceHolder.Callback, View.OnTouchListener{
private float centerX;
private float centerY;
private float baseRadius;
private float hatRadius;
private JoyStickListener joyStickCallback;

    public JoyStickView(Context context){
       super(context);

       getHolder().setFormat(PixelFormat.TRANSPARENT);
       getHolder().addCallback(this);

       setZOrderOnTop(true);

       setOnTouchListener(this);

       if(context instanceof JoyStickListener){
          joyStickCallback = (JoyStickListener)context;
       }
    }

...
}

我的.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.akoni.control.Controller">

<com.example.akoni.control.JoyStickView
    android:id="@+id/joyStickLeft"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:layout_marginLeft="50dp"
    android:layout_marginBottom="10dp"/>

<com.example.akoni.control.JoyStickView
    android:id="@+id/joyStickRight"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_alignBottom="@+id/joyStickLeft"
    android:layout_alignParentEnd="true"
    android:layout_marginEnd="50dp" />

</RelativeLayout>

已编辑

操纵杆的完整代码。

public class JoyStickView extends SurfaceView implements SurfaceHolder.Callback, View.OnTouchListener{
private float centerX;
private float centerY;
private float baseRadius;
private float hatRadius;
private JoyStickListener joyStickCallback;

public JoyStickView(Context context){
    super(context);

    getHolder().setFormat(PixelFormat.TRANSPARENT);
    getHolder().addCallback(this);
    setZOrderOnTop(true);
    setOnTouchListener(this);

    if(context instanceof JoyStickListener){
        joyStickCallback = (JoyStickListener)context;
    }
}

public JoyStickView(Context context, AttributeSet attributeSet, int style){
    super(context, attributeSet, style);
    getHolder().addCallback(this);
    setOnTouchListener(this);

    if(context instanceof JoyStickListener){
        joyStickCallback = (JoyStickListener)context;
    }
}

public JoyStickView(Context context, AttributeSet attributeSet){
    super(context, attributeSet);
    getHolder().addCallback(this);
    setOnTouchListener(this);

    if(context instanceof JoyStickListener){
        joyStickCallback = (JoyStickListener)context;
    }
}

@Override
public void surfaceCreated(SurfaceHolder holder){
    setupDimensions();
    drawJoyStick(centerX, centerY);
}

@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {

}

@Override
public boolean onTouch(View v, MotionEvent event) {
    final float displacement;
    final float constrainX;
    final float constrainY;
    final float ratio;
    if(v.equals(this)){
        displacement = (float) Math.sqrt(Math.pow(event.getX() - centerX, 2) + Math.pow(event.getY() - centerY, 2));
        if(event.getAction() != MotionEvent.ACTION_UP){
            if(displacement < baseRadius) {
                drawJoyStick(event.getX(), event.getY());
                joyStickCallback.onJoyStickMoved((event.getX() - centerX)/baseRadius, (event.getY() - centerY)/baseRadius, getId());
            }
            else {
                ratio = baseRadius / displacement;
                constrainX = centerX + (event.getX() - centerX) * ratio;
                constrainY = centerY + (event.getY() - centerY) * ratio;

                drawJoyStick(constrainX, constrainY);
                joyStickCallback.onJoyStickMoved((constrainX - centerX)/baseRadius, (constrainY - centerY)/baseRadius, getId());
            }
        }
        else if(event.getAction() == MotionEvent.ACTION_UP){
            drawJoyStick(centerX, centerY);
            joyStickCallback.onJoyStickMoved(0, 0, getId());
        }
    }

    return true;
}

public void setupDimensions(){
    centerX = getWidth() / 2;
    centerY = getHeight() / 2;
    baseRadius = Math.min(getWidth(), getHeight()) / 3;
    hatRadius = Math.min(getWidth(), getHeight()) / 6;
}

public void drawJoyStick(float newX, float newY){

    if(getHolder().getSurface().isValid()) {
        Canvas canvas = this.getHolder().lockCanvas();
        Paint color = new Paint();

        canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

        //base Circle
        color.setARGB(100, 50, 50, 50);
        canvas.drawCircle(centerX, centerY, baseRadius, color);

        //top Circle
        color.setARGB(255, 0, 0, 255);
        canvas.drawCircle(newX, newY, hatRadius, color);

        getHolder().unlockCanvasAndPost(canvas);
    }
}

public interface JoyStickListener{
    void onJoyStickMoved(float xPercent, float yPercent, int source);
}

}

黑色仍然在那里。 我只想看到操纵杆，就是圆形的。 它已经可以了。 谢谢您的帮助。

Answer 1

您的操纵杆图像是否具有Alpha通道？ 如果不是，请使用“ Gimp”进行编辑，然后添加一个经修改的Alpha并擦除黑色区域。

Answer 2

您必须更改三行代码的顺序：

    setZOrderOnTop(true);
    getHolder().addCallback(this); 
    getHolder().setFormat(PixelFormat.TRANSPARENT);

并将它们放在所有JoyStickView中。 这个对我有用