android - 创建/更改/删除/撤消 Canvas 上不同形状的数量，按钮的 onClick()

Question

我正在为 Canvas 上单击按钮时的形状创建 android 应用程序。

我想要的:

我有三个按钮“方形”、“圆形”、“三角形”。每次我点击按钮时，该形状的对象将被创建并显示在一个 Canvas 上的随机位置。(完成)

点击每个形状会使其变成另一个形状。点击一个正方形会使它变成一个圆点击一个圆圈会使它变成一个三角形点击三角形会变成正方形(完成)

长按形状可以删除形状。(完成)

如何实现撤销功能!

尝试和错误:为了实现此功能，到目前为止我尝试了以下代码，在这些代码中，我可以在单击按钮时使用 java 中的位图和 xml 中的 ImageView 创建一个形状。

Update_29/10:我使用相同的代码并使用动态相对布局添加 View 在 Canvas 上创建多个形状。

我的问题:

这是通过点击按钮在 Canvas 上创建形状的正确方法(位图和 ImageView )吗？

我现在可以在 Canvas 上创建多个形状，但每次我都在创建新的 Canvas 实例!还有其他方法可以实现吗？

Update_29_10:

如何点击形状以便删除形状和撤消功能。

XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context=".MainActivity">

<RelativeLayout
    android:id="@+id/relative4"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    android:layout_above="@+id/btnCircle"
    android:background="@color/colorAccent">

</RelativeLayout>
<Button
    android:id="@+id/btnSquare"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:text="@string/square" />

<Button
    android:id="@+id/btnCircle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_toRightOf="@+id/btnSquare"
    android:text="@string/circle" />


<Button
android:id="@+id/btnTriangle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
    android:layout_toRightOf="@+id/btnCircle"
    android:text="@string/triangle" />

<Button
    android:id="@+id/btnUndo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/btnTriangle"
    android:layout_alignParentBottom="true"
    android:text="@string/undo" />

主要 Activity .java:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Context mContext;
    private Resources mResources;
    private RelativeLayout mRelativeLayout;
    private Button btnSquare, btnCircle, btnTriangle,btnUndo,btnState;
    private int mSuareCount=0,mCircleCount=0,mTriangelCount=0;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
    }

    private void initViews() {
        mContext = getApplicationContext();
        mResources = getResources();
        mRelativeLayout = (RelativeLayout) findViewById(R.id.rl);
        btnSquare = (Button) findViewById(R.id.btnSquare);
        btnCircle = (Button)findViewById(R.id.btnCircle);
        btnTriangle = (Button)findViewById(R.id.btnTriangle);
        btnUndo=(Button)findViewById(R.id.btnUndo);
        setOnClickListeners();
    }

    private void setOnClickListeners() {
        btnSquare.setOnClickListener(this);
        btnCircle.setOnClickListener(this);
        btnTriangle.setOnClickListener(this);
        btnUndo.setOnClickListener(this);
    }

    @RequiresApi(api = Build.VERSION_CODES.M)
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btnSquare:
                drawSquare(null);
                mSuareCount++;
                break;

            case R.id.btnCircle:
                drawCircle(null);
                mCircleCount++;
                break;

            case R.id.btnTriangle:
                drawTriangle(null);
                mTriangelCount++;
                break;

            case R.id.btnUndo:

                break;

        }
    }

    private void drawSquare(ImageView imageView) {
        Bitmap bitmap = Bitmap.createBitmap(
                50, // Width
                50, // Height
                Bitmap.Config.ARGB_8888 // Config
        );

        Canvas canvas = new Canvas(bitmap);
        canvas.drawColor(Color.LTGRAY);
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.YELLOW);
        paint.setAntiAlias(true);

        int padding = 50;
        Rect rectangle = new Rect(
                padding, // Left
                padding, // Top
                canvas.getWidth() - padding, // Right
                canvas.getHeight() - padding // Bottom
        );
        canvas.drawRect(rectangle, paint);
        addViews(bitmap,imageView,1);

        // Display the newly created bitmap on app interface
        if (imageView == null) {
            imageView = new ImageView(this);
        }
        imageView.setImageBitmap(bitmap);

        final ImageView finalImageView = imageView;
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                drawCircle(finalImageView);
                mSuareCount--;
                mCircleCount++;
            }
        });
    }

    private void drawCircle(ImageView imageView) {
        Bitmap bitmap = Bitmap.createBitmap(
                50, // Width
                50, // Height
                Bitmap.Config.ARGB_8888 // Config
        );

        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.RED);
        paint.setAntiAlias(true);

        int radius = Math.min(canvas.getWidth(), canvas.getHeight() / 2);
        int padding = 5;
        canvas.drawCircle(
                canvas.getWidth() / 2, // cx
                canvas.getHeight() / 2, // cy
                radius - padding, // Radius
                paint // Paint
        );

        addViews(bitmap,imageView,2);

        // Display the newly created bitmap on app interface
        if (imageView == null) {
            imageView = new ImageView(this);
        }
        imageView.setImageBitmap(bitmap);

        final ImageView finalImageView = imageView;
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                drawTriangle(finalImageView);
                mCircleCount--;
                mTriangelCount++;
            }
        });

    }

    private void drawTriangle(ImageView imageView) {
        Bitmap bitmap = Bitmap.createBitmap(
                500, // Width
                500, // Height
                Bitmap.Config.ARGB_8888 // Config
        );

        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(),
                bitmap.getHeight());


        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.YELLOW);
        paint.setAntiAlias(true);
        Point point1_draw = new Point(90, 0);
        Point point2_draw = new Point(0, 180);
        Point point3_draw = new Point(180, 180);

        Path path = new Path();
        path.moveTo(point1_draw.x, point1_draw.y);
        path.lineTo(point2_draw.x, point2_draw.y);
        path.lineTo(point3_draw.x, point3_draw.y);
        path.lineTo(point1_draw.x, point1_draw.y);
        path.close();
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#3F51B5"));
        canvas.drawPath(path, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);
        //addViews(bitmap,imageView);

        addViews(bitmap,imageView,3);

        if (imageView == null) {
            imageView = new ImageView(this);
        }
        imageView.setImageBitmap(bitmap);
        final ImageView finalImageView = imageView;
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                drawSquare(finalImageView);
                mSuareCount++;
                mTriangelCount--;
            }
        });

    }

    private void addViews(Bitmap bitmap, ImageView imageView, final int value) {
        final int min = 20;
        final int max = 80;


        Drawable d = getResources().getDrawable(R.mipmap.ic_launcher_round);
        final int w = d.getIntrinsicWidth();
        final int random = new Random().nextInt((max - min) + 1) + min;

        RelativeLayout relative4 = (RelativeLayout) findViewById(R.id.relative4);
        int width = relative4.getMeasuredWidth();
        int height = relative4.getMeasuredHeight();
        if (imageView == null) {
            imageView = new ImageView(this);
        }
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(100, 100);
        params.setMargins(new Random().nextInt((width - 0) + 1), new Random().nextInt((height - 0) + 1), 10, 10);
        imageView.setLayoutParams(params);
        imageView.setImageBitmap(bitmap);


        if (imageView != null) {
            ViewGroup parent = (ViewGroup) imageView.getParent();
            if (parent != null) {
                parent.removeView(imageView);
            }
        }

        relative4.addView(imageView);

        final ImageView finalImageView = imageView;


        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                switch (value) {
                    case 1:
                        drawCircle(finalImageView);
                        mSuareCount--;
                        mCircleCount++;
                        break;

                    case 2:
                        drawTriangle(finalImageView);
                        mCircleCount--;
                        mTriangelCount++;
                        break;

                    case 3:
                        drawSquare(finalImageView);
                        mTriangelCount--;
                        mSuareCount++;
                        break;

                }

            }
        });

        imageView.setOnLongClickListener(new View.OnLongClickListener(){


            @Override
            public boolean onLongClick(View v) {
                  switch (value) {
                case 1:
                    relative4.removeView(finalImageView);
                    mSquareCount--;
                    break;

                case 2:
                    relative4.removeView(finalImageView);
                    mCircleCount--;
                    break;

                case 3:
                    relative4.removeView(finalImageView);
                    mTriangleCount--;
                    break;
            }
            return true;
        });
    }

}

Answer 1

您可以使用以下方法(伪代码)实现功能:

第一步:

interface ShapeInfo {
void drawShape(Canvas canvas);
}

第 2 步:使用此接口(interface)实现 3 个不同的类(Rect、Triangle、Circle)

第 3 步:为 RelativeLayout 设置背景

第四步:在RelativeLayout中添加一个CustomView使这个自定义 View 透明。

    public class CustomView extends ImageView{

    ArrayList<ShapeInfo> alShapesInfo = new ArrayList();
            public CustomView(Context context) {
                super(context);
                // TODO Auto-generated constructor stub
            }

            @Override
            protected void onDraw(Canvas canvas) {
                super.onDraw(canvas);
                for ( ShapeInfo s:alShapesInfo)
                  s.drawShape(canvas);

            }
public void addShapeInfo(ShapeInfo s){alShapeinfo.add(s); invalidate();}

public void undo(){alShapeInfo.delete(alShapeInfo.size()-1); invalidate();}
        }

第五步:在主 Activity 中单击添加三角形、圆形、矩形调用 customview.addshapeinfo

第六步:撤销调用

customview.undo