Android画板

最新推荐文章于 2021-07-05 19:35:58 发布
最新推荐文章于 2021-07-05 19:35:58 发布
阅读量556 收藏 6
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zksdu/article/details/116115966
版权

文章目录

Android画板

LinePoint类定义
package com.example.myapplication;

public class LinePoint {
    float lineStartX;
    float lineStartY;
    float lineStopX;
    float lineStopY;

    public LinePoint(float lineStartX, float lineStartY, float lineStopX, float lineStopY) {
        this.lineStartX = lineStartX;
        this.lineStartY = lineStartY;
        this.lineStopX = lineStopX;
        this.lineStopY = lineStopY;
    }
}
MyView.java
package com.example.myapplication;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

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

public class MyView extends View {
    // 定义了几种绘制模式
    public static final int MODE_LINE = 1;
    public static final int MODE_CIRCLE = 2;
    public static final int MODE_RECT = 3;

    int mode = MODE_LINE;
    Paint paint = new Paint();
    List<LinePoint> linePointList = new ArrayList<>();
    float lineStartX;
    float lineStartY;
    float lineStopX;
    float lineStopY;

    // 圆心和半径
    float circleX;
    float circleY;
    float circleRadius;

    // 矩形
    float rectStartX;
    float rectStartY;
    float rectStopX;
    float rectStopY;

    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        paint.setStrokeWidth(4);
        paint.setDither(true);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        Log.e("MyView onTouchEvent", "x = " + x + "  y = " + y);

        // 如果是划线模式
        if (mode == MODE_LINE) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    lineStartX = x;
                    lineStartY = y;
                    break;

                case MotionEvent.ACTION_MOVE:
                    lineStopX = x;
                    lineStopY = y;
                    invalidate();
                    break;

                case MotionEvent.ACTION_UP:
                    LinePoint linePoint = new LinePoint(lineStartX, lineStartY, lineStopX, lineStopY);
                    linePointList.add(linePoint);
                    lineStartX=0;
                    lineStartY=0;
                    lineStopX=0;
                    lineStopY=0;
                    invalidate();

                    break;
            }
        }

        // 如果是画圆模式
        else if(mode == MyView.MODE_CIRCLE){
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    circleX = x;
                    circleY = y;
                    break;

                case MotionEvent.ACTION_MOVE:
                    // 计算半径
                    circleRadius = (float) Math.sqrt((x-circleX)*(x-circleX) + (y-circleY)*(y-circleY));
                    invalidate();
                    break;

                case MotionEvent.ACTION_UP:
                    break;
            }
        }

        // 如果是矩形模式
        else if(mode ==  MyView.MODE_RECT){
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    rectStartX = x;
                    rectStartY = y;
                    break;

                case MotionEvent.ACTION_MOVE:
                    rectStopX = x;
                    rectStopY = y;
                    invalidate();
                    break;

                case MotionEvent.ACTION_UP:
                    break;
            }
        }

        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        for (LinePoint linePoint : linePointList) {
            canvas.drawLine(linePoint.lineStartX, linePoint.lineStartY, linePoint.lineStopX,
                    linePoint.lineStopY, paint);
        }

        canvas.drawLine(lineStartX, lineStartY, lineStopX, lineStopY, paint);

        canvas.drawCircle(circleX, circleY, circleRadius, paint);

        canvas.drawRect(rectStartX, rectStartY, rectStopX, rectStopY, paint);
    }

    public void addPaintWidth() {
        float strokeWidth = paint.getStrokeWidth();
        paint.setStrokeWidth(strokeWidth + 1);
    }

    public void subPaintWidth() {
        float strokeWidth = paint.getStrokeWidth();
        paint.setStrokeWidth(strokeWidth - 1);
    }

    public void setPaintColor(int color) {
        paint.setColor(color);
    }

    public void setDrawMode(int mode) {
        this.mode = mode;
    }

    public void updoDraw() {
        linePointList.remove(linePointList.size()-1);
        invalidate();
    }
}
MainActivity.java
package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private Button btn1;
    private Button btn2;
    private Button btn3;
    private Button btn4;
    private Button btn5;
    private Button btn6;
    private Button btn7;
    private Button btn8;
    private MyView myView;

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

        btn1 = findViewById(R.id.btn1);
        btn2 = findViewById(R.id.btn2);
        btn3 = findViewById(R.id.btn3);
        btn4= findViewById(R.id.btn4);
        btn5= findViewById(R.id.btn5);
        btn6= findViewById(R.id.btn6);
        btn7= findViewById(R.id.btn7);
        btn8 = findViewById(R.id.btn8);

        myView = findViewById(R.id.myView);

        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.addPaintWidth();
            }
        });

        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.subPaintWidth();
            }
        });

        btn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.setPaintColor(Color.RED);
            }
        });

        btn4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.setPaintColor(Color.BLACK);
            }
        });

        btn5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.setDrawMode(MyView.MODE_LINE);
            }
        });

        btn6.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.setDrawMode(MyView.MODE_CIRCLE);

            }
        });

        btn7.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.setDrawMode(MyView.MODE_RECT);
            }
        });

        btn8.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.updoDraw();
            }
        });
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        Log.e("MainActivity", "x = " + x + "  y = " + y);
        return super.onTouchEvent(event);
    }
}
activity_mail.xml布局文件
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

    <com.example.myapplication.MyView
        android:id="@+id/myView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

  <HorizontalScrollView
      android:layout_width="match_parent"
      android:layout_height="50dp"
      app:layout_constraintBottom_toBottomOf="parent">

    <LinearLayout
        android:layout_width="1000dp"
        android:layout_height="50dp"
        android:background="@color/teal_200">
        <Button
            android:id="@+id/btn8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="撤销" />

        <Button
            android:id="@+id/btn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="划线" />


        <Button
            android:id="@+id/btn6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="圆形" />

        <Button
            android:id="@+id/btn7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="矩形" />

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="加粗" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="变细" />

        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="红色" />

        <Button
            android:id="@+id/btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="黑色" />
    </LinearLayout>

  </HorizontalScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>
绘制路径Path

新建一个PathPaint类型 保存每一笔的路径和笔的状态

package com.example.demo;

import android.graphics.Paint;
import android.graphics.Path;


public class PathPaint {
    Path path;
    Paint paint;

    public PathPaint(Path path, Paint paint) {
        this.path = path;
        this.paint = paint;
    }
}

在主界面中增加两个菜单 红色 和 蓝色 点击后设置Myview中Paint的颜色
代码如下

 		btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.setPaintColor(Color.RED);
            }
        });

        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.setPaintColor(Color.BLUE);
            }
        });

Myview代码如下：

package com.example.demo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

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

public class MyView extends View {
    List<PathPaint> pathPaintList = new ArrayList<>();

    Path path = new Path();
    Paint paint = new Paint();
    private int color;

    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.STROKE);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        for(PathPaint pathPaint : pathPaintList){
            canvas.drawPath(pathPaint.path, pathPaint.paint);
        }

        canvas.drawPath(path, paint);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                path.moveTo(x, y);
                break;

            case MotionEvent.ACTION_MOVE:
                path.lineTo(x, y);
                invalidate();
                break;

            case MotionEvent.ACTION_UP:
                PathPaint pathPaint = new PathPaint(path, paint);
                pathPaintList.add(pathPaint);
                path = new Path();
                paint = new Paint();
                paint.setStrokeWidth(5);
                paint.setStyle(Paint.Style.STROKE);
                paint.setColor(color);

                invalidate();

                break;
        }
        return true;
    }

    public void setPaintColor(int color) {
        this.color = color;
        paint.setColor(color);
    }
}
绘制图片

在这里插入图片描述

1.定义ImgParam类 保存图片位置和资源ID

package com.example.myapplication;

public class ImgParam {
    float imgX;
    float imgY;
    int imgId;

    public ImgParam(float imgX, float imgY, int imgId) {
        this.imgX = imgX;
        this.imgY = imgY;
        this.imgId = imgId;
    }
}

2.MyView中增加绘制图片的模式

package com.example.myapplication;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

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

public class MyView extends View {
    public static final int DRAW_PATH = 1;
    public static final int DRAW_IMG = 2;

    Path path = new Path();
    Paint paint = new Paint();
    int mode = DRAW_PATH;

    List<ImgParam> imgParamList =new ArrayList<>();


    // 绘图的位置
    float imgX;
    float imgY;
    int imgId;


    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(path, paint);

        if(imgId != 0) {
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), imgId);
            canvas.drawBitmap(bitmap, imgX, imgY, paint);
        }

        for (ImgParam imgParam : imgParamList){
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), imgParam.imgId);
            canvas.drawBitmap(bitmap, imgParam.imgX, imgParam.imgY, paint);
        }

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        if (mode == DRAW_PATH) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    path.moveTo(x, y);
                    break;

                case MotionEvent.ACTION_MOVE:
                    path.lineTo(x, y);
                    invalidate();
                    break;

                case MotionEvent.ACTION_UP:
                    break;
            }
        } else if (mode == DRAW_IMG) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    break;

                case MotionEvent.ACTION_MOVE:
                    imgX = x;
                    imgY = y;
                    invalidate();
                    break;

                case MotionEvent.ACTION_UP:
                    ImgParam imgParam =  new ImgParam(x, y, imgId);
                    imgParamList.add(imgParam);
                    this.imgId = 0;
                    break;
            }

        }


        return true;
    }

    public void setDrawMode(int mode) {
        this.mode = mode;
    }

    public void setDrawImgId(int imgId) {
        this.imgId = imgId;
    }
}

3.布局文件中增加菜单

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

    <com.example.myapplication.MyView
        android:id="@+id/myView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:layout_constraintBottom_toBottomOf="parent">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Path"
            android:id="@+id/btn1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="贴图1"
            android:id="@+id/btn2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="贴图2"
            android:id="@+id/btn3"/>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

4.在MainActivity中处理菜单事件

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private Button btn1;
    private Button btn2;
    private Button btn3;
    private MyView myView;

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

        btn1 = findViewById(R.id.btn1);
        btn2 = findViewById(R.id.btn2);
        btn3 = findViewById(R.id.btn3);
        myView = findViewById(R.id.myView);

        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.setDrawMode(MyView.DRAW_PATH);
            }
        });

        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.setDrawMode(MyView.DRAW_IMG);
                myView.setDrawImgId(R.drawable.smile);
            }
        });

        btn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.setDrawMode(MyView.DRAW_IMG);
                myView.setDrawImgId(R.drawable.ren);
            }
        });

    }
}
gdcpzk
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
初探安卓画板
gaosililin的专栏
02-16 603
在java学习使用画板到现在貌似都快半年了，初探安卓的自定义组件使用到画板感觉非常不适用的样子。 在java使用的画板跟安卓的画板是有挺大的区别，下面记录一下学校安卓的画板的使用  在java当中，话矩形圆形都是空心的，而在安卓默认却是填满的 java当中使用Graphcs.draw--   而在安卓却是吧画布当作参数放在后面…… package com.example.gaosi.ble
android实现画板功能
AIFBD
07-23 2689
这两天闲来无事做了一个简易的画板程序，和大家分享一下。 效果图： 这是一个灰常简单的画板，不过麻雀虽小，五脏俱全： 支持撤销（undo）； 支持反撤销（redo）； 支持橡皮擦（eraser）； 支持清除功能（clear）； 支持保存为图像（save）。 github地址点这里,欢迎fork,star 关键代码 非常简短，只有200来行 /** * Created by ...
android画板
aa529328914的博客
06-29 343
实现一个简单的android画板功能 主要功能有：画图，更换画布颜色，更换画笔颜色，笔迹粗细，当然还有最重要的放歌功能。 画图界面：界面代码 &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/to...
安卓简单的画板
FlyPig_Vip的博客
08-06 416
安卓简单的画板
Android画板开发之橡皮擦功能
08-26
"Android 画板开发之橡皮擦功能" Android 画板开发之橡皮擦功能是 Android 应用程序开发中一个常见的需求。该功能允许用户擦除画板上的内容，实现橡皮擦的功能。在本文中，我们将详细介绍 Android 画板开发之橡皮擦...
Android画板开发之撤销反撤销功能
08-26
Android 画板开发之撤销反撤销功能 Android 画板开发中，撤销和反撤销功能是非常重要的功能之一。撤销功能可以让用户撤销之前的操作，而反撤销功能可以让用户重新恢复之前撤销的操作。下面将详细介绍 Android 画板...
android 画板，白板，画图
12-10
在Android开发中，创建一个互动的画板应用是一项有趣且实用的任务。这个“android 画板，白板，画图”模块提供了一种简单的方法，让用户可以在屏幕上进行涂鸦、绘图、添加文字以及处理图像，非常适合用于教育、设计...
Android 画板(白板)源码 涂鸦 画图 图画
09-30
在Android平台上，开发一款画板应用，也称为白板或涂鸦应用，是常见的需求，尤其对于教育、设计和娱乐领域。本项目"Android 画板(白板)源码 涂鸦 画图 图画"提供了一个完整的实现，让用户能够自由地进行绘图操作。...
Android 实现画板功能
12-25
基于android实现了画板，支持返回上一次和下一次的绘制记录，支持清空画板，支持橡皮擦功能，支持保存到本地，支持画笔更换颜色
android 制作简单的画板
魏鹏同学
01-21 680
package com.weipeng.xuexi20160119; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import
【Android】制作一个简易的画板
EddieTries的博客
07-05 1146
前言 本文介绍使用Canvas、Paint、Path等原生API，实现一个简易的画板。 绘图原理 Paint Paint可以理解为我们现实中的画笔，在使用前我们需要对Paint进行初始化，比如颜色、画笔粗细、透明度等。为了让曲线更加的圆滑，我们也可以让Paint划出的内容做一些圆角处理等。下面是一个可以参考的Paint的初始化代码： // 使用抗锯齿模式初始化画笔 Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); // 设定当前画笔的绘制模式，STROKE为画线
Android 绘制画板 写字板
明耀的博客
08-29 1824
package com.mingshine.farmmachnav.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.util.AttributeSet; import android.view.Motio
Android简易画板：
Findingxu的博客
07-25 1054
刚开始学Android不久，写一个画板来熟悉事件处理和图像，以及界面。 功能：选颜色，选形状，画创意图形，选线条粗细，橡皮功能，清空功能 样式：用到菜单 分两个类来写： DrawingActivity: 选ImageView当画板，在画板上画显示东西，画图事件源是ImageView，加监听器OnTouchListener，清空功能事件源是Button，加监听器OnClickListen
Android 简易画板
stardust_lemon的博客
03-24 5853
用到的方法 画布Canvas 画笔Paint 路径Path 文件 File 位图 Bitmap 菜单 menu 创建一个Android项目，实现手绘功能的简易画板，并可以储存。 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schem...
Android 画画板
乔培宸的博客
04-30 477
public class MainActivity extends AppCompatActivity { private static final String TAG = "jojo"; private ImageView iv; private Bitmap srcBitmap; private Bitmap copyBitmap; private
android 实现画板
最新发布
06-01
要实现 Android 画板，可以按照以下步骤： 1. 创建一个新的 Android 项目，选择 Empty Activity。 2. 在 XML 布局文件中添加一个 SurfaceView，用于绘制图形。 3. 在代码中获取 SurfaceView 对象，并实现 SurfaceHolder.Callback 接口，用于监听 SurfaceView 的状态变化。 4. 在 SurfaceHolder.Callback 接口的 surfaceCreated 方法中获取 Canvas 对象，并设置画笔的属性。 5. 在 SurfaceHolder.Callback 接口的 surfaceChanged 方法中设置画布的宽高。 6. 在 SurfaceHolder.Callback 接口的 surfaceDestroyed 方法中释放画布资源。 7. 实现 onTouchEvent 方法，监听用户的手势操作，根据手势绘制图形。 8. 在清空画布时，可以调用 Canvas.drawColor(Color.WHITE) 方法清空画布。 以上是 Android 画板的基本实现步骤，具体实现可以参考相关的教程和示例代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值