canvas教程

萌新学android之第二天—容易画板(2)

字号+ 作者:H5之家 来源:H5之家 2017-07-22 17:01 我要评论( )

由于我们只有一个迭代器,需要保存不同线条的信息,同理,我们也只能使用点坐标进行信息保存。仔细看上面的代码,发现我只用了起点终点的x坐标来判断是否渲染,现在,我们把它的y坐标利用上,用它来保存颜色信息!

由于我们只有一个迭代器,需要保存不同线条的信息,同理,我们也只能使用点坐标进行信息保存。仔细看上面的代码,发现我只用了起点终点的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这个参数被我用来存放粗细的信息,同样的要自己建立面板传入的参数和信息的整数对应关系。

由于是携带信息的点,所以干脆就和起点放在一起,“两个起点”。

但是!这里要注意一下,我们要给整个集合的第一个点设置一个粗细的参数,不然的话,后面改变线条粗细的时候,会因为第一条线没有起点携带了粗细信息而会跟着被改变

(其实读者可以自己试一试,如果把我上面代码的

接下来,渲染的地方就最终变成这个样子了:

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> <item>黑色</item> <item>红色</item> <item>橙色</item> <item>黄色</item> <item>绿色</item> <item>青色</item> <item>蓝色</item> <item>紫色</item> <item>灰色</item> </string-array> </resources>

谢谢欣赏,不足之处还请多多指教

反正我做完就这样了,也不打算改,想怎么说就怎么说吧。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评