如此随意的android涂鸦工具

最新推荐文章于 2024-06-08 09:30:56 发布

高寒竹林

最新推荐文章于 2024-06-08 09:30:56 发布

阅读量1k

点赞数

分类专栏： Android 文章标签： Bitmap 自定义View BitmapShader Canvas Painter

本文链接：https://blog.youkuaiyun.com/tianyiii/article/details/44905281

版权

Android 专栏收录该内容

21 篇文章

订阅专栏

这篇博客介绍了如何在Android中实现涂鸦功能。通过创建一个DrawingView类，继承自View，重写构造方法、onDraw()和onTouchEvent()。在onDraw()中进行绘图，onTouchEvent()处理触摸事件并规划画笔路径。还提供了setPattern方法来定制画笔样式，并展示了在MainActivity中使用自定义DrawingView的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实现涂鸦这个功能，首先需要以下几步：

1、要实现一个DrawingView类，这个类继承View；

2、重写其父类的构造方法，并初始化涂鸦的画笔、画布的画笔和路径；

3、重写onDraw方法，在这个方法中主要进行涂鸦的绘制工作；

4、重写onTouchEvent事件，在这个方法计算当前的画笔的左边，规划画笔的路径，调用invalidate()方法不断调用onDraw方法进行绘制；

5、自定义setPattern方法设置画笔的描边效果；

6、在MainActivity以及其布局文件中引入自定义的DrawdingView对象;

代码如下:

public class DrawingView extends View {

    private Path drawPath;
    private Paint drawPaint;
    private Paint canvasPaint;
    private int paintColor = 0xFF000000;
    private Bitmap canvasBitmap;
    private Canvas drawCanvas;

    public DrawingView(Context context) {
        super(context,null);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        canvasBitmap = Bitmap.createBitmap(w,h, Bitmap.Config.ARGB_8888);
        drawCanvas = new Canvas(canvasBitmap);
    }

    public DrawingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setupDrawing();
    }

    private void setupDrawing() {
        drawPaint = new Paint();
        drawPath = new Path();
        drawPaint.setColor(paintColor);
        drawPaint.setAntiAlias(true);
        drawPaint.setStrokeWidth(50);
        drawPaint.setStyle(Paint.Style.STROKE);
        drawPaint.setStrokeJoin(Paint.Join.ROUND);
        drawPaint.setStrokeCap(Paint.Cap.ROUND);
        canvasPaint = new Paint(Paint.DITHER_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(canvasBitmap,0,0,canvasPaint);
        canvas.drawPath(drawPath,drawPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float touchX = event.getX();
        float touchY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:drawPath.moveTo(touchX,touchY);break;
            case MotionEvent.ACTION_MOVE:drawPath.lineTo(touchX,touchY);break;
            case MotionEvent.ACTION_UP:drawPath.lineTo(touchX, touchY);
                drawCanvas.drawPath(drawPath, drawPaint);
                drawPath.reset();break;
            default:return false;
        }
        invalidate();
        return true;
    }

    public void setPattern(String newPattern){
        invalidate();
        int patternId = getResources().getIdentifier(newPattern,"drawable","com.example.lucky.drawapp");
        Bitmap patternBMP = BitmapFactory.decodeResource(getResources(),patternId);
        BitmapShader patternBMPshader = new BitmapShader(patternBMP, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        drawPaint.setColor(0xFFFFFFFF);
        drawPaint.setShader(patternBMPshader);
    }
}

布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFCCCCCC"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
        <com.example.lucky.drawapp.DrawingView
            android:id="@+id/draw_view"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="3dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="3dp"
            android:layout_weight="1"
            android:background="#FFFFFFFF"/>
    
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical" >
            <!-- top row -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >
                <ImageButton
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/pattern1"
                    android:contentDescription="pattern"
                    android:onClick="paintClicked"
                    android:tag="pattern1" />
                <ImageButton
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/pattern2"
                    android:contentDescription="pattern"
                    android:onClick="paintClicked"
                    android:tag="pattern2" />
                <ImageButton
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/pattern3"
                    android:contentDescription="pattern"
                    android:onClick="paintClicked"
                    android:tag="pattern3" />
                <ImageButton
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/pattern4"
                    android:contentDescription="pattern"
                    android:onClick="paintClicked"
                    android:tag="pattern4" />
            </LinearLayout>
            <!-- bottom row -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >
                <ImageButton
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/pattern5"
                    android:contentDescription="pattern"
                    android:onClick="paintClicked"
                    android:tag="pattern5" />
                <ImageButton
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/pattern6"
                    android:contentDescription="pattern"
                    android:onClick="paintClicked"
                    android:tag="pattern6" />
                <ImageButton
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/pattern7"
                    android:contentDescription="pattern"
                    android:onClick="paintClicked"
                    android:tag="pattern7" />
                <ImageButton
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_margin="2dp"
                    android:background="@drawable/pattern8"
                    android:contentDescription="pattern"
                    android:onClick="paintClicked"
                    android:tag="pattern8" />
            </LinearLayout>
        </LinearLayout>
    
    </LinearLayout>

Activity中的代码：

public class MainActivity extends Activity {

    private DrawingView drawView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawView = (DrawingView) findViewById(R.id.draw_view);
    }


    @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;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    public void paintClicked(View view) {
        String pattern = view.getTag().toString();
        drawView.setPattern(pattern);
    }
}

效果图如下：