Android利用Canvas标点画线并加入位移动画(2)
本文实例为大家分享了Android利用Canvas标点画线，并加入位移动画的具体代码，供大家参考，具体内容如下
1.背景
继上次公司需求实现Canvas面板标记点，画折现，并利用属性动画进行沿线移动之后，又有了新问题。
发现公司提供的坐标有正值有负值，并且值很大，很容易超出屏幕范围，而且由于我们Canvas坐标方向与正常坐标系不符合，由此发现做的图方向也不对。
2.问题
Canvas坐标系位于屏幕左上角，且Y正向坐标向下，如何转换？
由于坐标有正有负，而Canvas默认只显示正方向，如何解决显示点问题？
坐标数值很大，采用哪种方法进行显示？
随之而来的动画坐标，移动问题？
3.先看最终实现效果图
这次继续图片显示哈，小人依然能沿线移动！
4. 思路
首先我看到拿到的数据坐标是这样的
这是正常坐标系坐标，有±，且数值大。而Canvas默认坐标系是这样的，且屏幕内坐标很小
知道问题，那么开始解决！！
首先要转换Canvas坐标系，并且采用采用缩小坐标的方式，容纳值很大的坐标点，并且将做坐标原点移动到屏幕中央。
Canvas有缩放方法，且能改变原点位置，改变坐标系方向！
final void scale(float sx, float sy, float px, float py)
sx，sy即为放大缩放倍数，±代表方向，px，py则为缩放/放大后，，原点移动的位置。现在倒是可以显示点，画线了。那么属性动画的坐标原点系依然在左上角，而它没有缩放方法，怎么实现小人沿着轨迹移动呢？
那只能利用坐标系进行换算了！
/** * canvas.scale(0.4F,0.4F,850,1500); * 则动画坐标 X: x*0.4+850*0.6 * Y: y*0.4+1500*0.6 * ----------------new------------------ * canvas.scale(0.5F,0.5F,1000,2200); * 则动画坐标 X: x*0.5+850*0.5 * Y: y*0.5+1500*0.5 * 即 X: (x+850)*0.5 * Y: (y+1100)*0.5 * */
具体实现代码
DrawView
class DrawView extends View {
private Boolean bool=false;
private String num;
private Path path;
public DrawView(Context context) {
super(context);
}
public void setBool(Boolean isDraw,String number){
this.bool=isDraw;
this.num=number;
}
public void DrawLines(Canvas canvas){
Paint mPaint3 = new Paint();
mPaint3.setAntiAlias(true);
mPaint3.setColor(Color.GREEN);
mPaint3.setTextSize(36);
mPaint3.setStrokeWidth(20);
float[] points3=new float[]{450,100,480,350,480,350,330,500,330,500,510,650,510,650,780,800,780,800,450,900,450,900,450,1200,450,1200,550,1400,550,1400,600,1500};
canvas.drawLines(points3,mPaint3);
}
@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
// canvas.scale(0.4F,0.4F,850,1500);
canvas.scale(0.5F,0.5F,1000,2200);
path = new Path();
/*
* 方法 说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawPath 绘制任意多边形
* drawLine 绘制直线 drawPoin 绘制点
*/
// 创建画笔
Paint mPaint = new Paint();
mPaint.setStrokeWidth(20);
mPaint.setColor(Color.BLACK);// 设置红色
mPaint.setAntiAlias(true);
mPaint.setTextSize(36);
//绘制Cap为BUTT的点
Paint mPaint2 = new Paint();
mPaint2.setStrokeWidth(40);
mPaint2.setColor(Color.BLUE);
mPaint2.setStrokeCap(Paint.Cap.ROUND);
Paint mPaint3 = new Paint();
mPaint3.setAntiAlias(true);
mPaint3.setColor(Color.GREEN);
mPaint3.setTextSize(36);
mPaint3.setStrokeWidth(20);
Paint mPaintxy = new Paint();
mPaintxy.setStrokeWidth(20);
mPaintxy.setColor(Color.WHITE);// 设置红色
mPaintxy.setAntiAlias(true);
mPaintxy.setTextSize(36);
/**
* 1.拿到接口请求数据
* 2.遍历数据num【i】并将数据传给DrawView
* 3.利用canvas将数组进行点的绘制
* 4.利用canvas将数组进行线段绘制（需要改变数组格式）
* 5.绘制绿线，遍历数据，将数组position和数组进行对应 将传过来的num进行对比绘制 position.equals(num){...}
*/
float[] nums = {(float) -143.798, (float) -683.477, (float) -199.472, (float) -943.149, (float) -317.205, (float) -1496.94, (float) -500.871, (float) -1801.28, (float) -515.062, (float) -2142.18};
float[] nums2 = {(float) -584.18, (float) -2741.83, (float) -519.028, (float) -3090.7, (float) -655.9, (float) -3082.98, (float) -721.497, (float) -3395.15, (float) -684.025, (float) -3403.24};
canvas.drawPoint(0, 0, mPaint3);
canvas.drawPoint(100, 100, mPaint3);
canvas.drawPoint(100, -100, mPaint3);
canvas.drawPoint(-100, 100, mPaint3);
canvas.drawPoint(-100, -100, mPaint3);
canvas.drawText("A1(100,100)", 100, 100, mPaint3);
canvas.drawText("A1(100,-100)", 100, -100, mPaint3);
canvas.drawText("A1(-100,100)", -100, 100, mPaint3);
canvas.drawText("A1(-100,-100)", -100, -100, mPaint3);
canvas.drawPoints(new float[]{20,100,100,350,150,430,200,510,250,560,350,650,550,730,670,890,750,1000}, mPaint2);
canvas.drawPoints(new float[]{170,100,170,200,170,400,170,510,170,730,170,850}, mPaint2);
canvas.drawPoints(new float[]{450,100,480,350,330,500,510,650,780,800,450,900,450,1200,550,1400,600,1500}, mPaint2);
canvas.drawPoints(new float[]{140,1200,230,1250,370,1140,500,1220,570,1310,680,1280,750,1300,850,1260}, mPaint2);
canvas.drawPoints(nums, mPaint2);
canvas.drawPoints(nums2, mPaint2);
float[] pointsx=new float[]{-1500,0,1500,0};//至少4个值，即能够绘制一条直线
canvas.drawLines(pointsx,mPaintxy);
float[] pointsy=new float[]{0,1500,0,-1500};//至少4个值，即能够绘制一条直线
canvas.drawLines(pointsy,mPaintxy);
float[] points=new float[]{20,100,100,350,100,350,150,430,150,430,200,510,200,510,250,560,250,560,350,650,350,650,550,730,550,730,670,890,670,890,750,1000};//至少4个值，即能够绘制一条直线
canvas.drawLines(points,mPaint);
// float[] points2=new float[]{170,100,170,200,170,200,170,400,170,400,170,510,170,510,170,730,170,730,170,850};//至少4个值，即能够绘制一条直线
// canvas.drawLines(points2,mPaint);
//缩小1/2
float[] points2=new float[]{85,50,85,100,85,100,85,200,85,200,85,255,85,255,85,365,85,365,85,425};//至少4个值，即能够绘制一条直线
canvas.drawLines(points2,mPaint);
float[] points3=new float[]{450,100,480,350,480,350,330,500,330,500,510,650,510,650,780,800,780,800,450,900,450,900,450,1200,450,1200,550,1400,550,1400,600,1500};
canvas.drawLines(points3,mPaint);
float[] points4=new float[]{140,1200,230,1250,230,1250,370,1140,370,1140,500,1220,500,1220,570,1310,570,1310,680,1280,680,1280,750,1300,750,1300,850,1260};//至少4个值，即能够绘制一条直线
canvas.drawLines(points4,mPaint);
float[] pointsZ=new float[]{(float) -143.798, (float) -683.477, (float) -199.472, (float) -943.149, (float) -199.472, (float) -943.149,(float) -317.205, (float) -1496.94,(float) -317.205, (float) -1496.94, (float) -500.871, (float) -1801.28, (float) -500.871, (float) -1801.28,(float) -515.062, (float) -2142.18};
canvas.drawLines(pointsZ,mPaint);
float[] pointsZ2=new float[]{(float) -584.18, (float) -2741.83, (float) -519.028, (float) -3090.7, (float) -519.028, (float) -3090.7,(float) -655.9, (float) -3082.98
,(float) -655.9, (float) -3082.98, (float) -721.497, (float) -3395.15, (float) -721.497, (float) -3395.15,(float) -684.025, (float) -3403.24};
canvas.drawLines(pointsZ2,mPaint);
if (bool==true){
if (num.equals("1")){
DrawLines(canvas);
}
else if (num.equals("2")){
canvas.drawLines(points2,mPaint3);
}
else if (num.equals("3")){
canvas.drawLines(points,mPaint3);
}
else if (num.equals("4")){
canvas.drawLines(points4,mPaint3);
}
else if (num.equals("5")){
canvas.drawLines(pointsZ,mPaint3);
}
}
}
MainActivity
public class MainActivity extends AppCompatActivity {
private EditText mEdiet;
private Button mButton;
private ImageView mtv;
ObjectAnimator objectAnimatorX,objectAnimatorY;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
RelativeLayout layout=(RelativeLayout) findViewById(R.id.root);
DrawView views=new DrawView(this);
views.setMinimumHeight(500);
views.setMinimumWidth(300);
//通知view组件重绘
views.invalidate();
layout.addView(views);
mEdiet=findViewById(R.id.qd);
mButton=findViewById(R.id.qd2);
mtv=findViewById(R.id.dw);
mButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String number=mEdiet.getText().toString();
/**
* canvas.scale(0.4F,0.4F,850,1500);
* 则动画坐标 X: x*0.4+850*0.6 510
* Y: y*0.4+1500*0.6 900
* ----------------new------------------
* canvas.scale(0.5F,0.5F,1000,2200);
* 则动画坐标 X: x*0.5+850*0.5 500
* Y: y*0.5+1500*0.5 1100
* 即 X: (x+850)*0.5
* Y: (y+1100)*0.5
* */
if (number.equals("1")){
float [] x= {725,740,665, 755,890,725,725,775,800};
float [] y= {1150,1275,1350,1425,1500,1550,1700,1800,1850};
startPopsAnimTrans(mtv,x,y);
}
else if (number.equals("2")){
float [] x= {585,585,585, 585,585,585};
float [] y= {1150,1200,1300,1355,1465,1525};
startPopsAnimTrans(mtv,x,y);
}
else if (number.equals("5")){
float [] x= {429,400,342, 250, 243};
float [] y= {757,629,352,200,29};
startPopsAnimTrans(mtv,x,y);
}
views.setBool(true,number);
views.invalidate();
}
});
}
private void startPopsAnimTrans(ImageView b,float [] x,float [] y){
objectAnimatorX = ObjectAnimator.ofFloat(b,"translationX", x);
objectAnimatorX.setDuration(10000);
objectAnimatorY = ObjectAnimator.ofFloat(b,"translationY", y);
objectAnimatorY.setDuration(10000);
objectAnimatorX.start();
objectAnimatorY.start();
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Android补间动画基本使用（位移、缩放、旋转、透明）
本文讲述了Android补间动画基本使用(位移.缩放.旋转.透明).分享给大家供大家参考,具体如下: 补间动画 原形态变成新形态时为了过渡变形过程,生成的动画就叫补间动画 位移.旋转.缩放.透明 位移: 参数10指的是X的起点坐标,但不是指屏幕x坐标为10的位置,而是imageview的 真实X + 10 参数150指的是X的终点坐标,它的值是imageview的 真实X + 150 //创建为位移动画对象,设置动画的初始位置和结束位置 TranslateAnimation ta = new T
-
Android开发之图形图像与动画(二)Animation实现图像的渐变/缩放/位移/旋转
Android 平台提供了两类动画. 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转.平移.放缩和渐变). 下面就讲一下Tweene Animations. 主要类: Animation 动画 AlphaAnimation 渐变透明度 RotateAnimation 画面旋转 ScaleAnimation 渐变尺寸缩放 TranslateAnimation 位置移动 AnimationSet 动画集 一.AlphaAnimation 其中AlphaAnimatio
-
Android动画之渐变动画(Tween Animation)详解 (渐变、缩放、位移、旋转)
本文实例讲述了Android动画之渐变动画(Tween Animation).分享给大家供大家参考,具体如下: Android 平台提供了两类动画. 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转.平移.放缩和渐变). 第二类就是 Frame动画,即顺序的播放事先做好的图像,与gif图片原理类似. 下面就讲一下Tweene Animations. 主要类: Animation 动画 AlphaAnimation
-
android中实现在ImageView上随意画线涂鸦的方法
我实现的思路: 1.继承ImageView类 2.重写onTouchEvent方法,在ACTION_MOVE(即移动时),记录下所经过的点坐标,在ACTION_UP时(即手指离开时,这时一条线已经画完),将所画的线(点的集合)保存在一个集合中 3.重写onDraw方法,利用canvas和所记录下的线和点画出线来 可能我讲的十分笼统,下面来看看实际的代码吧 //代表ImageView上的一点 public class ViewPoint { float x; float y; } //表示一条线
-
Android利用Canvas标点画线并加入位移动画(1)
本文实例为大家分享了Android利用Canvas标点画线,并加入位移动画的具体代码,供大家参考,具体内容如下 1.背景 最近由于公司业务需要,需要自己实现一个点画线,移动的需求,这自然就想到了利用Canvas进行描点,画线连线. 过程比较简单,查阅了网上文章,发现写的都特别片面,很多人也会遇到类似需求,这里把整个实现过程讲一下,并且在实现过程遇到的一些小坑讲给大家. 先看效果图 其实点击检索,小人可以按照画好的路线进行移动. 具体代码: Canvas画点连线 class DrawView ex
-
Android利用Canvas标点画线并加入位移动画(2)
本文实例为大家分享了Android利用Canvas标点画线,并加入位移动画的具体代码,供大家参考,具体内容如下 1.背景 继上次公司需求实现Canvas面板标记点,画折现,并利用属性动画进行沿线移动之后,又有了新问题. 发现公司提供的坐标有正值有负值,并且值很大,很容易超出屏幕范围,而且由于我们Canvas坐标方向与正常坐标系不符合,由此发现做的图方向也不对. 2.问题 Canvas坐标系位于屏幕左上角,且Y正向坐标向下,如何转换? 由于坐标有正有负,而Canvas默认只显示正方向,如何解决显示
-
Android利用Canvas类绘制图形
本文实例为大家分享了Android利用Canvas类绘制图形的具体代码,供大家参考,具体内容如下 首先介绍一下相关基础知识. 1.画笔(paint) 1.1.作用:画笔对象通过属性来设置笔的颜色.粗细.风格等. 1.2.设置图形绘制属性相关方法: setARGB():设置画笔的颜色:setAlpha():设置绘制图形的透明度:setStyle():设置画笔的样式风格:setStrockWidth():设置画笔的宽度: 1.3.设置文本绘制属性的相关方法: setTextSize():设置字体的大
-
Android Flutter利用贝塞尔曲线画一个小海豚
目录 前言 效果图 实现步骤 总结 前言 贝塞尔曲线的应用填补了计算机绘制与手绘之前的差距,更能表达人想画出的曲线,为了更好的理解万能的贝塞尔曲线,而海豚是我认为在海洋生物中身体曲线最完美的海洋生物,在海洋中游泳速度最高可达80km/h;比驱逐舰速度还快,学习绘制正好学到了贝塞尔曲线,那么我们今天就用贝塞尔曲线画看看能不能画一只可爱的小海豚呢. 效果图 先上效果图: 实现步骤 path路径绘制贝塞尔曲线的方法非常简单,只需要传入控制点即可,二阶就传1个控制点1个终点,三阶就传2个控制点和1个终点
-
Android利用控制点的拖拽画一个粽子
目录 前言 实现逻辑 应用 总结 前言 上一篇我们通过Listener获取触控点的位置作为贝塞尔曲线的控制点,实现曲线的交互式绘制.不过,上一篇有个缺陷,控制点绘制完成后只能撤销,没法修改,如果要调整绘制的图形的话会非常麻烦,这一篇我们来实现控制点的拖拽式移动,动态调整位置来调整绘制的图形. 实现逻辑 上一篇的主要代码我们不做更改,主要是需要实现控制点的拖拽式移动,移动过程中动态绘制新的曲线.不过由于绘制过程中不能同时移动点,因此需要有个完成绘制的控制,完成绘制后才支持拖拽控制点.拖拽控制点实现
-
QT中在QLabel显示图片并且利用鼠标点击画线问题
目录 在QLabel显示图片并且利用鼠标点击画线 以下为我的代码,供参考 在QLabel显示图片并且利用鼠标点击画线 最近在做在Label上显示图片并且通过鼠标点击画线,在网上查了很多零零散散的东西,收获也多 很多初学者更希望直接贴代码,这样可以模仿来写,我下面直接贴出我的项目中自己写的maLabel类 (如果只是实现利用鼠标绘制, 重写void paintEvent(QPaintEvent *event);void mousePressEvent(QMouseEvent *e); void m
-
Android利用Flutter path绘制粽子的示例代码
目录 前言 绘制 基本轮廓 粽叶 嘴巴 眼睛 腮红 手&脚 头巾 咸甜是一家 发声 动画控制嘴巴开合 用到的技术点 总结 前言 大家好,端午将至,首先提前祝小伙伴端午安康,端午作为中华民族的非常重要的传统节日,粽子那是必不可少的,但是你真的知道粽子的历史吗? 今天跟随本篇文章用Flutter path画一个会科普节日的的粽子吧- 绘制 基本轮廓 首先我们需要将粽子的基本轮廓绘制出来,通过图片可以看到粽子的轮廓是一个圆圆的三角形状, 本篇文章所有的图形都是用纯Path路径制作,这里我们可以将粽子的
-
Android使用Canvas绘制圆形进度条效果
前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas 画笔Paint 示例圆形进度条 画布Canvas 首先,来看一下Android官网对Canvas类的定义: The Canvas class holds the "draw" calls.To draw something, you need 4 basic components: A B
-
Android利用SurfaceView实现下雨的天气动画效果
首先是最终实现的效果图: 先分析一下雨滴的实现: 每个雨滴其实就是一条线,通过 canvas.drawLine() 绘制 线(雨滴)的长度.宽度.下落速度.透明度以及位置都是在一定范围内随机生成 每 draw 一次然后改变雨滴的位置然后重绘即可实现雨滴的下落效果 分析完了,那么可以直接写一个类直接继承 View ,然后重写 onDraw() 吗?可以看到效果图中的雨滴的下落速度很快,那么意味着每一帧都要调用 onDraw() 一次使其重新绘制一次,假如你的 onDraw() 方法里面的渲染代码稍