我们能使用Path对象绘制一个圆形吗?(在参数中,例如drawPath())

4
我编写了一个在Canvas上绘制的程序。
它提供了一个弹出菜单,其中包含3个绘图工具选项:
  1. 在屏幕上刮过时绘制直线
  2. 基于屏幕上的起点和终点绘制直线
  3. 绘制圆形
此外,还有以下选项:
  1. 清除
  2. 撤消
在对线条执行撤销操作时,没有任何问题,因为两者均基于路径。(使用 List<Path>)。但是问题就从这里开始了。圆形是使用Point对象绘制的。所以问题如下:
  1. 我无法让Android区分线和圆的绘制顺序。例如:我先画了5条线,然后画了5个圆,或者反过来。目前没有智能方式来遵循它们的绘制顺序。因此,撤消同时绘制线和圆的画布会导致混乱。
  2. 当前代码(尚未深入考虑)需要点击2次才能撤消圆形,而不是1次。
以下是共享的代码(比较复杂)。我试图为每个绘图工具(线,圆)专门创建一个类--它可以正常工作--除了--它没有在Canvas上画任何东西。所以,又把所有代码打包到一个类中。
代码如下:
package com.example.orbit_.undofortouch;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.os.Bundle;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.PopupMenu;
import android.widget.Toast;


import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {

    Button b1, b2, b3;
    PopupMenu popup;
    int dtool;
    boolean touch,circle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LinearLayout linearLayout = (LinearLayout) findViewById(R.id.linearLayout2);
        final DrawPanel dp = new DrawPanel(this);
        linearLayout.addView(dp);

        b1 = (Button) findViewById(R.id.button1);
        b1.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                dp.Clear();
            }
        });

        b2 = (Button) findViewById(R.id.button2);
        b2.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                dp.Undo();
            }
        });

        b3 = (Button) findViewById(R.id.button3);
        b3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                popup = new PopupMenu(MainActivity.this, v);
                popup.getMenuInflater().inflate(R.menu.menu_main, popup.getMenu());

                popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {

                    public boolean onMenuItemClick(MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.touch:
                                dtool = 1;
                                break;
                            case R.id.line:
                                dtool = 2;
                                break;
                            case R.id.circle:
                                dtool = 3;
                                break;
                        }

                        Log.v("EDITL:", "Drawtool:".concat(String.valueOf(item.getTitle())));

                        Toast.makeText(MainActivity.this,"Clicked popup menu item " + item.getTitle(),Toast.LENGTH_SHORT).show();
                        return true;
                    }

                });
                popup.show();
            }
        });

   }




class DrawPanel extends View implements View.OnTouchListener {

    Bitmap bmp;

    Canvas canvas;
    List<Path> paths, undone;
    List<Point> circlePoints,removeCircles;
    Paint paint;
    Path path;
    Point point;

    public DrawPanel(Context context, AttributeSet attributeSet, int defStyle) {
        super(context, attributeSet, defStyle);
    }

    public DrawPanel(Context context) {
        super(context);
        paint = new Paint();
        path = new Path();
        paths = new ArrayList<>();
        undone = new ArrayList<>();
        circlePoints = new ArrayList<>();
        removeCircles = new ArrayList<>();

        canvas = new Canvas();

        this.setOnTouchListener(this);

        paint.setStrokeWidth(3);
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setDither(true);
        paint.setAntiAlias(true);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setStrokeJoin(Paint.Join.ROUND);



        bmp = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.desert);
        touch=false;
        circle=false;

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }


    @Override
    protected void onDraw(Canvas canvas) {

        for (Path p : paths)
            canvas.drawPath(p, paint);

        if (touch)
            canvas.drawPath(path, paint);
        touch = false;
        Log.v("Inside onDraw","Circle is".concat(String.valueOf(circle)));

            for (Point p : circlePoints)
                canvas.drawCircle(p.x, p.y, 5, paint);


    }


    float mX, mY,mx,my;
    final float TOUCH_TOLERANCE = 0;



    private void touch_start(float x, float y) {
        undone.clear();
        Log.v("ONTOUCH:", "Inside DOWN".concat("DOWN-X---:").concat(String.valueOf(x)).concat("**DOWN-Y---:").concat(String.valueOf(y)));
        path.reset();
        path.moveTo(x, y);
        mX = x;
        mY = y;
        mx = x;
        my = y;
    }

    private void touch_up() {
        paths.add(path);
        path = new Path();
    }

    private void touch_move(float x, float y) {
        path.moveTo(mX, mY);
        Log.v("ONTOUCH:", "Inside MOVE".concat("mX:").concat(String.valueOf(mX)).concat("mY:").concat(String.valueOf(mY)));
        Log.v("ONTOUCH:", "Inside MOVE".concat("MOVE-X---:").concat(String.valueOf(x)).concat("**MOVE-Y---:").concat(String.valueOf(y)));
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);
        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
            path.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
            mX = x;
            mY = y;
        }

        path.lineTo(mX, mY);

        Log.v("MOVE:", " PATH ADDED & New Created");


    }




    @Override
    public boolean onTouch(View v, MotionEvent event) {

        float x = event.getX();
        float y = event.getY();

        switch (dtool) {

            case 1:
                touch=true;
                Touch(v, event, x, y);
                break;

            case 2:
                Line(v,event,x,y);
                break;

            case 3:
                Circle(v,event,x,y);
                break;

        }
        Log.v("ONTOUCH:", "OUTSIDE CASE");
        return true;
    }

    public void Line(View v, MotionEvent event, float x, float y) {
        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:
                touch_start(x, y);
                invalidate();
                break;

            case MotionEvent.ACTION_UP:
                touch_up();
                invalidate();
                break;

            case MotionEvent.ACTION_MOVE:
                touch_move(x, y);
                invalidate();
                break;
        }
    }

    public void Touch(View v, MotionEvent event, float x, float y) {
        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:
                touch_start(x, y);
                invalidate();
                canvas.drawPath(path, paint);
                break;

            case MotionEvent.ACTION_UP:
                touch_up();
                invalidate();
                canvas.drawPath(path, paint);
                break;

            case MotionEvent.ACTION_MOVE:
                touch_move(x, y);
                invalidate();

                break;
        }
    }

    public void Circle(View v, MotionEvent event, float x, float y)
    {   point = new Point();
        point.x = (int)x;
        point.y = (int)y;
        path.moveTo(x,y);
        circle=true;
       if(event.getAction()==MotionEvent.ACTION_DOWN) {

           circlePoints.add(new Point(Math.round(point.x), Math.round(point.y)));
           invalidate();
           Log.v("Circle", "Inside Circle");
           circlePoints.add(point);
            paths.add(path);
           
       }
    }

    public void Clear() {
        paths.clear(); //Needs to be experimented
        path.reset();
        invalidate();
    }

    public void Undo() {
        if (paths.size() > 0) {
            undone.add(paths.remove(paths.size() - 1));
            invalidate();
        }
        else if(circlePoints.size()>0)
        {
            removeCircles.add(circlePoints.remove(circlePoints.size()-1));
            invalidate();
        }
    }
  }
}

XML布局代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >


    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="0"
        android:layout_gravity="top">


    </LinearLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Undo"
        android:id="@+id/button2"
        android:layout_gravity="right"
        android:layout_marginTop="-50dp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Clear"
        android:layout_gravity="center_vertical|bottom"
        android:layout_marginTop="-50dp"
        android:enabled="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tools"
        android:id="@+id/button3"
        android:layout_gravity="center_horizontal"
        android:layout_weight="0"
        android:layout_marginTop="-50dp" />

</LinearLayout>

XML主菜单代码:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">

    <item
        android:id="@+id/touch"
        android:title="Touch"/>
    <item
        android:id="@+id/circle"
        android:title="Circle"/>
    <item
        android:id="@+id/line"
        android:title="Line"/>



</menu>

1
“我们能使用Path对象绘制一个圆吗?” 是的:Path#addCircle(float x,float y,float radius,Path.Direction dir) - pskink
嘿,你抓住我了。因此,我已经更新了问题。如果你阅读场景或目的,你会理解我的情况,以便提供更有同情心的答案 :) - Shridhar
抱歉,我只能理解标题,无法理解其余部分...那么你实际上想要实现什么? - pskink
我在那里输入了所有内容,这是最好的解释方式。简而言之,一个可以接受线条和圆形,并且能够按照正确的顺序撤销它们的画布。 - Shridhar
另外,上面的代码需要点击两次才能撤销一个绘制的圆。如果这个问题得到解决(我明天会尝试),那么上述问题仍然存在。感谢您的努力。 - Shridhar
4个回答

10
Path.addCircle(float x,float y,float radius, Path.Direction)

这段简单的代码就解决了问题。因为将添加圆形的点包含在Path对象中。而paths.addPath(path)只是将其添加到以前绘制线条的路径列表中。

因此,撤消也变得容易和自然。这就是解决方案。

感谢原始解决方案@pskink。

P.S:今天我意识到,放弃未完成的项目并不是一个好习惯,但对某些人来说,在某种程度上却是好的,因为你脱离了熟悉的环境,现在可以按照正常方式思考,这以前是不可能的。


1
要明确一点,这里的path是指你的路径名称,而不是在开头使用Path,否则会出现“无法从静态上下文引用非静态方法'addCircle(float, float, float, android.graphics.Path.Direction)'” 的错误提示。 - Elliptica

0

我认为这可能对一些人有帮助,所以我想提出另一个解决方案

我更喜欢手动完成它:

publiv void drawCircle(float center_x, float center_y, float radius, double omega) {
    /*
    Circle with center(a, b)
        
    equation of circle :
    (x - a)^2 + (y - b)^2 = radius^2
        
    x = (+- sqrt( radius^2 - (y - b)^2 )) + a
    y = (+- sqrt( radius^2 - (x - a)^2 )) + b
        
    omega -- angular velocity = angular displacement / time
    describes how many rotation(s) in 1s : ? rad / s
    OR
    use how much time for 1 revolution : 2pi rad / ? s
    */
    Path path = new Path();
    // path.addCircle(x, y, radius, Path.Direction.CCW);
    path.moveTo(center_x + radius, center_y);
        
    for (float i = center_x + radius; i >= center_x - radius; --i) {  // center-x +- radius
        // x : right -> left
        // y : anti-clockwise
        path.lineTo(i, (long) - Math.sqrt(radius * radius - (i - center_x) * (i - center_x)) + center_y);
    }
    
    for (float i = center_x - radius; i <= center_x + radius; ++i) {  // center-x +- radius
        // x : left -> right
        // y : anti-clockwise
        path.lineTo(i, (long) Math.sqrt(radius * radius - (i - center_x) * (i - center_x)) + center_y);
    }

    // and the draw in canvas with path part
}

然后,path 将从右侧移动(0弧度),向上(逆时针)(最终到达 pi/2 弧度、pi 弧度、3pi/2 弧度、2pi 弧度),并完成以中心点 (center_x, center_y) 和半径 radius 的圆的路径。

// 这里可以忽略变量 omega 哈哈

希望对你有所帮助。


0

棒棒糖+

只需将圆形也作为路径即可。您可以进行360度的弧形,那就是一个圆。然后删除所有处理圆形的其他代码。

Path path = new Path();
path.addArc(0,0,50,50,0,360);

这个应该替换什么?这段代码解决了什么问题?为什么它能够工作? - Alfabravo
他存储了一系列路径。只需将圆形也作为一条路径即可。您可以进行360度的弧形,这将成为一个圆形。然后删除所有其他处理圆形的代码,因为它们是不同的实体。 - Tatarize
抱歉没有回复。我正在同时处理三个项目。一旦我回到这个项目,可能是今天或明天,我会让你知道的。感谢回复。我很快会尝试并互动。 - Shridhar
@Tatarize,圆心应该是哪个属性?圆必须画在一个点上。这个点应该是中心点。半径函数应该怎样使用? - Shridhar
Path.addCircle(float x,float y,float radius, Path.Direction) 怎么样? - Shridhar
我必须承认那是一个更优雅的解决方案。 - Tatarize

0

完整答案:

  private Path thumbPath = new Path();


  private void updatePath() {
        float centerX = getWidth()/2.0f;
        float centerY = getHeight()/2.0f;

        thumbPath.reset();
        thumbPath.addCircle(centerX, centerY , thumbRadius-borderThickness , Path.Direction.CW);
        thumbPath.close();

    }

  @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(thumbPath, thumbPaint);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        updatePath();
    }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接