Android开发笔记之简易画画板的制作

最新推荐文章于 2024-04-13 20:17:06 发布
最新推荐文章于 2024-04-13 20:17:06 发布
阅读量882 收藏 4
点赞数 2
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30090871/article/details/51373723
版权

如果有这样的需求，有多种颜色可供选择，通过seekbar调节画笔的粗细，实现在画板上涂鸦的功能。没有考虑其他的功能，只是对前面有关Android图像处理和Canvas的知识进行一个运用。
一.布局
三个颜色button，一个橡皮擦按钮，一个seekbar，一个imageView

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.verney.board.MainActivity" 
    android:orientation="vertical">

    <LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="center_horizontal">
        <Button 
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="#EA2000"
            android:id="@+id/red"
            android:onClick="red"
            android:layout_weight="1"/>
        <Button 
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="#41A62D"
            android:id="@+id/green"
            android:layout_marginLeft="10dp"
            android:onClick="green"
            android:layout_weight="1"/>
        <Button 
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="#036FCB"
            android:id="@+id/blue"
            android:layout_marginLeft="10dp"
            android:onClick="blue"
            android:layout_weight="1"/>
        <Button 
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:id="@+id/xiangpi"
            android:onClick="xiangpi"
            android:layout_marginLeft="10dp"
            android:text="橡皮"
            android:layout_weight="1"/>
    </LinearLayout>
    <SeekBar 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/seekbar"
        android:layout_marginTop="40dp"/>
    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iv"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"/>

</LinearLayout>

二.逻辑实现
首先我们理一下思路：
1.准备好画板，画笔，和画纸，原图（后面会讲到这样能够精确画笔的轨迹，即线条会随着你的手指移动，设计到相对点的确定）
2.画画应该是这样一个流程：我们点击一个颜色按钮选择一种颜色，调节seekbar选择画笔的粗细，然后在画板上画画。
3.所以，逻辑应该是这样的，我们事先初始化画板：找到一张合适图片作为原图（当然Imageview是自适应的），然后自己生成一张bitmap尺寸是get原图的尺寸，因为这样我们在画画的时候，需要获取ImageView的中坐标，如果你设计的画板尺寸不是和ImageView一样的尺寸，会导致画画不会随着手指移动，而是有误差。

    basebitmap=BitmapFactory.decodeResource(getResources(), R.drawable.bg);
        copybitmap=Bitmap.createBitmap(basebitmap.getWidth(),basebitmap.getHeight(),basebitmap.getConfig());
        canvas=new Canvas(copybitmap);

        //设置画板颜色
        canvas.drawColor(Color.WHITE);
        paint=new Paint();                                                                               

        //设置画笔颜色
//      paint.setColor(Color.RED);

        //设置画笔粗细
        paint.setStrokeWidth(0);
        iv.setImageBitmap(copybitmap);

        //设置画笔风格
//      paint.setStyle(Style.STROKE);

准备好画板等初始操作，我们需要对颜色Button进行设计点击事件设置画笔颜色，需要对ImageView设计触摸事件实现线条的画出，需要对seekbar设计滑动事件以此设置画笔的粗细。
颜色，橡皮点击事件

public void red(View view){
        paint.setColor(Color.RED);
    }
    public void green(View view){
        paint.setColor(Color.GREEN);
    }
    public void blue(View view){
        paint.setColor(Color.BLUE);
    }
    public void xiangpi(View view){
        paint.setColor(Color.WHITE);
    }

seekbar点击事件

seekbar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

            public void onStopTrackingTouch(SeekBar seekBar) {
                // TODO Auto-generated method stub
                int progress=seekBar.getProgress();

                float count=progress/2f;
                paint.setStrokeWidth(count);
            }

            public void onStartTrackingTouch(SeekBar seekBar) {
                // TODO Auto-generated method stub

            }

            public void onProgressChanged(SeekBar seekBar, int progress,
                    boolean fromUser) {
                // TODO Auto-generated method stub

            }
        });

ImageView触摸事件及其画线操作

iv.setOnTouchListener(new OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    startx=event.getX();
                    starty=event.getY();
                    break;

                case MotionEvent.ACTION_MOVE:
                    stopx=event.getX();
                    stopy=event.getY();
                    canvas.drawLine(startx, starty, stopx, stopy, paint);
                    startx=event.getX();
                    starty=event.getY();

                    iv.setImageBitmap(copybitmap);
                    break;
                case MotionEvent.ACTION_UP:
                    break;
                }
                return true;
            }
        });

这样基本事件都完成了。
这里写图片描述
Manactivity.class

package com.verney.board;


import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;

public class MainActivity extends Activity {

    private Bitmap basebitmap,copybitmap;
    private Bitmap bitmap;
    private Canvas canvas;
    private Paint paint;
    ImageView iv;
    TextView huaxian;
    private float startx,starty;
    SeekBar seekbar;
    public void red(View view){
        paint.setColor(Color.RED);
    }
    public void green(View view){
        paint.setColor(Color.GREEN);
    }
    public void blue(View view){
        paint.setColor(Color.BLUE);
    }
    public void xiangpi(View view){
        paint.setColor(Color.WHITE);
    }
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv=(ImageView) findViewById(R.id.iv);
        seekbar=(SeekBar) findViewById(R.id.seekbar);

//      basebitmap=BitmapFactory.decodeResource(getResources(), R.drawable.);
//      canvas
        init();

        seekbar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

            public void onStopTrackingTouch(SeekBar seekBar) {
                // TODO Auto-generated method stub
                int progress=seekBar.getProgress();

                float count=progress/2f;
                paint.setStrokeWidth(count);
            }

            public void onStartTrackingTouch(SeekBar seekBar) {
                // TODO Auto-generated method stub

            }

            public void onProgressChanged(SeekBar seekBar, int progress,
                    boolean fromUser) {
                // TODO Auto-generated method stub

            }
        });
        iv.setOnTouchListener(new OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    startx=event.getX();
                    starty=event.getY();
                    break;

                case MotionEvent.ACTION_MOVE:
                    float stopx=event.getX();
                    float stopy=event.getY();
                    canvas.drawLine(startx, starty, stopx, stopy, paint);
                    startx=event.getX();
                    starty=event.getY();

                    iv.setImageBitmap(copybitmap);
                    break;
                case MotionEvent.ACTION_UP:
                    break;
                }
                return true;
            }
        });
    }
    private void init() {
        basebitmap=BitmapFactory.decodeResource(getResources(), R.drawable.bg);
        copybitmap=Bitmap.createBitmap(basebitmap.getWidth(),basebitmap.getHeight(),basebitmap.getConfig());
        canvas=new Canvas(copybitmap);

        //设置画板颜色
        canvas.drawColor(Color.WHITE);
        paint=new Paint();                                                                               

        //设置画笔颜色
//      paint.setColor(Color.RED);

        //设置画笔粗细
        paint.setStrokeWidth(0);
        iv.setImageBitmap(copybitmap);

        //设置画笔风格
//      paint.setStyle(Style.STROKE);
    }

}
qq_30090871
关注
Android开发：一个简单的画板
YouAreTea的博客
04-02 1226
思路：通过View.setOnTouchListener()提供的Api获取到手指触摸屏幕的坐标，然后通过Canvas.drawLine()在 bitmap 上画出手指经过的路径。 建议先参阅 Android开发：对图片进行简单的编辑。第一步： 向 drawable 文件夹中添加一个背景图，以作画板背景。假设文件名为 bg.jpg。 往布局文件中添加一个ImageView以作画板。假设其 i
Android画画板的制作方法
01-05
本文实例为大家分享了Android画画板展示的具体代码，供大家参考，具体内容如下 main.xml布局 <RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android xmlns:tools=http://schemas.android.com/tools android:id=@+id/activity_main android:layout_width=match_parent android:layout_height=match_parent tools:context
Android studio实现画板功能
最新发布
2401_84149381的博客
04-13 870
代码真的是重质不重量，质量高的代码，是当前代码界提倡的，当然写出高质量的代码肯定需要一个相当高的专业素养，这需要在日常的代码书写中逐渐去吸收掌握，谁不是每天都在学习呀，目的还不是为了一个，为实现某个功能写出高质量的代码。所以，长征路还长，大家还是好好地做个务实的程序员吧。最后，小编这里有一系列Android提升学习资料，有兴趣的小伙伴们可以来看下哦~《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！
android实现画板功能
mockingbirds的专栏
10-27 3225
上一篇博客实现了android自定义圆形图像这篇博客给大家实现基于xfermode的遮罩层画板功能。首先我会先实现一个简单的画板功能。实现简单的画板功能这里我们的画板是全屏实现的，所以先写一个工具类ScreenUtil来获得屏幕的宽和高的值。 ScreenUtil.javapublic static int[] getScreenSize(Context context) { in
Android基础小画板的实现（SurfaceView版）
weixin_37653455的博客
12-28 590
首先，我们先明确步骤： 1.实现布局 2.定义一个类继承于SurfaceView，并实现其构造方法； 3.定义画笔及path对象，通过path对象绘制； 4.开始绘制： 定义画布->绑定画布->绘制画布->解绑画布； 5.定义一个清除按钮。 （当然这其中包括Callback回掉、触摸事件等等，具体见下文详解。在文末有完整代码。） 效果图如下： 具体实现过程如下： 第一
【Android入门03】从0开发一个绘画板
n0ahmayberry的博客
06-29 1061
前言 前2章我们已经学习了如何制作一个计算器，如何制作一个手势解锁页面。不过这些都只是开胃菜，并不能算一个比较完整的程序。今天我们就来学习一下如何开发一个较为完整的应用——绘画板。本文主要分为界面搭建和实现逻辑两个部分。 需求分析 在进行程序开发之前，我们首先需要明确这个应用应该具备什么功能。一个合格的绘画板，首先应该具有如下功能： 1.调节画笔粗细，画笔颜色功能 2.橡皮擦功能 3.撤销功能 在实现了基本功能后，你还可以选择对功能进行扩充，如： 1.将作品保存到本地，并进行分享 2.从本地相册选择图片，
安卓简单的画板
FlyPig_Vip的博客
08-06 419
安卓简单的画板
android 画板编辑,android实现简单的画画板实例代码
weixin_29664819的博客
05-26 253
public class MainActivity extends Activity {private ImageView iv;private Bitmap baseBitmap;private Canvas canvas;private Paint paint;@Overrideprotected void onCreate(Bundle savedInstanceState) {super....
Android 多媒体开发学习之制作一个简单的画板
半月旋空
07-30 1209
一个简单的画板，可以绘制，可以选择颜色，可以保存。 当然了这种工具一般常用的通讯软件都是会有的，比如QQ， 飞秋等 其中我们必须监听手指的触摸事件，手指的触摸事件就分为3种： 按下，抬起，移动。 通常我们只需要关系按下的时候，然后就是整个手指滑动的过程。然后将手指滑动的过程绘制为不同的直线。当然也可以设置绘制的颜色，绘制直线的宽度等。 public class MainActivity
android 制作简单的画板
魏鹏同学
01-21 689
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 开发实例简单涂鸦板
09-01
本文主要介绍 Android 简单涂鸦板,这里提供了代码示例和实现效果图，有兴趣的小伙伴可以参考下
Android简易画板源码
08-31
使用Android的自定义View写的Android画板程序，主要使用DrawPath()实现，需要的童鞋可以下来看看。
Android多媒体之画画板开发案例分享
01-20
在Android开发中，创建一个多功能的“画画板”应用是一个有趣的实践，它涉及到自定义View、多媒体处理以及用户交互等多个方面。在这个案例中，我们将深入探讨如何实现这样一个画画板。 首先，我们需要创建一个...
android实现简单的画画板实例代码
09-04
在Android平台上，创建一个简单的画画板应用主要涉及的是图形绘制和用户交互的处理。这个实例代码展示了一个基本的画画板实现，用户可以在屏幕上绘制线条。关键在于使用Android提供的Canvas类和Paint类，以及监听...
Android如何实现画板功能？
大模型学习路线
06-30 1244
Android实现画板主要有2种方式，一种是用自定义View实现，另一种是通过Canvas类实现。当然自定义View内部也是用的Canvas。本文将分析两种方法，第一种就是用SurfaceView来实现，在这里介绍一下关于SurfaceView的知识：SurfaceView继承自View，两者都可以实现绘图功能，那么他们有什么不同呢？ 先说下Android绘制视图的原理——View通过刷新来绘制视图，Android系统则通过发出VSYNC信号进行屏幕绘制，玩游戏的朋友都应该知道"垂直同步"，VSYNC就是垂
【Android】制作一个简易的画板
EddieTries的博客
07-05 1157
前言 本文介绍使用Canvas、Paint、Path等原生API，实现一个简易的画板。 绘图原理 Paint Paint可以理解为我们现实中的画笔，在使用前我们需要对Paint进行初始化，比如颜色、画笔粗细、透明度等。为了让曲线更加的圆滑，我们也可以让Paint划出的内容做一些圆角处理等。下面是一个可以参考的Paint的初始化代码： // 使用抗锯齿模式初始化画笔 Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); // 设定当前画笔的绘制模式，STROKE为画线
【安卓开发】Android实现画板
我们都有光明的未来
12-31 1308
画板，手写板的实现
Android App：用Canvas绘图实现简单画板（附源码）
海月汐辰
12-05 2245
Android App：用Canvas绘图实现简单画板 一、直接看真机运行效果： 二、编译环境android studio，源码下载：https://download.csdn.net/download/qq_37858386/12015355 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值