通过触摸屏事件实现在图片上涂鸦——Android

 目的:记录在屏幕上滑动的轨迹,实现在图片上涂鸦的功能

 开发工具:Android Studio3.3.2 

 实现过程:

  • 第一步:新建drawBoard.java用于自定义view
    1. 将图片放到drawable文件夹下,用BitmapFactory.decodeResource加载图片,然后建立原始图像的位图
    2. 定义函数clear():将处理后的图像Bitmap new2_Bitmap设置为原始图像,达到清除涂鸦的效果。
    3. 记录绘制的图形:通过变量isClear判断是否已经清除涂鸦,如果清除则创建新图形的画布,反之则创建当前图形的画布,然后通过isMove变量判断是否在屏幕上滑动,滑动时则在画布上画线条,最后返回绘制的图像。
    4. 定义触摸屏事件:首先是获取触摸时的坐标,当用户按下屏幕时将isMove设置为false表示无绘图并更新画布,而当用户滑动时则设置isMove=true,记录滑动轨迹并更新画布,将涂鸦轨迹实时显示。

 

//drawBoard.java
package com.example.myclassapplication;
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.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;public class drawBoard extends View {Paint paint = null;  //定义画笔Bitmap originalBitmap = null;  //存放原始图像Bitmap new1_Bitmap = null;  //存放从原始图像复制的位图图像Bitmap new2_Bitmap = null;   //存放处理后的图像float startX = 0,starY = 0;  //画线的起点坐标float endX = 0,endY = 0;  //画线的终点坐标boolean isMove = true; //设置是否画线的标记boolean isClear = false;  //设置是否清除涂鸦的标记int color = Color.BLACK;   //设置画笔的颜色为绿色float strokeWidth = 4.0f;  //设置画笔的宽度public drawBoard(Context context, AttributeSet attrs){super(context,attrs);//copy:Bitmap是不能通过“ A = B ”来传递的,这样只是把B的引用给了A而已originalBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.flower1).copy(Bitmap.Config.ARGB_8888,true);//从资源中获取原始图像new1_Bitmap = Bitmap.createBitmap(originalBitmap);//建立原始图像的位图}public void clear(){new2_Bitmap = Bitmap.createBitmap(originalBitmap);   //清除涂鸦invalidate();isClear = true;}public void setStyle(float strokeWidth){  //设置画笔宽度this.strokeWidth = strokeWidth;}@Overrideprotected void onDraw(Canvas canvas){  //显示绘图super.onDraw(canvas);canvas.drawBitmap(HandWriting(new1_Bitmap),0,0,null);}public Bitmap HandWriting(Bitmap o_Bitmap){  //记录绘制图形Canvas canvas = null;if(isClear){canvas = new Canvas(new2_Bitmap);}else{canvas = new Canvas(o_Bitmap);}paint = new Paint();paint.setStyle(Paint.Style.STROKE);  //空心图paint.setAntiAlias(true);//去锯齿paint.setColor(color);paint.setStrokeWidth(strokeWidth);if(isMove){canvas.drawLine(startX,starY,endX,endY,paint);}startX = endX;starY = endY;if(isClear){return new2_Bitmap;}return o_Bitmap;}@Overridepublic boolean onTouchEvent(MotionEvent event){endX = event.getX();endY = event.getY();//按下时不绘图if(event.getAction() ==MotionEvent.ACTION_DOWN){isMove = false;invalidate();return true;}else if(event.getAction() ==MotionEvent.ACTION_MOVE){isMove = true;invalidate();return true;}return super.onTouchEvent(event);}} 
  • 第二步:设计布局文件draw_picture.xml
    1. 导入上述自定义的view
    2. 在布局中添加一个Button用于清除涂鸦
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center_horizontal"android:orientation="vertical"><com.example.myclassapplication.drawBoardandroid:id="@+id/draw_board"android:layout_width="wrap_content"android:layout_height="380dp"/><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="horizontal"android:gravity="center_horizontal"><Buttonandroid:id="@+id/bt_clear"android:layout_height="wrap_content"android:layout_width="200dp"android:layout_marginTop="20dp"android:background="@color/colorPrimary"android:text="清屏"/></LinearLayout>
</LinearLayout>
  • 第三步:设计主控制文件MainActivity.java
    1. 关联View组件
    2. 给Button添加清屏事件

 

import android.view.View;
import android.widget.Button;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
package com.example.myclassapplication;

public class MainActivity extends AppCompatActivity {
    private drawBoard draw_board = null;
    private Button clear = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.draw_picture);
        draw_board = (drawBoard)findViewById(R.id.draw_board);
        clear = (Button) findViewById(R.id.bt_clear);
        clear.setOnClickListener(new mClick());
    }

    class mClick implements View.OnClickListener {
        @Override
        public void onClick(View v) {
            draw_board.clear();
        }
    }
}

 ——运行效果截图(给小花画上蝴蝶)

好吧,涂鸦技术有限~我会继续加油的 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/27867.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

涂鸦蓝牙协议移值(初级)

一、 移植前所需资料 ①获取涂鸦SDK包&#xff1b; ②基于我们芯片平台生成的库文件&#xff08;将下面的图片发给涂鸦技术支持&#xff0c;然后会提供tuya_ble_lib_51802.lib&#xff09;&#xff1b; 【库不正确报的错误】 ③《涂鸦_ble_sdk_sdk说明_v2》文档&#xff1b; ④…

iOS 图片编辑——涂鸦——随手指移动随意画线

iOS 涂鸦 我们已经讲过画直线 和画带箭头的线段 参考&#xff1a;http://blog.csdn.net/lwjok2007/article/details/50885376 这节 我们尝试做一下 随意画 手指移动到哪里就在哪里画线 如下图所示&#xff1a; 使用Xcode创建项目&#xff0c;起名&#xff1a;TestFingerLine …

html5制作涂鸦板,HTML5实现涂鸦板

最近闲的,看了看html5,强大的绘图功能让我惊奇,于是,写了个小玩意---涂鸦板,能实现功能有:画画,改色,调整画笔大小 html5的绘图可以分为点,线,面,圆,图片等,点和线,这可是所有平面效果的基点,有了这两个东西,没有画不出来的东西,只有想不到的算法。 先上代码了…

Android对长图进行滑动涂鸦

由于项目需要对页面进行像做笔记一样的涂绘&#xff0c;所以这个功能点就应运而生&#xff0c;思路是加载完了页面以后就将整个截屏保存&#xff0c;进入编辑页面就将保存图片的地址传入自定义的长图加载控件中&#xff0c;高度的变化与滑动借助于一个修改过得竖直的seekbar,空…

AndroidStudio实现在图片上涂鸦并记录涂鸦轨迹

AndroidStudio实现在图片上涂鸦&#xff0c;并保存涂鸦轨迹 开个坑&#xff0c;终于有时间整理一下这个项目里用到的比较重要的技术 虽然最后甲方没有采用&#xff08;笑&#xff09; 因为博主学艺不精&#xff0c;有很多小bug AndroidStudio版本&#xff1a;2020.3.1.25 实现效…

仿微信图片编辑软件,涂鸦、裁剪、添加文本等常规操作

1、需求 在做一个野外地质数据采集软件开发的过程中&#xff0c;有时候需要进行拍照保存&#xff0c;在此&#xff0c;我们直接通过Intent调用系统的拍照功能&#xff1b;然后&#xff0c;调用系统的裁剪功能&#xff0c;可以按照需要的大小进行裁剪&#xff1b;但是但是但是。…

iOS 图片涂鸦功能

大致原理&#xff1a; 1.准备几张切图。 2.监听手势&#xff0c;手势开始&#xff0c;随机添加一张图片&#xff1b;手势移动&#xff0c;累加手势距离&#xff0c;到达一定值再添加一张随机图片并清零累加距离&#xff0c;依次类推。 demo地址&#xff1a;https://github.co…

抖音私信名片_抖音消息卡片_抖音跳转微信_抖音私信跳转_抖音落地页

近期见到许多人到求这一的信息卡片个人名片是怎么做的&#xff0c;我四处请人了解&#xff0c;总算找到这一卡片的做法。 这个是抖音内置的作用&#xff0c;它是抖音橱窗的一个作用&#xff0c;沒有开通抖音橱窗是完成不上这一作用的&#xff0c;得下开通橱窗作用&#xff0c;…

AI辅助编程,GitHub copilot chat 体验

最近&#xff0c;看到很多大佬分享 GitHub copilot chat &#xff0c;据说能够让效率翻倍&#xff0c;抱着不相信&#xff0c;打假的心态我也弄一个&#xff0c;体验一下&#xff0c;结果真的很赞&#xff0c;下面分享使用 GitHub copilot chat 的过程 ​ 首先&#xff0c;我们…

工作完三年后,分享分享Java后端开发的一些心得

今年进入我工作的第四个年头, 三年多的时间里, 算上实习, 经历过3家公司. 见过了各种各样的同事, 也算见过各式各样的代码. 这篇文章主要是想分享一下一个java后端三年的一些感悟, 关于编程上的, 工作上的, 和同事相处上的. 一: 关于开发 我把关于编程的写在最前面, 我觉得对于…

打工人都在用的AI工具(第二期)

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学&#xff0c;点击下方链接报名&#xff1a; 量化投资速成营&#xff08;入门课程&#xff09; Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…

一人改代码搞崩推特,马斯克气疯:全部重写!

鱼羊 丰色 发自 凹非寺量子位 | 公众号 QbitAI “马斯克气疯了”&#xff01; 就在今天&#xff0c;推特又双叒崩溃了&#xff0c;图片和任何链接都打不开。 据马斯克自己的说法&#xff0c;原因只是“API的一个小改动”。 但后果很严重&#xff0c;起码在网友们看来&#xff0…

【真北直播笔记】董越:简明DevOps学习地图

缘起 真北敏捷社区的宗旨是&#xff1a;求知、连接。求知就是学习&#xff0c;家里没矿的话&#xff0c;学习是一个人最重要的动力之源。连接就是把人拉在一起&#xff0c;我们相信人与人的互动会带来美好的变化。今天的直播是把大家拉在一起学习&#xff0c;就是求知、连接。 …

云原生可观测领域的半壁江山,这次被 Grafana 和 Cilium 给拿下了

两个多月前&#xff0c;Grafana 实验室宣布与 Cilium 母公司 Isovalent 建立战略合作伙伴关系[1]&#xff0c;希望通过 Grafana 开源的可观测性全家桶组件&#xff0c;帮助各个基础架构团队深度探测 Kubernetes 集群工作负载的安全、性能和相互之间的连接状况。在这之前&#x…

爽翻!Github Copilot X发布,集成了GPT-4,远不止帮写代码

点击上方“编程技术进阶”&#xff0c;加"星标" 重磅干货&#xff0c;第一时间送达 大家好&#xff0c;我是编哥。今天看到Github Copilot X发布&#xff0c;真的不只帮写代码&#xff0c;不信往下看。 Copilot X 的本事&#xff0c;当你选中一段代码&#xff0c;可以…

AI 告诉你 一行代码生成树形结构

一、前言 在我们日常开发中生成树形结构是无可避免的&#xff0c;比如权限管理的层级结构&#xff0c;学校企业的组织结构以及我们日常开发的菜单列表等等。我最近看到过一篇文章&#xff0c;在面试的过程中&#xff0c;会被要求手写一下如何根据扁平的数据结构生成一个树形结构…

巴比特 | 元宇宙每日必读:AI概念股集体大跌、光年之外卖给美团、ChatGPT也涨不动了,大模型热潮正在降温?创业者如何抉择?...

摘要&#xff1a;据甲子光年报道&#xff0c;在高喊“要做中国版OpenAI”之后的第136天&#xff0c;王慧文把光年之外卖给了美团。从整体商业视角看&#xff0c;光年之外被美团收购只是企业间常见的收购动作。但对于国内AI行业来说&#xff0c;这笔收购似乎预示着仅火热半年的A…

ChatGPT来了,全国百万打工人都慌了......

关注我们丨文末赠书 如果说上个月AIGC的热度还只停留在技术圈&#xff0c;那么最近AIGC的影响力已经辐射到普通打工人了&#xff01; 4月18日&#xff0c;国内办公软件巨头金山正式发布了生成式人工智能应用WPS AI&#xff0c;这也是国内协同办公赛道首个类ChatGPT式应用&#…

BSP按键适配

笔记目录 GPIO按键适配PS&#xff1a;每次修改适配都要再客制化一下,来更新修改。&#xff01;&#xff01;&#xff01;一、GPIO按键适配&#xff08;Rk&#xff09;linux键值二、GPIO适配&#xff1a;RK平台&#xff08;android11&#xff09;调试&#xff1a;1、adb命令打开…

ubuntu和ros安装后的初始化

huanyu机器人学习&#xff0c;要把代码学会 分区规则&#xff1a;以350G左右为例 找到空闲&#xff1a; ext4→efi 逻辑分区 1G ext4→交换空间 逻辑分区 30/32G&#xff08;按照内存选&#xff0c;16G用32&#xff09; 挂载点→ / → 主分区 →100G 挂载点→/usr → 逻辑分区…