Canvas 学习之 (2) translate
2016-07-22 13:41
501 查看
Canvas的坐标问题在之前已经叙述过了
这次学习的是translate 坐标的平移 以及Canvas坐标的方向问题
translate 为什么叫坐标的平移
先看一段代码
<com.example.zhujie.myapplication.StudyView
android:id="@+id/studyview"
android:layout_width="200dp"
android:layout_height="200dp"/>
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.RED);
canvas.drawRect(new Rect(0,0,200,200),paint);
super.onDraw(canvas);
}
在我的控件画布上创建了一个200px*200px的正方形,但是我的画布是200dp*200dp正方形。运行结果如图
因为上次说过Canvas的画布的坐标原点是控件画布左上角现在我使用translate 进行平移
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.RED);
canvas.translate(100,100);
canvas.drawRect(new Rect(0,0,200,200),paint);
super.onDraw(canvas);
}
运行截图是这样的
实际结果并不是我的控件在原坐标向下和向右去平移了100个像素,而是相对与原来的坐标不动,只是坐标原点发生了变化,原点从原来的0,0移动到了100,100的位置也就是说现在的原点是100,100,所以在Canvas中translate并不是画布发生了平移而是Canvas中的原点发生了变化,而且我们在平移的过程中发现了Canvas中的坐标是
画布的平移 其实画布平移并不是整个空间平移,整个空间相对与布局基本上并没有动,只是画出来的物体发生了移动,但是由于物体起始位置并没有改变,所以这种移动并不是画布移动准确的说是画布的坐标系原点发生了移动
X轴正方向是向右的
Y轴正方向是向下的
Canvas这种translate不仅仅会执行一次而且会有叠加效果在做一个实验
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.RED);
canvas.translate(100, 100);
canvas.drawRect(new Rect(0, 0, 200, 200), paint);
canvas.translate(100, 100);
canvas.drawRect(new Rect(0, 0, 200, 200), paint);
super.onDraw(canvas);
}
这种结果并不是只会画出一个矩形,他会画出2个矩形,并且叠加,运行结果如图:
所以得出结论Canvas的translate效果会有叠加的效果
下面我做了一个Demo来简单综合一下Canvas
利用Canvas来画出尺子
利用坐标画代码如下
public class StudyView extends View {
private int DIVIERSPECE = 6;
private int SKEWSPECE = 5;
private int BIGDEGREE = -40;
private int MIDDLEDEGREE = -30;
private int SMALLDEGREE = -20;
private int TEXTDEGREE = -50;
private int ALLWIDTH = 636;
private int ALLHEIGHT = 150;
private Paint paint;
public StudyView(Context context) {
super(context);
}
public StudyView(Context context, AttributeSet attrs) {
super(context, attrs);
paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStrokeWidth(1);
paint.setTextSize(13);
paint.setStyle(Paint.Style.STROKE);
}
public StudyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
drawBorder(canvas);
drawByPositionLines(canvas);
// drawTranslateLines(canvas);
super.onDraw(canvas);
}
/**
* 根据坐标
* */
private void drawByPositionLines(Canvas canvas) {
canvas.translate(18, 150);
for(int i = 0; i <= 100; i++){
if(i%10 == 0){
canvas.drawLine(i*DIVIERSPECE,0,i*DIVIERSPECE,BIGDEGREE,paint);
canvas.drawText(i/10+"",i*DIVIERSPECE-SKEWSPECE,TEXTDEGREE,paint);
}
if (i % 10 == 5) {
canvas.drawLine(i*DIVIERSPECE,0,i*DIVIERSPECE,MIDDLEDEGREE,paint);
}
if(i%10 != 0 && i%10 != 5){
canvas.drawLine(i*DIVIERSPECE,0,i*DIVIERSPECE,SMALLDEGREE,paint);
}
}
}
/**
* 根据Translate
* */
private void drawTranslateLines(Canvas canvas) {
canvas.translate(18,150);
for(int i = 0; i <= 100; i++){
if(i%10 == 0){
canvas.drawLine(0,0,0,BIGDEGREE,paint);
canvas.drawText(i/10+"",-SKEWSPECE,-TEXTDEGREE,paint);
}
if (i % 10 == 5) {
canvas.drawLine(0,0,0,MIDDLEDEGREE,paint);
}
if(i%10 != 0 && i%10 != 5){
canvas.drawLine(0,0,0,SMALLDEGREE,paint);
}
canvas.translate(DIVIERSPECE,0);
}
}
private void drawBorder(Canvas canvas) {
canvas.translate(20,100);
canvas.drawRect(new Rect(0, 0, ALLWIDTH, ALLHEIGHT), paint);
}
}
这次学习的是translate 坐标的平移 以及Canvas坐标的方向问题
translate 为什么叫坐标的平移
先看一段代码
<com.example.zhujie.myapplication.StudyView
android:id="@+id/studyview"
android:layout_width="200dp"
android:layout_height="200dp"/>
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.RED);
canvas.drawRect(new Rect(0,0,200,200),paint);
super.onDraw(canvas);
}
在我的控件画布上创建了一个200px*200px的正方形,但是我的画布是200dp*200dp正方形。运行结果如图
因为上次说过Canvas的画布的坐标原点是控件画布左上角现在我使用translate 进行平移
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.RED);
canvas.translate(100,100);
canvas.drawRect(new Rect(0,0,200,200),paint);
super.onDraw(canvas);
}
运行截图是这样的
实际结果并不是我的控件在原坐标向下和向右去平移了100个像素,而是相对与原来的坐标不动,只是坐标原点发生了变化,原点从原来的0,0移动到了100,100的位置也就是说现在的原点是100,100,所以在Canvas中translate并不是画布发生了平移而是Canvas中的原点发生了变化,而且我们在平移的过程中发现了Canvas中的坐标是
画布的平移 其实画布平移并不是整个空间平移,整个空间相对与布局基本上并没有动,只是画出来的物体发生了移动,但是由于物体起始位置并没有改变,所以这种移动并不是画布移动准确的说是画布的坐标系原点发生了移动
X轴正方向是向右的
Y轴正方向是向下的
Canvas这种translate不仅仅会执行一次而且会有叠加效果在做一个实验
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.RED);
canvas.translate(100, 100);
canvas.drawRect(new Rect(0, 0, 200, 200), paint);
canvas.translate(100, 100);
canvas.drawRect(new Rect(0, 0, 200, 200), paint);
super.onDraw(canvas);
}
这种结果并不是只会画出一个矩形,他会画出2个矩形,并且叠加,运行结果如图:
所以得出结论Canvas的translate效果会有叠加的效果
下面我做了一个Demo来简单综合一下Canvas
利用Canvas来画出尺子
利用坐标画代码如下
public class StudyView extends View {
private int DIVIERSPECE = 6;
private int SKEWSPECE = 5;
private int BIGDEGREE = -40;
private int MIDDLEDEGREE = -30;
private int SMALLDEGREE = -20;
private int TEXTDEGREE = -50;
private int ALLWIDTH = 636;
private int ALLHEIGHT = 150;
private Paint paint;
public StudyView(Context context) {
super(context);
}
public StudyView(Context context, AttributeSet attrs) {
super(context, attrs);
paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStrokeWidth(1);
paint.setTextSize(13);
paint.setStyle(Paint.Style.STROKE);
}
public StudyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
drawBorder(canvas);
drawByPositionLines(canvas);
// drawTranslateLines(canvas);
super.onDraw(canvas);
}
/**
* 根据坐标
* */
private void drawByPositionLines(Canvas canvas) {
canvas.translate(18, 150);
for(int i = 0; i <= 100; i++){
if(i%10 == 0){
canvas.drawLine(i*DIVIERSPECE,0,i*DIVIERSPECE,BIGDEGREE,paint);
canvas.drawText(i/10+"",i*DIVIERSPECE-SKEWSPECE,TEXTDEGREE,paint);
}
if (i % 10 == 5) {
canvas.drawLine(i*DIVIERSPECE,0,i*DIVIERSPECE,MIDDLEDEGREE,paint);
}
if(i%10 != 0 && i%10 != 5){
canvas.drawLine(i*DIVIERSPECE,0,i*DIVIERSPECE,SMALLDEGREE,paint);
}
}
}
/**
* 根据Translate
* */
private void drawTranslateLines(Canvas canvas) {
canvas.translate(18,150);
for(int i = 0; i <= 100; i++){
if(i%10 == 0){
canvas.drawLine(0,0,0,BIGDEGREE,paint);
canvas.drawText(i/10+"",-SKEWSPECE,-TEXTDEGREE,paint);
}
if (i % 10 == 5) {
canvas.drawLine(0,0,0,MIDDLEDEGREE,paint);
}
if(i%10 != 0 && i%10 != 5){
canvas.drawLine(0,0,0,SMALLDEGREE,paint);
}
canvas.translate(DIVIERSPECE,0);
}
}
private void drawBorder(Canvas canvas) {
canvas.translate(20,100);
canvas.drawRect(new Rect(0, 0, ALLWIDTH, ALLHEIGHT), paint);
}
}
相关文章推荐
- 使用C++实现JNI接口需要注意的事项
- Android IPC进程间通讯机制
- Android Manifest 用法
- [转载]Activity中ConfigChanges属性的用法
- Android之获取手机上的图片和视频缩略图thumbnails
- Android之使用Http协议实现文件上传功能
- Android学习笔记(二九):嵌入浏览器
- android string.xml文件中的整型和string型代替
- i-jetty环境搭配与编译
- android之定时器AlarmManager
- android wifi 无线调试
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- android 代码实现控件之间的间距
- android FragmentPagerAdapter的“标准”配置
- Android"解决"onTouch和onClick的冲突问题
- android:installLocation简析
- android searchView的关闭事件