Learned how to make a simple drawing board today.
Since there are no screenshots in the trying process, only the final result, so there are no screenshots in the intermediate process.
First understand the reference code before you can do it yourself.
“
The touch events in Android are the big ones. The onTouch event is defined in the view, so if you want to implement drawing, you must define a drawing component yourself. This component must inherit the view class and override the onDraw in the view. method. The three most basic objects of Android drawing (Color, Paint, Canvas) are stored in the android.graphics package 1) Color: color object, equivalent to 'seasoning' in real life 2) Paint: brush object, equivalent to The 'pen' used for drawing in real life - the main thing is to set the 'brush' 3) Canvas: Canvas object, equivalent to the 'paper or cloth' used for drawing in real life
”
According to the guide, create a new java class and write the code
public class paintview extends View{
private List<Point> pointall=new ArrayList<Point>();
public paintview(Context context, AttributeSet attrs) {
super(context, attrs);
super.setBackgroundColor(Color.WHITE);
super.setOnTouchListener(new Touch());
}
private class Touch implements OnTouchListener{
@Override
public boolean onTouch(View v, MotionEvent e) {
// TODO Auto-generated method stub
Point p=new Point((int)e.getX(),(int)e.getY());
if(e.getAction()==e.ACTION_DOWN){ //When pressed
pointall=new ArrayList<Point>();
pointall.add(p);
}
else if(e.getAction()==e.ACTION_UP){//When lifted
pointall.add(p);
paintview.this.postInvalidate(); //重绘
}
else if(e.getAction()==e.ACTION_MOVE){
pointall.add(p); //When moving
paintview.this.postInvalidate(); //重绘
}
return true;
}
}
protected void onDraw(Canvas canvas){
Paint p=new Paint(); //Define the brush
p.setColor(Color.RED); //Define the color
if(pointall.size()>1){
Iterator<Point> iter=pointall.iterator();// Now you can start drawing when there are coordinate points saved
Point first=null;
Point last=null;
while(iter.hasNext()){
if(first==null){
first=(Point)iter.next();
}
else{
if(last!=null){
first=last; //Assign the next coordinate point to the above
}
last=(Point)iter.next(); //Do not stop pointing
canvas.drawLine(first.x, first.y, last.x, last.y,p);
}
}
}
}
}
Then configure activity_main.xml
Add this paragraph:
<com.example.paint.paintview
android:id="@+id/paintview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
Now that the reference code has been imported into our project, run it to see the effect.
As a result, I can draw a line with a width of one pixel, and only red, and when I click to draw again, the original line disappears.
So try to improve it, imagine adding brush color, brush thickness. Most importantly, multiple lines can be drawn.
First analyze the code, how the lines are drawn. It uses an iterator to loop through the collection and connect lines according to the positions of adjacent points to achieve the effect of drawing.
But found in the press event:
if(e.getAction()==e.ACTION_DOWN){ //When pressed
pointall=new ArrayList<Point>();
pointall.add(p);
}
Every time the iterator is reset, the previous information is lost. In order to solve this problem, you can set parameters for judgment. When only the first drawing, the iterator is reset, and the subsequent drawing will not reset the iterator:
if(e.getAction()==e.ACTION_DOWN){ //When pressed
if(f==false){
f=true;
pointall=new ArrayList<Point>();
p=new Point(0,-2001);
}
try it. OK, now we can keep drawing. But there are also problems.
The drawn lines are not separate, the starting point of the new line and the ending point of the old line are connected?
The problem is with the rendering method, which traverses the collection, connects the previous point with the next point, and the starting point of the new line is adjacent to the end point of the old line. How to do it?
其实只要进行判断，当遇到终点或起点的时候，不要把他们连接就可以了。
但是如何在集合里面保存起点终点信息？集合里面只有 点 ，要保存起点终点信息，也只能通过点进行保存。
那么可以把起点终点的坐标设置为一个特殊值，当遇到的时候，就知道他们是起点和终点了。
if(e.getAction()==e.ACTION_DOWN){ //当按下
if(f==false){
f=true;
pointall=new ArrayList<Point>();
}
p=new Point(0,0);
pointall.add(p);
起点坐标被强制设置为0。同样的，对终点进行标记。
然后在渲染的方法的前面加上：
if(first.x==0||last.x==0)continue;
canvas.drawLine(first.x, first.y, last.x, last.y,p);
这样，如果遇到起点终点，就会跳过，不渲染。
尝试一下！好的，成功把线条断开了！
颜色怎么办？首先在面板设置组件，点击的时候获取信息，判断选择了什么颜色。
这个组件随便什么都可以，我使用的是Spinner。怎么获取信息并且传入我们之前新建的java类里面，这里就不多说了。
好，现在我们可以从面板中获取颜色信息了，但是怎么改变线条颜色呢？
由于我们只有一个迭代器，需要保存不同线条的信息，同理，我们也只能使用点坐标进行信息保存。仔细看上面的代码，发现我只用了起点终点的x坐标来判断是否渲染，现在，我们把它的y坐标利用上，用它来保存颜色信息！
if(e.getAction()==e.ACTION_DOWN){ //当按下
if(f==false){
f=true;
pointall=new ArrayList<Point>();
}
p=new Point(0,color1);
pointall.add(p);
}
参数color1是一个整数，我用来保存颜色信息，需要自己建立面板传入的参数和颜色代表的整数之间的对应！
并且在绘制之前，进行判断当前线条的颜色。
if(first.y==1000)p.setColor(Color.BLACK);//黑 else if(first.y==-1001)p.setColor(Color.RED);//红 else if(first.y==-1002)p.setColor(Color.rgb(255, 150, 0));//橙 else if(first.y==-1003)p.setColor(Color.YELLOW);//黄 else if(first.y==-1004)p.setColor(Color.GREEN);//绿 else if(first.y==-1005)p.setColor(Color.CYAN);//青 else if(first.y==-1006)p.setColor(Color.BLUE);//蓝 else if(first.y==-1007)p.setColor(Color.MAGENTA);//紫 else if(first.y==-1008)p.setColor(Color.GRAY);//灰 //断线跳过 if(first.x==0||last.x==0)continue; canvas.drawLine(first.x, first.y, last.x, last.y,p);
尝试一下！成功了，我们可以切换不同颜色了！而且不同的线条也显示出不同的颜色了！
接下来是更换线条粗细。使用同样的思想，用点来保存信息，但是，起点终点的x和y坐标都被我们利用完了，怎么办？很简单！它们只是记录信息的点，不要要参加绘制，所以可以再来一个点进行记录粗细的信息。
if(e.getAction()==e.ACTION_DOWN){ //当按下
if(f==false){
f=true;
pointall=new ArrayList<Point>();
p=new Point(0,-2001);
pointall.add(p);
}
p=new Point(0,linewight);
pointall.add(p);
p=new Point(0,color1);
pointall.add(p);
}
linewight这个参数被我用来存放粗细的信息，同样的要自己建立面板传入的参数和信息的整数对应关系。
由于是携带信息的点，所以干脆就和起点放在一起，“两个起点”。
但是！这里要注意一下，我们要给整个集合的第一个点设置一个粗细的参数，不然的话，后面改变线条粗细的时候，会因为第一条线没有起点携带了粗细信息而会跟着被改变
（其实读者可以自己试一试，如果把我上面代码的p=new Point(0,-2001);pointall.add(p);给删掉，会是什么效果）。
接下来，渲染的地方就最终变成这个样子了：
last=(Point)iter.next(); //不停下指 //判断线条颜色 if(first.y==1000)p.setColor(Color.BLACK);//黑 else if(first.y==-1001)p.setColor(Color.RED);//红 else if(first.y==-1002)p.setColor(Color.rgb(255, 150, 0));//橙 else if(first.y==-1003)p.setColor(Color.YELLOW);//黄 else if(first.y==-1004)p.setColor(Color.GREEN);//绿 else if(first.y==-1005)p.setColor(Color.CYAN);//青 else if(first.y==-1006)p.setColor(Color.BLUE);//蓝 else if(first.y==-1007)p.setColor(Color.MAGENTA);//紫 else if(first.y==-1008)p.setColor(Color.GRAY);//灰 //判断线条粗细 if(first.y==-2001)p.setStrokeWidth(1); else if(first.y==-2002)p.setStrokeWidth(2); else if(first.y==-2003)p.setStrokeWidth(3); else if(first.y==-2004)p.setStrokeWidth(4); else if(first.y==-2006)p.setStrokeWidth(6); else if(first.y==-2008)p.setStrokeWidth(8); //断线跳过 if(first.x==0||last.x==0)continue; canvas.drawLine(first.x, first.y, last.x, last.y,p);
我选用的选择线条粗细的组件是图片按钮。
好的，现在我今天的最终版也就做出来了，我们来试试效果。
记住，目标：绘制多条线，不同颜色的线，不同粗细的线！
最后的最后，给上代码：
Main.Activity.java:
public class MainActivity extends Activity {
private ImageButton px01;
private ImageButton px02;
private ImageButton px03;
private ImageButton px04;
private ImageButton px06;
private ImageButton px08;
private Spinner color;
private String color1;
private Spinner lwight;
private String lwight1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
px01=(ImageButton)findViewById(R.id.imageButton1);
px01.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v)
{
paintview.linewight=-2001;
}
});
px02=(ImageButton)findViewById(R.id.imageButton2);
px02.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v)
{
paintview.linewight=-2002;
}
});
px03=(ImageButton)findViewById(R.id.imageButton3);
px03.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v)
{
paintview.linewight=-2003;
}
});
px04=(ImageButton)findViewById(R.id.imageButton4);
px04.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v)
{
paintview.linewight=-2004;
}
});
px06=(ImageButton)findViewById(R.id.imageButton5);
px06.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v)
{
paintview.linewight=-2006;
}
});
px08=(ImageButton)findViewById(R.id.imageButton6);
px08.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v)
{
paintview.linewight=-2008;
}
});
color=(Spinner)findViewById(R.id.colortext);
color.setOnItemSelectedListener(new OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
// TODO Auto-generated method stub
color1= (String) color.getSelectedItem();
if(color1.equals("红色"))
paintview.color1=-1001;
else if(color1.equals("橙色"))
paintview.color1=-1002;
else if(color1.equals("黄色"))
paintview.color1=-1003;
else if(color1.equals("绿色"))
paintview.color1=-1004;
else if(color1.equals("青色"))
paintview.color1=-1005;
else if(color1.equals("蓝色"))
paintview.color1=-1006;
else if(color1.equals("紫色"))
paintview.color1=-1007;
else if(color1.equals("灰色"))
paintview.color1=-1008;
else
paintview.color1=1000;
}
@Override
public void onNothingSelected(AdapterView<?> parent) {}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
paintview.java:
public class paintview extends View{
static int color1;
static int linewight;
static int linewight2;
private List<Point> pointall=new ArrayList<Point>();
private boolean f=false;
public paintview(Context context, AttributeSet attrs) {
super(context, attrs);
super.setBackgroundColor(Color.rgb(250, 245, 220));
super.setOnTouchListener(new Touch());
}
private class Touch implements OnTouchListener{
@Override
public boolean onTouch(View v, MotionEvent e) {
// TODO Auto-generated method stub
Point p=new Point((int)e.getX(),(int)e.getY());
if(e.getAction()==e.ACTION_DOWN){ //当按下
if(f==false){
f=true;
pointall=new ArrayList<Point>();
p=new Point(0,-2001);
pointall.add(p);
}
p=new Point(0,linewight);
pointall.add(p);
p=new Point(0,color1);
pointall.add(p);
}
else if(e.getAction()==e.ACTION_UP){//当抬起
pointall.add(p);
paintview.this.postInvalidate(); //重绘
}
else if(e.getAction()==e.ACTION_MOVE){
pointall.add(p); //移动时候
paintview.this.postInvalidate(); //重绘
}
return true;
}
}
protected void onDraw(Canvas canvas){
Paint p=new Paint(); //定义画笔
p.setColor(Color.BLACK); //定义颜色
if(pointall.size()>1){
Iterator<Point> iter=pointall.iterator();// 现在有坐标点保存的时候可以开始进行绘图
Point first=null;
Point last=null;
while(iter.hasNext()){
if(first==null){
first=(Point)iter.next();
}
else{
if(last!=null){
first=last; //将下一个坐标点赋给上面的
}
last=(Point)iter.next(); //不停下指
//判断线条颜色
if(first.y==1000)p.setColor(Color.BLACK);//黑
else if(first.y==-1001)p.setColor(Color.RED);//红
else if(first.y==-1002)p.setColor(Color.rgb(255, 150, 0));//橙
else if(first.y==-1003)p.setColor(Color.YELLOW);//黄
else if(first.y==-1004)p.setColor(Color.GREEN);//绿
else if(first.y==-1005)p.setColor(Color.CYAN);//青
else if(first.y==-1006)p.setColor(Color.BLUE);//蓝
else if(first.y==-1007)p.setColor(Color.MAGENTA);//紫
else if(first.y==-1008)p.setColor(Color.GRAY);//灰
//判断线条粗细
if(first.y==-2001)p.setStrokeWidth(1);
else if(first.y==-2002)p.setStrokeWidth(2);
else if(first.y==-2003)p.setStrokeWidth(3);
else if(first.y==-2004)p.setStrokeWidth(4);
else if(first.y==-2006)p.setStrokeWidth(6);
else if(first.y==-2008)p.setStrokeWidth(8);
//断线跳过
if(first.x==0||last.x==0)continue;
canvas.drawLine(first.x, first.y, last.x, last.y,p);
}
}
}
}
}
activity_main.xml:
<RelativeLayout 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=".MainActivity" >
<com.example.day2.paintview
android:id="@+id/paintview"
android:layout_width="465dp"
android:layout_height="216dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
<Spinner
android:id="@+id/colortext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="@+id/paintview"
android:entries="@array/datacolor" />
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@+id/colortext"
android:src="@drawable/onepx" />
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/paintview"
android:layout_below="@+id/imageButton1"
android:src="@drawable/twopx" />
<ImageButton
android:id="@+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/paintview"
android:layout_below="@+id/imageButton2"
android:src="@drawable/threepx" />
<ImageButton
android:id="@+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/paintview"
android:layout_below="@+id/imageButton3"
android:src="@drawable/fourpx" />
<ImageButton
android:id="@+id/imageButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/paintview"
android:layout_below="@+id/imageButton4"
android:src="@drawable/sixpx" />
<ImageButton
android:id="@+id/imageButton6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/paintview"
android:layout_below="@+id/imageButton5"
android:src="@drawable/eighpx" />
</RelativeLayout>
选择框配置xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="datacolor">
<item>黑色</item>
<item>红色</item>
<item>橙色</item>
<item>黄色</item>
<item>绿色</item>
<item>青色</item>
<item>蓝色</item>
<item>紫色</item>
<item>灰色</item>
</string-array>
</resources>
谢谢欣赏，不足之处还请多多指教
反正我做完就这样了，也不打算改，想怎么说就怎么说吧。