Android:单击按钮在自定义 Canvas 中绘制圆圈

Question

我正在做一个简单的鼓组应用程序，用户可以在其中单击按钮以发出相应的声音并在 Canvas 上的随机位置绘制一个圆圈。对于 Canvas ，我创建了一个名为 CanvasView 的自定义 View ，然后我将该 CanvasView 实现到 MainActivity 中，这样每次在 MainActivity 中使用 OnClickListener 单击按钮时我都可以控制该 View 。
但是，我不知道如何使用 OnClickListener 实际控制(画一个圆圈)CanvasView。这部分我需要帮助
这是我的 MainActivity 类代码:

public class MainActivity extends Activity {
//setup variables for soundpool
.
.
.
//implements CanvasView

CanvasView mCanvasView;

//set up soundID for each sound
.
.  
.
//setup buttons
Button mKick;
.
. 
.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
//set up soundpools 
.
. 
.

//example, the kick drum button
//kick drum
    mKick = (Button) findViewById(R.id.kick);
    mKick.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        soundPool.play(kick, leftVolume, rightVolume, priority, no_loop, normal_playback_rate);

//          mCanvasView.draw(CanvasView.mCanvas);

    }
});

这是我的 CanvasView 代码

public class CanvasView extends View {
public Paint mPaint;
public static Canvas mCanvas;
//constructor
public CanvasView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mPaint = new Paint();
}
//what I want to draw is here
protected void onDraw(Canvas canvas) {
    mCanvas = canvas;
    super.onDraw(mCanvas);
    canvas.drawColor(Color.GRAY);
    mPaint.setColor(Color.BLUE);
    mPaint.setStyle(Style.STROKE);
    mPaint.setAntiAlias(true);
    canvas.drawCircle(30, 30, radius, mPaint);

这是我的 MainActivity 布局 XML

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/GridLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="3"
android:orientation="horizontal"
android:rowCount="5"
tools:context=".GridXMLActivity" >

<Button
    android:id="@+id/kick"
    android:layout_width="78dp"
    android:layout_height="wrap_content"
    android:layout_column="1"
    android:layout_gravity="center_horizontal|fill_vertical"
    android:layout_row="3"
    android:text="Kick" />

<com.example.virtualdrumset.CanvasView
    android:id="@+id/canvasView1"
    android:layout_width="143dp"
    android:layout_height="169dp"
    android:layout_column="1"
    android:layout_gravity="left|top"
    android:layout_row="0" />

对于给您带来的不便或错误，我深表歉意。这是我第一次提问。

Answer 1

您不应该直接从 Activity 中调用 canvas 的 onDraw 函数。而是在 Canvas View 中创建一个公共(public)方法并在那里编写您的逻辑并在最后调用 invalidate 。这会调用 onDraw 方法，内容会根据您的新逻辑再次绘制到屏幕上。

如果您希望每次单击按钮时在屏幕上的随机位置绘制一个圆圈，您可以这样做

public class CanvasView extends View {
    public Paint mPaint;
    public static Canvas mCanvas;
    private int mPivotX = 0;
    private int mPivotY = 0;
    private int radius = 60;

    //constructor
    public CanvasView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
    }

    public void drawCircle() {

        int minX = radius * 2;
        int maxX = getWidth() - (radius *2 );

        int minY = radius * 2;
        int maxY = getHeight() - (radius *2 );

        //Generate random numbers for x and y locations of the circle on screen
        Random random = new Random();
        mPivotX = random.nextInt(maxX - minX + 1) + minX;
        mPivotY = random.nextInt(maxY - minY + 1) + minY;

        //important. Refreshes the view by calling onDraw function
        invalidate();

    }

    //what I want to draw is here
    protected void onDraw(Canvas canvas) {
        mCanvas = canvas;
        super.onDraw(mCanvas);
        canvas.drawColor(Color.GRAY);
        mPaint.setColor(Color.BLUE);
        mPaint.setStyle(Style.STROKE);
        mPaint.setAntiAlias(true);
        canvas.drawCircle(mPivotX, mPivotY, radius, mPaint);
    }
}

然后点击按钮

mKick.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        soundPool.play(kick, leftVolume, rightVolume, priority, no_loop, normal_playback_rate);

          mCanvasView.drawCircle()

    }

希望对您有所帮助!