Android 贝塞尔曲线实践——旋转的七色花朵
1、关于贝塞尔曲线算法
在工业设计方面贝塞尔曲线有不少用途，一样，在Android中，贝塞尔曲线结合Path类能够实现更复杂的图形，这里咱们给一个案例，来实现一种旋转的花朵。对于贝赛尔曲线的理解，建议参考《Android高级绘制——绘图篇（三）路径Path绘制以及贝塞尔曲线使用技巧》，写的很是详细。canvas
2、自定义View的误区app
今天咱们自定义的View效果以下：ide
对于花朵而言，首先要构建花瓣，花瓣这里使用了三阶贝赛尔曲线，由于二阶贝赛尔曲线画出来的是树叶。函数
private void buildLeaf(Canvas canvas){
mPaint.setColor(0xff40835e);
int width = getWidth();
int height = getHeight();
if(width==0 || height==0){
return;
}
int centerX = width/2;
int centerY = height/2;
int Radius = Math.max(width,height)/2;
Path path = new Path();
path.moveTo(0,0);
// float leftctrY = - (Radius*4)/5.0f;
float leftctrY = - (Radius*7)/10.0f;
float leftctrX = -(float) (Math.abs(leftctrY) * Math.tan(Math.toRadians(30)));
// path.lineTo(leftctrX,leftctrY);
int lastX = 0;
int lastY = -Radius;
float rightctrY = - (Radius*7)/10.0f;
float rightctrX = (float) (Math.abs(rightctrY) * Math.tan(Math.toRadians(30)));
path.quadTo(leftctrX,leftctrY,lastX,lastY);
path.quadTo(rightctrX,rightctrY,0,0);
path.close();
path.setFillType(Path.FillType.WINDING);
int restoreId = canvas.save();
Paint.Style style = mPaint.getStyle();
// mPaint.setStyle(Paint.Style.STROKE);
canvas.translate(centerX,centerY);
canvas.drawPath(path,mPaint);
mPaint.setStyle(style);
canvas.restoreToCount(restoreId);
}
而咱们须要的带有弧度的花瓣，所以二阶显然不行，花瓣的画法难度主要集中于三角函数的计算，此外还有第二个控制点的肯定，第二个控制点与原点的举例实际上和离原点最远的边平行，此外过最远的点做垂线相交，不然可能产生以下效果。ui
private void buildHeart(Canvas canvas){
mPaint.setColor(0xffa7324a);
int width = getWidth();
int height = getHeight();
if(width==0 || height==0){
return;
}
int centerX = width/2;
int centerY = height/2;
int Radius = Math.max(width,height)/2;
Path path = new Path();
path.moveTo(0,0);
// float leftctrY = - (Radius*4)/5.0f;
float leftctrY = - (Radius*5)/10.0f;
float leftctrX = -(float) (Math.abs(leftctrY) * Math.tan(Math.toRadians(60)));
// path.lineTo(leftctrX,leftctrY);
int lastX = 0;
float lastY = -Radius * 8f/10;
float rightctrY = - (Radius*5)/10.0f;
float rightctrX = (float) (Math.abs(rightctrY) * Math.tan(Math.toRadians(60)));
path.cubicTo(leftctrX,leftctrY,leftctrX,-Radius,lastX,lastY);
path.cubicTo(rightctrX,-Radius,rightctrX,rightctrY,0,0);
path.close();
path.setFillType(Path.FillType.WINDING);
int restoreId = canvas.save();
Paint.Style style = mPaint.getStyle();
canvas.translate(centerX,centerY);
canvas.drawPath(path,mPaint);
mPaint.setStyle(style);
canvas.restoreToCount(restoreId);
}
3、实现自定义View-旋转的花朵this
public class FlowerView extends View {
private TextPaint mPaint;
private int strokeWidth = 1;
private int textSize = 12;
private int minContentSize = 0;
private Path mPath;
private int mPetalNumbers = 7;
private float degree;
private int defaultPetalColor = 0xFFFF1493;
private int[] colorSet = new int[]{0xffFF1493,0xffFFD700,0xffFFFF00,0xff87CEFA,0xff00FA9A,0xffBA55D3,0xffE0FFFF};
private boolean isPlaying = false;
public FlowerView(Context context) {
this(context,null);
}
public FlowerView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public FlowerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setClickable(true);
initPaint();
minContentSize = ViewConfiguration.get(context).getScaledTouchSlop() * 2;
mPath = new Path();
}
public boolean isPlaying() {
return isPlaying;
}
private void initPaint() {
// 实例化画笔并打开抗锯齿
mPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG );
mPaint.setAntiAlias(true);
mPaint.setPathEffect(new CornerPathEffect(10)); //设置线条类型
mPaint.setStrokeWidth(dip2px(strokeWidth));
mPaint.setTextSize(dip2px((textSize)));
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
if(widthMode!=MeasureSpec.EXACTLY){
width = (int) dip2px(210);
}
if(heightMode!=MeasureSpec.EXACTLY){
height = (int) dip2px(210);
}
setMeasuredDimension(width,height);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
final int width = getWidth();
final int height = getHeight();
if(width<minContentSize || height<minContentSize) return;
int contentSize = Math.min(width,height); //取最小边长，防止画出边界
clearCanvas(canvas);
canvas.drawColor(0xffffffff);
int centerX = width/2;
int centerY = height/2;
final int restoreId = canvas.save();
canvas.translate(centerX,centerY); //将坐标系移到中心
mPaint.setStyle(Paint.Style.STROKE);
drawFlower(canvas,contentSize);
canvas.restoreToCount(restoreId);
}
public void setPetalNumber(int num,int[] colorSet){
this.mPetalNumbers = num;
this.colorSet = colorSet;
invalidate();
}
ValueAnimator animator = null;
public void startRotate(){
stopRotate();
isPlaying = true;
if(animator==null) {
animator = ValueAnimator.ofFloat(0, 360);
animator.setEvaluator(new TypeEvaluator<Float>() {
@Override
public Float evaluate(float fraction, Float startValue, Float endValue) {
return new Float(fraction * 360);
}
});
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator());
animator.setDuration(3000)
.setRepeatMode(ValueAnimator.RESTART);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
setDegree((Float) animation.getAnimatedValue());
}
});
}
animator.start();
}
public void stopRotate(){
isPlaying = false;
if(animator!=null){
animator.cancel();
animator = null;
}
}
private void drawFlower(Canvas canvas, int contentSize) {
int N = this.mPetalNumbers;
for (int i=0;i< N;i++){
drawFlowerPath(canvas,contentSize,N,i);
}
}
//花瓣算法
private void drawFlowerPath(Canvas canvas, int contentSize,int N,int pos) {
float perDegree = 360f/N;
final float R = contentSize/2f;
final float degree = perDegree*pos + this.degree;
float endY = (float) (R * Math.sin(Math.toRadians(degree)));
float endX = (float) (R * Math.cos(Math.toRadians(degree)));;
float firstCtlLength = (float) ((R / 2f) / Math.cos(Math.PI / N));
float leftY = (float) ((firstCtlLength) * Math.sin(degree* Math.PI/180 - Math.PI/N));
float leftX = (float) ((firstCtlLength) * Math.cos(degree* Math.PI/180 - Math.PI/N));
float rightY = (float) ((firstCtlLength) * Math.sin(degree* Math.PI/180 + Math.PI/N));
float rightX = (float) ((firstCtlLength) * Math.cos(degree* Math.PI/180 + Math.PI/N));
float topLeftY = leftY + (float) ( R/2f * Math.sin(degree* Math.PI/180)); //左侧第二控制点
float topLeftX = leftX + (float)( R/2f * Math.cos(degree* Math.PI/180)) ;
float topRightY = rightY + (float) ( R/2f * Math.sin(degree* Math.PI/180)); //右侧第二控制点
float topRightX = rightX + (float)( R/2f * Math.cos(degree* Math.PI/180)) ;
mPath.reset();
mPath.moveTo(0,0);
mPath.cubicTo(leftX,leftY,topLeftX,topLeftY,endX,endY);
mPath.cubicTo(topRightX,topRightY,rightX,rightY,0,0);
mPath.close();
if(colorSet==null || colorSet.length==0) {
mPaint.setColor(0x9aFB2222);
}else{
mPaint.setColor(colorSet[pos%N]);
}
mPath.setFillType(Path.FillType.WINDING);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawPath(mPath,mPaint);
mPaint.setColor(Color.RED);
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawPath(mPath,mPaint);
}
private synchronized void clearCanvas(Canvas canvas) {
final Xfermode xfermode = mPaint.getXfermode();
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawPaint(mPaint);
mPaint.setXfermode(xfermode);
}
public float dip2px(int dp){
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dp,getResources().getDisplayMetrics());
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
}
public void setDegree(float degree) {
this.degree = degree;
invalidate();
}
}
以上就是整个View的实现，使用方法以下lua
myFlower = (FlowerView) findViewById(R.id.id_myflower);
myFlower.setPetalNumber(7,null);
myFlower.setOnClickListener(this);
//省略其余不须要给大家看的代码
@Override
public void onClick(View v) {
if(v.getId()==R.id.id_myflower){
myFlower.startRotate();
}
}
相关文章
- 1. [转载]贝塞尔曲线
- 2. 贝塞尔曲线
- 3. Android 贝塞尔曲线库
- 4. Android 贝塞尔曲线
- 5. Android-贝塞尔曲线
- 6. Android中贝塞尔曲线
- 7. 贝塞尔曲线算法，js贝塞尔曲线路径点
- 8. Bezier贝塞尔曲线的原理、二次贝塞尔曲线的实现
- 9. Android 贝塞尔曲线的魅力
- 10. Android平常学习：OpenGL 实践之贝塞尔曲线绘制
- 更多相关文章...
- • Thymeleaf项目实践 - Thymeleaf 教程
- • R 绘图 - 函数曲线图 - R 语言教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • Docker容器实战(七) - 容器眼光下的文件系统
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. [转载]贝塞尔曲线
- 2. 贝塞尔曲线
- 3. Android 贝塞尔曲线库
- 4. Android 贝塞尔曲线
- 5. Android-贝塞尔曲线
- 6. Android中贝塞尔曲线
- 7. 贝塞尔曲线算法，js贝塞尔曲线路径点
- 8. Bezier贝塞尔曲线的原理、二次贝塞尔曲线的实现
- 9. Android 贝塞尔曲线的魅力
- 10. Android平常学习：OpenGL 实践之贝塞尔曲线绘制