安卓画板
程序员文章站
2022-07-15 16:26:03
...
我的第一个安卓画图板
1.画图思路
要画一个图形,首先的有一个最终把所画图形呈现或者显示出来的载体,所以的先有这么一个对象,由Imageview 创建这么个对象im。画图不是直接在这个对象上面画,而是通过间接的方式,先画在缓冲区,然后再把缓冲区上的图形‘贴’到im上,所以需要一个缓冲区对象,由Bitmap创建bi.既然是画图形,得有画图的工具,这个工具就是绘制图形的对象canvas和画笔对象pa。
2.Imageview 和Bi不能直接实例化对象,所以用方法findViewById()返回一个实际的对象,并用im来接收,用createBitmap()得到一个bi对象,注意在实例化canvas对象时,参数是bi。用setcolor()方法设置画笔颜色,用setStrokeWidth()方法设置画笔的粗细。
3.设有多个按钮,用来选择所要画的图形
声明一个字符串属性,存储图形的类型值
private String type ="line";
并设置一个下拉框,用来选择颜色,需要一个下拉框对象并实例化
//下拉框对象
private Spinner sp;
实例化
sp=(Spinner)findViewById(R.id.sp1);
sp.setOnItemSelectedListener(onItemClickListener);
在Strings.xml文件中设置这个下拉框中可供选择的选项,如下
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">DrawBan</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
<string-array name="faultRecords">
<item>red</item>
<item>yellow</item>
<item>white</item>
<item>green</item>
<item>blue</item>
<item>gray</item>
<item>purple</item>
</string-array>
</resources>
4.添加监听器,由于我的按钮加在了画布上面,需要两个不同的监听器,OnClickListener作用就是点击按钮时,要能识别出所点击的按钮是那个,在其方法里面实现,将点击的的东西转化为字符串,赋给type,
给创建监听器对象
private OnClickListener s = new OnClickListener(){
public void onClick(View v) {
//获取事件源对象
Button but = (Button)findViewById(v.getId());
type = but.getText().toString();
Log.d("MainActivity--onTouch", "---->"+type);
}
5.根据id找到控件对象:
Button btn1 = (Button) findViewById(R.id.btn1);其余按钮的添加方法类似。
6.给按钮添加监听器
btn1.setOnClickListener(s);其余添加方法类似。
7.给画布加监听器,画图操作在该函数内完成,由于需要用到开始和结束坐标,所以先定义开始和结束的横纵坐标,
float x1, x2, y1, y2,x3,y3;
对2的实现在重写方法是实现
// 方法的重写
public boolean onTouch(View v, MotionEvent event) {
// 图形的首尾坐标
// 调整图片大小
if (bi == null) {// 如果画板上为空的话
// 使显示的图片和所设定的内存缓冲图片大小等同
bi = Bitmap.createBitmap(im.getWidth(), im.getHeight(),
Config.ARGB_8888);//注意图片类型的选法
//要现在缓冲区来画
ca = new Canvas(bi);
im.setImageBitmap(bi);}
7.判断触发类型
// 判断触摸类型,是点击还是滑动
int action = event.getAction();
switch (action) {
// 如果动作是按下,则获得当前点的横纵坐标
case MotionEvent.ACTION_DOWN:
x1 = event.getX();
y1 = event.getY();
break;
// 如果是滑动的话,则记录尾坐标,并在画布上显示所画痕迹
case MotionEvent.ACTION_MOVE:
x2 = event.getX();
y2 = event.getY();
break;
case MotionEvent.ACTION_UP:
x2 = event.getX();
y2 = event.getY();
8.选择颜色
//通过选择颜色,设置画笔颜色
if(colorText.equals("red")){
pa.setColor(Color.RED);
}else if(colorText.equals("yellow")){
pa.setColor(Color.YELLOW);
}else if(colorText.equals("white")){
pa.setColor(Color.WHITE);
}else if(colorText.equals("green")){
pa.setColor(Color.GREEN);
}else if(colorText.equals("blue")){
pa.setColor(Color.BLUE);
}
9.选择图形
if (type.equals("line")) {
ca.drawLine(x1, y1, x2, y2, pa);
// 取得尾点的坐标后,又将其作为下一条线段的首坐标即,如此循环,直到最后一个点
} else if (type.equals("rect")) {
//Toast.makeText(MainActivity.this, "btn2", Toast.LENGTH_LONG).show();
ca.drawLine(x1, y1, x1, y2, pa);
ca.drawLine(x1, y1, x2, y1, pa);
ca.drawLine(x1, y2, x2, y2, pa);
ca.drawLine(x2, y1, x2, y2, pa);
} else if (type.equals("oval")) {
//if(i<=300){
//大小和位置都固定了
RectF rect=new RectF(x1, y1, 10, 20);
//《《《《《《《《大小和位置固定
ca.drawOval(rect, pa);
}else if(type.equals("circle")){
ca.drawCircle(x1, y1, 30, pa);
}else if(type.equals("triangle")){
ca.drawLine(x1, y1, x2, y2, pa);
ca.drawLine(x1, y1, 2*x1-x2, y2, pa);
ca.drawLine(x2, y2, 2*x1-x2, y2, pa);
}else if(type.equals("五角星")){
}else if(type.equals("箭头")){
}else if(type.equals("曲线")){
}
break;
10.通过重绘的方法,使图像显示出来
// 强制调用onDraw的方法重绘
im.invalidate();
return true;
11.效果:
当然,这只是粗略的效果,有些图形的功能没实现,或不够流畅,还有非常大的改进空间
1.画图思路
要画一个图形,首先的有一个最终把所画图形呈现或者显示出来的载体,所以的先有这么一个对象,由Imageview 创建这么个对象im。画图不是直接在这个对象上面画,而是通过间接的方式,先画在缓冲区,然后再把缓冲区上的图形‘贴’到im上,所以需要一个缓冲区对象,由Bitmap创建bi.既然是画图形,得有画图的工具,这个工具就是绘制图形的对象canvas和画笔对象pa。
2.Imageview 和Bi不能直接实例化对象,所以用方法findViewById()返回一个实际的对象,并用im来接收,用createBitmap()得到一个bi对象,注意在实例化canvas对象时,参数是bi。用setcolor()方法设置画笔颜色,用setStrokeWidth()方法设置画笔的粗细。
3.设有多个按钮,用来选择所要画的图形
声明一个字符串属性,存储图形的类型值
private String type ="line";
并设置一个下拉框,用来选择颜色,需要一个下拉框对象并实例化
//下拉框对象
private Spinner sp;
实例化
sp=(Spinner)findViewById(R.id.sp1);
sp.setOnItemSelectedListener(onItemClickListener);
在Strings.xml文件中设置这个下拉框中可供选择的选项,如下
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">DrawBan</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
<string-array name="faultRecords">
<item>red</item>
<item>yellow</item>
<item>white</item>
<item>green</item>
<item>blue</item>
<item>gray</item>
<item>purple</item>
</string-array>
</resources>
4.添加监听器,由于我的按钮加在了画布上面,需要两个不同的监听器,OnClickListener作用就是点击按钮时,要能识别出所点击的按钮是那个,在其方法里面实现,将点击的的东西转化为字符串,赋给type,
给创建监听器对象
private OnClickListener s = new OnClickListener(){
public void onClick(View v) {
//获取事件源对象
Button but = (Button)findViewById(v.getId());
type = but.getText().toString();
Log.d("MainActivity--onTouch", "---->"+type);
}
5.根据id找到控件对象:
Button btn1 = (Button) findViewById(R.id.btn1);其余按钮的添加方法类似。
6.给按钮添加监听器
btn1.setOnClickListener(s);其余添加方法类似。
7.给画布加监听器,画图操作在该函数内完成,由于需要用到开始和结束坐标,所以先定义开始和结束的横纵坐标,
float x1, x2, y1, y2,x3,y3;
对2的实现在重写方法是实现
// 方法的重写
public boolean onTouch(View v, MotionEvent event) {
// 图形的首尾坐标
// 调整图片大小
if (bi == null) {// 如果画板上为空的话
// 使显示的图片和所设定的内存缓冲图片大小等同
bi = Bitmap.createBitmap(im.getWidth(), im.getHeight(),
Config.ARGB_8888);//注意图片类型的选法
//要现在缓冲区来画
ca = new Canvas(bi);
im.setImageBitmap(bi);}
7.判断触发类型
// 判断触摸类型,是点击还是滑动
int action = event.getAction();
switch (action) {
// 如果动作是按下,则获得当前点的横纵坐标
case MotionEvent.ACTION_DOWN:
x1 = event.getX();
y1 = event.getY();
break;
// 如果是滑动的话,则记录尾坐标,并在画布上显示所画痕迹
case MotionEvent.ACTION_MOVE:
x2 = event.getX();
y2 = event.getY();
break;
case MotionEvent.ACTION_UP:
x2 = event.getX();
y2 = event.getY();
8.选择颜色
//通过选择颜色,设置画笔颜色
if(colorText.equals("red")){
pa.setColor(Color.RED);
}else if(colorText.equals("yellow")){
pa.setColor(Color.YELLOW);
}else if(colorText.equals("white")){
pa.setColor(Color.WHITE);
}else if(colorText.equals("green")){
pa.setColor(Color.GREEN);
}else if(colorText.equals("blue")){
pa.setColor(Color.BLUE);
}
9.选择图形
if (type.equals("line")) {
ca.drawLine(x1, y1, x2, y2, pa);
// 取得尾点的坐标后,又将其作为下一条线段的首坐标即,如此循环,直到最后一个点
} else if (type.equals("rect")) {
//Toast.makeText(MainActivity.this, "btn2", Toast.LENGTH_LONG).show();
ca.drawLine(x1, y1, x1, y2, pa);
ca.drawLine(x1, y1, x2, y1, pa);
ca.drawLine(x1, y2, x2, y2, pa);
ca.drawLine(x2, y1, x2, y2, pa);
} else if (type.equals("oval")) {
//if(i<=300){
//大小和位置都固定了
RectF rect=new RectF(x1, y1, 10, 20);
//《《《《《《《《大小和位置固定
ca.drawOval(rect, pa);
}else if(type.equals("circle")){
ca.drawCircle(x1, y1, 30, pa);
}else if(type.equals("triangle")){
ca.drawLine(x1, y1, x2, y2, pa);
ca.drawLine(x1, y1, 2*x1-x2, y2, pa);
ca.drawLine(x2, y2, 2*x1-x2, y2, pa);
}else if(type.equals("五角星")){
}else if(type.equals("箭头")){
}else if(type.equals("曲线")){
}
break;
10.通过重绘的方法,使图像显示出来
// 强制调用onDraw的方法重绘
im.invalidate();
return true;
11.效果:
当然,这只是粗略的效果,有些图形的功能没实现,或不够流畅,还有非常大的改进空间