带箭头的曲线（自定义的贝塞尔曲线和首次启动 app的引导界面）

最新推荐文章于 2022-03-04 11:21:13 发布
最新推荐文章于 2022-03-04 11:21:13 发布
阅读量3.4k 收藏
点赞数
分类专栏： Android 文章标签： 引导界面 Berzier 带箭头的曲线
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xubeiqiannian/article/details/46439379
版权

一款App首次安装启动以后一半会有引导用户使用的提示，下面是一个简单的引导界面，此功能实现效果如图，点击屏幕时候引导界面结束，之后每次启动不会出现，除非重新安装。

实现原理：两个Activity，两个自定义View控件

MainActivity

package com.example.bezierdemo;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends Activity {
private SharedPreferences sharedPreferences;
private Boolean isFirstInstall;// 用来纪录用户是否安装后的首次启动
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		sharedPreferences = this.getSharedPreferences("lidan", Context.MODE_PRIVATE);
		SharedPreferences.Editor s = sharedPreferences.edit();
	
		isFirstInstall=sharedPreferences.getBoolean("isFirstInstall", false);
		if(!isFirstInstall){  
			Toast.makeText(this, "安装后首次启动", 50000).show();
			startActivity(new Intent(MainActivity.this, GuidanceActivity.class));
			s.putBoolean("isFirstInstall", true);
			s.commit();
		}else{
			Toast.makeText(this, "启动", 50000).show();
		}
	}
}

其布局只有一个按钮

GuidanceActivity引导界面

package com.example.bezierdemo;

import android.R.bool;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.RelativeLayout;
/*
 * 引导界面，一般用于App安装后首次启动引导用户操作的提示
 * 此界面由自定义的贝塞尔曲线辅助完成
 * 一定要记得注册
 *         <activity
            android:name=".GuidanceActivity"
            android:theme="@android:style/Theme.Translucent" />
 * */
public class GuidanceActivity  extends Activity implements OnClickListener{
private RelativeLayout relativiveLayout;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.guidance_layout);
		relativiveLayout=(RelativeLayout)findViewById(R.id.relativiveLayout);	
		relativiveLayout.setOnClickListener(this);

	}

	@Override
	public void onClick(View v) {
		finish();
		
	}

}

布局： 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.example.bezierdemo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id= "@+id/relativiveLayout"
    android:background="#b0000000"
    >
     <!--xmlns:app="http://schemas.android.com/apk/res/com.example.bezierdemo"一定要记得声明，
     因为BezierCircleView和BezierView都用到了自定义的属性，如果不声明自定义属性就会报错
     设置半透明背景，否则看不到圆形的效果-->
      <com.example.bezierdemo.BezierCircleView
        xmlns:aa="http://schemas.android.com/apk/res/com.example.bezierdemo"
        android:id="@+id/bezierCircleView1"
        android:layout_width="100dip"
        android:layout_height="150dip"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_launcher" />
  <!--BezierView的属性使用：app:center_point="true"设置曲线突出如果是false凹陷
        app:end_point="2"线的起始点，0-9 对应九个不同起始方位
        line:start_point="3"线的终点位置  0-9  同样对应九个不同方位-->
    <com.example.bezierdemo.BezierView
        xmlns:line="http://schemas.android.com/apk/res/com.example.bezierdemo"
        android:id="@+id/bezierView1"
        android:layout_width="30dip"
        android:layout_height="50dip"
        android:layout_alignRight="@+id/bezierCircleView1"
        android:layout_alignTop="@+id/bezierCircleView1"
        android:layout_marginRight="85dp"
        android:layout_marginTop="81dp"
        app:center_point="true"
        app:end_point="2"
        line:start_point="3" />


   <TextView
       android:id="@+id/remain_text"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignRight="@+id/bezierCircleView1"
       android:layout_below="@+id/bezierView1"
       android:layout_marginRight="41dp"
       android:text="点击按钮分享给好友" />
  
</RelativeLayout>

自定义的View  带箭头的贝塞尔曲线 

<span style="font-size:18px;">package com.example.bezierdemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
/*
 * 自定义的贝塞尔曲线包含箭头
 * paint1绘制贝塞尔曲线 
 * paint2绘制的是箭头
 * 绘制原理是九个方位
 * */
public class BezierView extends View{
private Paint paint1,paint2;
public static final int LEFT_TOP = 1;
public static final int RIGHT_TOP = 2;
public static final int LEFT_BOTTOM = 3;
public static final int RIGHT_BOTTOM = 4;
public static final int LEFT_CENTER = 5;
public static final int TOP_CENTER = 6;
public static final int RIGHT_CENTER = 7;
public static final int BOTTOM_CENTER = 8;
public static final int CENTER = 9;
private int startPoint = LEFT_TOP;
private int endPiont = RIGHT_BOTTOM;
private boolean centerPoint = true;// 默认向上凸起
	public BezierView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initView(context, attrs);
	}
	
	public BezierView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}
	
	public BezierView(Context context) {
		this(context, null, 0);
	}
	
	public void initView(Context context, AttributeSet attrs) {
		if (attrs != null) {
//			设置自定义的属，在values下建立了attr.xml文件在其中设置属性，BezierView_start_point是起始点方位，
//			BezierView_end_point是终点方位，BezierView_center_point是曲线的凹凸设置
			TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.BezierView);
			startPoint = a.getInteger(R.styleable.BezierView_start_point, startPoint);
			centerPoint = a.getBoolean(R.styleable.BezierView_center_point, centerPoint);
			endPiont = a.getInteger(R.styleable.BezierView_end_point, endPiont);
		}else{}
		paint1 = new Paint();
		paint1.setAntiAlias(true);
		paint1.setColor(Color.BLACK);
		paint2 = new Paint();
		paint2.setAntiAlias(true);
		paint2.setColor(Color.BLACK);
	}

	@Override
	public void draw(Canvas canvas) {
		if(canvas==null)
		return;
		// 画线－－－－－－－－－－－
		paint1.setStyle(Paint.Style.STROKE);
		paint1.setColor(Color.BLACK);
		Path path = new Path();
		Path path2 = new Path();
		changerStartPoint(path, path2);// 起点
		changerEndPoint(path, path2);// 终点
		canvas.drawPath(path, paint1);// 画出贝塞尔曲线
		canvas.drawPath(path2, paint2);

	}
	

	
	
	/**
	 * 设置Path的起点
	 * 
	 * @param path
	 */
	private void changerStartPoint(Path path, Path path2) {
		switch (startPoint) {
		case LEFT_TOP:
			path.moveTo(0, 0);
			if (centerPoint) {
				path2.moveTo(getWidth() - getWidth() / 7, getHeight() - getHeight() / 5);
			} else {
				path2.moveTo(getWidth() - getWidth() / 5, getHeight() - getHeight() / 7 * 2);
			}
			break;
		case LEFT_BOTTOM:
			path.moveTo(0, getHeight());
			if (centerPoint) {
				path2.moveTo(getWidth() - getWidth() / 5, getHeight() / 10);
			} else {
				path2.moveTo(getWidth() - getWidth() / 5, getHeight() / 3);
			}
			break;
		case LEFT_CENTER:
			path.moveTo(0, getHeight() / 2);
			break;
		case RIGHT_TOP:
			path.moveTo(getWidth(), 0);
			if (centerPoint) {
				path2.moveTo(getWidth() / 10, getHeight() - getHeight() / 5);
			} else {
				path2.moveTo(getWidth() / 5, getHeight() - getHeight() / 3);
			}
			break;
		case RIGHT_BOTTOM:
			path.moveTo(getWidth(), getHeight());
			break;
		case RIGHT_CENTER:
			path.moveTo(getWidth(), getHeight() / 2);
			break;
		case TOP_CENTER:
			path.moveTo(getWidth() / 2, 0);
			break;
		case BOTTOM_CENTER:
			path.moveTo(getWidth() / 2, getHeight());
			break;
		case CENTER:
			path.moveTo(getWidth() / 2, getHeight() / 2);
			break;
		}
	}
	/**
	 * 设置贝塞尔曲线的控制点坐标和终点坐标
	 * 
	 * @param path
	 */
	private void changerEndPoint(Path path, Path path2) {
		Log.e("", startPoint + "    " + endPiont);
		switch (endPiont) {
		case LEFT_TOP:
			if (centerPoint) {
				path.quadTo(getWidth() / 4, getHeight() / 2, getWidth(), getHeight() / 2);
			} else {
			}
			break;
		case LEFT_BOTTOM:
			if (centerPoint) {
				// 画曲线
				path.quadTo(getWidth() / 2 - getWidth() / 3, getHeight() / 2 - getHeight() / 3, getWidth() / 5, getHeight() - getHeight() / 14);
				// 画箭头
				path2.quadTo(getWidth() / 5, getHeight(), getWidth() / 5 + getWidth() / 12, getHeight() - getHeight() / 5);
			} else {
				// 画曲线
				path.quadTo(getWidth() / 2 + getWidth() / 3, getHeight() / 2 + getHeight() / 3, getWidth() / 10, getHeight() - getHeight() / 5);
				// 画箭头
				path2.quadTo(0, getHeight() - getHeight() / 5, getWidth() / 5, getHeight() - getHeight() / 8);
			}
			break;
		case LEFT_CENTER:
			path.moveTo(0, getHeight() / 2);
			break;
		case RIGHT_TOP:
			if (centerPoint) {
				// 画曲线
				path.quadTo(getWidth() / 2 - getWidth() / 3, getHeight() / 2 - getHeight() / 3, getWidth() - getWidth() / 12, getHeight() / 5);
				// 画箭头
				path2.quadTo(getWidth(), getHeight() / 5, getWidth() - getWidth() / 5, getHeight() / 5 + getHeight() / 10);
			} else {
				// 画曲线
				path.quadTo(getWidth() / 2 + getWidth() / 3, getHeight() / 2 + getHeight() / 3, getWidth() - getWidth() / 12, getHeight() / 5);
				// 画箭头
				path2.quadTo(getWidth() - getWidth() / 12, 0, getWidth(), getHeight() / 5 * 2);
			}
			break;
		case RIGHT_BOTTOM:
			if (centerPoint) {
				// 画曲线
				path.quadTo(getWidth() / 2 + getWidth() / 3, getHeight() / 2 - getHeight() / 3, getWidth() - getWidth() / 5, getHeight()
						- getHeight() / 14);
				// 画箭头
				path2.quadTo(getWidth() - getWidth() / 5, getHeight(), getWidth() - getWidth() / 5 - getWidth() / 14, getHeight() - getHeight() / 5);
			} else {
				// 画曲线
				path.quadTo(getWidth() / 2 - getWidth() / 3, getHeight() / 2 + getHeight() / 3, getWidth() - getWidth() / 12, getHeight()
						- getHeight() / 5);
				// 画箭头
				path2.quadTo(getWidth(), getHeight() - getHeight() / 5, getWidth() - getWidth() / 5, getHeight() - getHeight() / 8);
			}
			break;
		case RIGHT_CENTER:
			path.moveTo(getWidth(), getHeight() / 2);
			break;
		case TOP_CENTER:
			path.moveTo(getWidth() / 2, 0);
			break;
		case BOTTOM_CENTER:
			path.moveTo(getWidth() / 2, getHeight());
			break;
		case CENTER:
			path.moveTo(getWidth() / 2, getHeight() / 2);
			break;
		}
	}

}
</span>
圆形的贝塞尔曲线 

<span style="font-size:18px;">package com.example.bezierdemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.PorterDuff.Mode;
import android.util.AttributeSet;
import android.view.View;


public class BezierCircleView extends View{
	private Paint paint;
	private boolean isCircle = true;
	private static final int LAYER_FLAGS = Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
			| Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG;

	public BezierCircleView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initView(context, attrs);
	}

	public BezierCircleView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public BezierCircleView(Context context) {
		this(context, null, 0);
	}

	public void initView(Context context, AttributeSet attrs) {
		if (attrs != null) {
			TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.BezierCircleView);
			isCircle = a.getBoolean(R.styleable.BezierCircleView_is_circle, isCircle);
		}
		paint = new Paint();
		paint.setAntiAlias(true);
		paint.setColor(Color.BLUE);
		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
	}

	@Override
	public void draw(Canvas canvas) {
		if (canvas == null) {
			return;
		}
		if (isCircle) {
			int r = getWidth() > getHeight() ? getHeight() / 2 : getWidth() / 2;
			canvas.drawCircle(getWidth() / 2, getHeight() / 2, r, paint);
			canvas.saveLayerAlpha(0, 0, 200, 200, 0x20, LAYER_FLAGS);// 新建图层并指定透明度，图层位于栈顶，所以直到restore以前的操作都只作用于此图层
			canvas.restore();// 将新建的图层合并到画布上
		} else {
			canvas.drawColor(Color.TRANSPARENT, Mode.CLEAR);
		}

	}
}
</span>

自定义属性 attrr.xml 

<?xml version="1.0" encoding="utf-8"?>
<resources>
        <!-- 向导箭头属性 -->
    <declare-styleable name="BezierView">
        <attr name="start_point" format="integer"></attr>
        <attr name="center_point" format="boolean"></attr>
        <attr name="end_point" format="integer"></attr>
    </declare-styleable>
        <!-- 向导圆的半径 -->
    <declare-styleable name="BezierCircleView">
        <attr name="is_circle" format="boolean"></attr>
    </declare-styleable>
    
</resources>



源代码下载地址  http://download.csdn.net/download/xubeiqiannian/8791303


青格er
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
点赞飘心+贝塞尔曲线+直播界面
10-28
点赞飘心+贝塞尔曲线+直播界面
勇者与羁绊 游戏开发日志（六）—— 实现动态弯曲的曲线箭头
天啦噜纸牌君
10-22 1410
勇者与羁绊 游戏开发日志（六）—— 实现动态弯曲的曲线箭头开发进度代码理解什么是贝塞尔曲线？贝塞尔曲线公式控制点计算Unity上的实现生成箭头利用贝塞尔公式刷新箭头位置的方法计算箭头角度的方式Ps.刷新方法的调用实现效果寻找合作 开发进度 1.做了一些UI显示数值的绑定。并且可以创建了敌人的数据类，可以根据传入ID生成敌人，实现方式与之前做卡牌的思路相同。 2.关于卡牌箭头的实现其实之前想了很久但...
iOS:使用贝塞尔曲线绘制图表（折线图、柱状图、饼状图）
dienangpiao2051的博客
07-22 421
1.介绍： UIBezierPath ：画贝塞尔曲线的path类 UIBezierPath定义 ： 贝赛尔曲线的每一个顶点都有两个控制点，用于控制在该顶点两侧的曲线的弧度。 曲线的定义有四个点：起始点、终止点（也称锚点）以及两个相互分离的中间点。 滑动两个中间点，贝塞尔曲线的形状会发生变化。 UIBezierPath ：对象是CGPathRef数据类型的封装，可以方便...
iOS绘图－UIBezierPath的使用
⒎過客ㄞ
03-07 2724
UIBezierPath简单介绍 iOS系统本身提供了两套绘图的框架，即UIBezierPath 和 Core Graphics。使用UIBezierPath可以创建基于矢量的路径，此类是Core Graphics框架关于路径的封装，所以使用起来比较简单。使用此类可以定义简单的形状，如椭圆、矩形或者有多个直线和曲线段组成的形状等。UIBezierPath是CGPathRef数据类型的封装。如果
Canvas 教程：如何绘制带箭头的曲线
a76326791212的博客
10-24 2074
这篇文章要解决一个问题，就是给定 HTML 中任意一个点（起点）和另一个点（终点），绘制一条带箭头的曲线。 废话不多说，直奔主题。 我们只有两个点的相对偏移量（offset），思路就是以这两个点作为对角，创建一个绝对定位的 Canvas，然后在两点中绘制一条曲线（Curve），最后在终点处绘制箭头（Arrow）。 因此分为 3 步： 创建适当的 Canvas 绘制曲线 绘制箭头 创建适当的 Canvas 先确定 Canvas 的绝对定位偏移量，因为是任意两点，所以对角可能是左上加右下，也可能是左下加右上
bezier曲线平滑C语言代码-贝塞尔曲线C语言实现-bezier曲线平滑-曲线拟合-贝塞尔曲线
最新发布
04-29
这是一份C语言版本的bezier曲线（贝塞尔曲线）绘制代码，实现了二次和三次bezier曲线的绘制，可用于一系列给定的离散点的曲线平滑。此代码封装成函数，可以直接调用。脚本里边有参数和代码的注释，可供使用者学习和...
贝塞尔曲线_贝塞尔曲线_
10-01
贝塞尔曲线的形成过程，鼠标点击可移动关键点
android自定义控件贝塞尔曲线
11-23
android自定义控件贝塞尔曲线 surfaceVIew
HTML实现贝塞尔曲线
12-23
HTML实现贝塞尔曲线
Unity 贝塞尔曲线编辑器
03-29
通用的贝塞尔曲线：一条贝塞尔曲线是由一组定义的控制点 P0到 Pn，在 n 调用它的顺序 (n = 1 为线性，2 为二次，等.)。第一个和最后一个控制点总是具有终结点的曲线;然而，中间两个控制点 (如果有的话) 一般不会位于...
iOS 贝塞尔曲线的小知识
03-05
一点关于贝塞尔曲线的东西,自己创建一个继承于UIView的类,然后在StroyBoard上托一个View设置父类为自己创建的类.
Android 自定义 直线箭头和曲线箭头
04-08
Android 自定义 直线箭头和曲线箭头 ，支持自定义颜色，通过两个或者三个坐标，绘制出来所需要的箭头 ，根据赛贝尔曲线及正切余弦等函数计算出箭头方向
ios-带箭头的呼出框，箭头跟随目标移动.zip
07-11
选择后改变导航栏title，自行把玩
基于IOS实现带箭头的view
09-01
封装了一个比较常用的控件, 带箭头的View, iOS在很多场景下可以使用到带箭头的View，下面一起来学习学习。
把商品添加到购物车的动画效果（贝塞尔曲线）路径动画
chuyouyinghe的专栏
03-04 604
参考： Android补间动画，属性动画实现购物车添加动画 思路： 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹 设置属性动画，ValueAnimator插值器，获取中间点的坐标 将执行动画的控件的x、y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 难点： PathMeasure的使用 - getLength() - boolean getPosTan(float distance, float[] pos, float[] tan) 的理解 涉及...
SVG ---- 在流程图/类图中 使用二次贝塞尔曲线 画出漂亮的箭头
u014066964的博客
11-08 2276
Foreword 在最近做的项目中遇到了画 UML 类图，其中想画一根比较好看的曲线，而不是笔直笔直的直线，于是查了很多，得知关于贝塞尔曲线，在这里做一下记录。下面先直接上一效果图： ...
JavaScript- 使用 atan2 来绘制 箭头 和 曲线
wmz545546的博客
09-14 768
最近搞Canvas绘图，知道了JavaScript中提供了atan2(y,x)这样一个三角函数。乍眼一看，不认识，毕竟在高中时，学过的三角函数有：sin,cos,arcsin,arccos,tan,arctan等，并没有这个。而工作中又需要用到它，所以这里就做了个简单的了解。   在坐标系中理解tan 和atan 为何存在atan2 ? atan2 应用 何时需要用到 atan2
b样条曲线和贝塞尔曲线的特点
03-31
1. 具有局部控制能力：贝塞尔曲线是由一系列控制点构成的，通过调整控制点的位置和权重，可以精确地控制曲线的形状。 2. 具有逼近性：贝塞尔曲线可以逼近任意给定的曲线形状，可以用于重构曲线。 3. 具有简单性：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值