1.收获
今天的主要任务就是接着昨天没有完成的画板,昨天我们实现了旁边的进度条,今天我们需要将这个进度条改为可以改变画笔的大小的工具,我们在旁边设置了颜色,通过按钮来实现画笔颜色的切换,我们还在下方添加了撤销,清空,橡皮擦,上一步,保存的功能,使得这个画板更加与真正的画板接近。在这些功能中,并没有什么好多的新知识,都是以前学过的东西,只不过有些忘记了,通过这个项目我们有复习了以前学过的东西。这个 项目是我们第二次写的比较大(对于现在的我来说)的项目,并且这个还是比较实用的,因为在我们生活在还可以直接有的,不管怎样这一切为了什么自己是最清楚的。
2.技术
(1)界面布局以及操作的实现
(2)画板的操作
(3)画画结果的操作
3.技术的应用和实践
(1)界面布局以及操作的实现
首先我们要先确定这个界面需要哪些空间或者容器,而我们需要滑动条,画板,调色区,操作区
而且在滑动条,画板,调色区这三个需要用相对布局来约束
1.滑动条的布局
首先我们想到让滑动条位于屏幕的左边,并且要随着屏幕的转动而转动。所以我们需要对滑动条进行操作,并且滑动条,画板,调色区这三者在同一个布局中(在xml文件中进行操作)
效果:
2.画板的布局
在布局画板之前我们想到了我们需要他两边的控件的位置,所以我们先对调色区域进行布局并且要随着屏幕的转动而转动。并且我们需要对他进行添加id以方便在后面去寻找它,来画画
效果:
3.调色区域的布局
我们想到让滑动条位于屏幕的右边,并且要随着屏幕的转动而转动。由于我们需要对他进行操作,搜易我们给每一个的调色区域添加了一个点击事件 android:onClick="choicecolor",我们要在mainActivity中去实现它
android:onClick="choicecolor"方法的实现,由于我们点击这个按钮,就需要画笔改变到这种颜色,所以我们需要去读取这个区域的颜色,并将画笔设置为当前颜色
//选择颜色 获取按钮上面的颜色
public void choicecolor(View view) {
//获取按钮上面的颜色
Drawable drawable=view.getBackground();
//获取颜色
drawboardview.setLinecolor (((ColorDrawable) drawable).getColor());
}
效果:
4.操作的布局
在操作栏我们只需要对他进行一个布局,添加上几个操作按钮就可以了,按钮的布局为线性布局,给每一个按钮添加一个点击事件,并在我们要在mainActivity中去实现它
各部分按钮的操作实现的函数
//撤销
public void goBack(View view) {
}
//清空
public void clear(View view) {
}
//橡皮擦
public void eraser(View view) {
}
//保存
public void save(View view) {
}
//上一步 还原
public void lastStep(View view) {
}
我们的布局和一些操作就是这样,接下来的就需要我们去实现对画板的一些操作
(2)画板的操作
我们需要对画板进行一些操作
1.我们对画板属性的定义
a.画板背景
//设置画板背景
setBackgroundColor(Color.WHITE);
b.画笔属性(颜色,粗细)
我们默认的画笔颜色是黑色,粗细为5
private int Linecolor= Color.BLACK;
private int Linesize=5;
在这里我们需要将画笔大小域前面的滑动条相关联,我们按照画笔的最大为
private int max=100;//设置最大值
按照这个比例和那个滑动条长度的比例进行搭配
我们要一个监听者来监听滑动条的改变
//滑动改变的监听者
private OnSliderChangeListener onSliderChangeListener;
//得到改变后的大小
private void callback(){
if(onSliderChangeListener!=null){
if(getHeight()>getWidth()){
progress=position/getHeight();
}else{
progress=position/getWidth();
}
onSliderChangeListener.progresschange(progress*max);
}
}
然后我们对滑动条添加的事件,当监听者监听到有事件发生时去得到改变后的值
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//小圆点放大
thumScale=2;
if(getHeight()getWidth()){
position=getWidth();
}
}else{
//纵向时
position=event.getY();
if(position<0){
position=0;
}else if(position>getHeight()){
position=getHeight();
}
}
callback();
break;
case MotionEvent.ACTION_UP:
thumScale=4;
break;
}
if(style==SLIDER){
invalidate();//重新绘制
}
return true;
}
这时我们需要重新设置改变后的值
//获取画板视图对象
drawboardview=findViewById(R.id.board);
slider.setProgress(drawboardview.getLinesize());
slider.setOnSliderChangeListener(new Slider.OnSliderChangeListener() {
@Override
public void progresschange(float progress) {
//滑动条的进度值设置为线条的宽度
drawboardview.setLinesize((int) progress);
}
});
在画板里面我们设置了两个数组,这两个数组是用来存放我们的画画的结果,一便于对于一些对画画结果的操作
private ArrayList graphs;//操作数组
private ArrayList orginalgraphs;//原始数组
添加事件,在我们画的过程中我们将我们画的结果存入这两个数组中
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//创建当前这条线对应的Paint和path
Paint mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Linecolor);
mPaint.setStrokeWidth(Linesize);
mPaint.setStyle(Paint.Style.STROKE);
mPath=new Path();
//数组图形的起点
mPath.moveTo(event.getX(),event.getY());
//保存当前图形的详细信息
Graph temp=new Graph(mPaint,mPath);
graphs.add(temp);
orginalgraphs.add(temp);
break;
case MotionEvent.ACTION_MOVE:
//链接从path的终点到当前触摸点的起点
mPath.lineTo(event.getX(),event.getY());
break;
case MotionEvent.ACTION_UP:
break;
}
invalidate();
return true;
}
(3)画画结果的操作
我们画完后总有一些不如意,所以我们添加了一些操作
1.撤销
//撤销
public void goBack(View view) {
drawboardview.removeLast();
}
2.清空
//清空
public void clear(View view) {
drawboardview.removeall();
}
3.橡皮擦
橡皮擦的原理就是我们通过设置画笔的颜色域画板颜色一样
//橡皮擦
public void eraser(View view) {
//获取画板的drawble
ColorDrawable drawable= (ColorDrawable) drawboardview.getBackground();
//设置线条颜色与背景色相同
if(drawable!=null){
drawboardview.setLinecolor(drawable.getColor());
}
}
4.上一步
//上一步 还原
public void lastStep(View view) {
drawboardview.returnToLastStep();
}
上一步,清空,清空的具体操作我们是在画板类里面完成的
//删除最后一个图形
public void removeLast(){
if(graphs.size()>0){
graphs.remove(graphs.size()-1);
postInvalidate();
}
}
//删除所有 清空
public void removeall(){
graphs.clear();
postInvalidate();
}
//还原上一步
public void returnToLastStep(){
//判断缓存中有
if(graphs.size()