Android使用贝塞尔曲线画心形

本文实例为大家分享了Android使用贝塞尔曲线画心形的具体代码，供大家参考，具体内容如下

一开始我只是想画个圆，可画着画着就成了心形，那就将错就错

1. 创建一个Activity

RelativeLayout container = findViewById(R.id.download_container);

    DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    deviceWidth = metrics.widthPixels;
    deviceHeight = metrics.heightPixels;

    Circle circle = new Circle(this, deviceWidth / 2, deviceHeight / 2, deviceWidth / 8);
    Line line = new Line(this, deviceWidth / 2, deviceHeight / 2, deviceWidth / 8);
    container.addView(line);

2. 创建一个自定义的View

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.view.View;

public class Line extends View {

    private Paint mPaint;
    private PointF startPointF;
    private PointF endPointF;
    private PointF controlPointF1, controlPointF2;

    private PointF startPointF2;
    private PointF endPointF2;
    private PointF controlPointF3, controlPointF4;

    public Line(Context context, float x, float y, float radius) {
        super(context);
        double d = (2 * Math.sqrt(2) - 1);
        this.startPointF = new PointF(x, y - radius);
        this.endPointF = new PointF(x, y + radius / 10);
        this.controlPointF1 = new PointF(x, (float) (y - d * radius));
        this.controlPointF2 = new PointF((float) (x + d * radius), (float) (y - d * radius));

        this.startPointF2 = new PointF(x, y - radius);
        this.endPointF2 = new PointF(x, y + radius / 10);
        this.controlPointF3 = new PointF(x, (float) (y - d * radius));
        this.controlPointF4 = new PointF((float) (x - d * radius), (float) (y - d * radius));

        this.mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        this.mPaint.setColor(Color.WHITE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //绘制贝塞尔曲线
        Path path = new Path();

        path.moveTo(startPointF.x, startPointF.y);
        path.cubicTo(controlPointF1.x, controlPointF1.y, controlPointF2.x, controlPointF2.y, endPointF.x, endPointF.y);
        canvas.drawPath(path, mPaint);

        path.moveTo(startPointF2.x, startPointF2.y);
        path.cubicTo(controlPointF3.x, controlPointF3.y, controlPointF4.x, controlPointF4.y, endPointF2.x, endPointF2.y);
        canvas.drawPath(path, mPaint);
    }
}

运行效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Android自定义View实现心形图案

    Android自定义View实现心形图案

    本文实例为大家分享了Android自定义View实现心形的具体代码,供大家参考,具体内容如下 通过继承View实现的❤形 在绘制心形需要Path类中的两个重要方法分别是:moveTo.cubicTo moveTo 不会进行绘制,只用于移动移动画笔. lineTo 用于进行直线绘制. quadTo 用于绘制圆滑曲线,即贝塞尔曲线. cubicTo 同样是用来实现贝塞尔曲线的. 具体实现: public class HeartView extends View { private int mMeas

  • Android使用贝塞尔曲线画心形

    Android使用贝塞尔曲线画心形

    本文实例为大家分享了Android使用贝塞尔曲线画心形的具体代码,供大家参考,具体内容如下 一开始我只是想画个圆,可画着画着就成了心形,那就将错就错 1. 创建一个Activity RelativeLayout container = findViewById(R.id.download_container);     DisplayMetrics metrics = new DisplayMetrics();     getWindowManager().getDefaultDisplay()

  • Android利用贝塞尔曲线绘制动画的示例代码

    Android利用贝塞尔曲线绘制动画的示例代码

    目录 彩虹系列 弹簧动画 复杂立体感动画 总结 前面我们花了几篇介绍了贝塞尔曲线的原理和绘制贝塞尔曲线,着实让我们见识到了贝塞尔曲线的美.好奇心驱使我想看看贝塞尔曲线动起来会是什么样?本篇就借由动画驱动贝塞尔曲线绘制看看动起来的贝塞尔曲线什么效果. 彩虹系列 通过动画控制绘制的结束点,就可以让贝塞尔曲线动起来.例如下面的动图展示的效果,看起来像搭了一个滑滑梯一样.实际上就是用7条贝塞尔曲线实现的,我们使用了 Animation 对象的值来控制绘制的结束点,从而实现了对应的动画效果. 具体源码如下

  • android实现贝塞尔曲线之波浪效果

    android实现贝塞尔曲线之波浪效果

    本文实例为大家分享了android实现贝塞尔曲线之波浪效果的具体代码,供大家参考,具体内容如下 1 前言 为了给我以前的博客填坑,这章讲解贝塞尔曲线的几个常用的应用: 1.波浪效果2.qq聊天列表上的沾粘体效果3.翻书页效果4.弹性球效果 大家如果把这些看懂并掌握,以后做和贝塞尔曲线相关的效果应该都能信手拈来! 2 波浪效果 原理分析: 其实这个效果应用了2个阶的贝塞尔曲线来完成的,先看一下原理分析图: 有上面的图可以看出:在屏幕的左面画出了1.5个波长,在屏幕中画出1个波长,然后让它循环的向右

  • Android中贝塞尔曲线的绘制方法示例代码

    Android中贝塞尔曲线的绘制方法示例代码

    贝塞尔曲线,很多人可能不太了解,什么叫做贝塞尔曲线呢?这里先做一下简单介绍:贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋.一般的矢量图形软件常利用贝塞尔曲线来精确画出曲线. 上面的介绍中,"线段像可伸缩的皮筋"这句话非常关键,但也特别好理解.至于贝塞尔曲线的详细内容大家可以查阅相关资料.        Android提供的贝塞尔曲线绘制接口 在Android开发中,要实现贝塞尔曲线其实还是很简单的,因为Android已经给我们提

  • android中贝塞尔曲线的应用示例

    android中贝塞尔曲线的应用示例

    前言: 贝塞尔曲线又称贝兹曲线,它的主要意义在于无论是直线或曲线都能在数学上予以描述.最初由保罗·德卡斯特里奥(Paul de Casteljau)于1959年运用德卡斯特里奥演算法开发(de Casteljau Algorithm),在1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表.目前广泛应用于图形绘制领域来模拟光滑曲线,为计算机矢量图形学奠定了基础.在一些图形处理软件中都能见到贝塞尔曲线,比如CorelDraw中翻译成"贝赛尔工具":而在Firewo

  • Android使用贝塞尔曲线仿QQ聊天消息气泡拖拽效果

    本文实例为大家分享了Android仿QQ聊天消息气泡拖拽效果展示的具体代码,供大家参考,具体内容如下 先画圆,都会吧.代码如下: public class Bezier extends View { private final Paint mGesturePaint = new Paint(); private final Path mPath = new Path(); private float mX1 = 100, mY1 = 150; private float mX2 = 300, m

  • Android通过交互实现贝塞尔曲线的绘制

    Android通过交互实现贝塞尔曲线的绘制

    目录 前言 获取触控位置 交互绘制实现 绘制代码 运行效果 总结 前言 之前几篇我们介绍了贝塞尔曲线的原理.绘制曲线和动效实现,这些都是代码预设好的,如果我们要根据需要自行绘制曲线,就需要使用交互来实现了.本篇我们先来介绍简单的交互式绘图,通过获取触控位置来设定贝塞尔曲线的控制点,从而实现交互式绘制曲线. 获取触控位置 第一个要解决的问题是如何获取手指在屏幕的触控位置.在 Flutter 中,提供了一个 Listener 组件,可以监听各类触控事件.Listener 的组件构造方法定义如下: c

  • Android动效Compose贝塞尔曲线动画规格详解

    Android动效Compose贝塞尔曲线动画规格详解

    目录 正文 贝塞尔曲线 解析动画曲线 曲线源码分析 总结 正文 写Compose动画的时候使用animateXAsState的时候会注意到一个参数——animationSpec,如下: val borderRadius by animateIntAsState( targetValue = if (isRound) 100 else 0, animationSpec = tween( durationMillis = 3000, easing = LinearEasing ) ) 此处就不深入探

  • Android把商品添加到购物车的动画效果（贝塞尔曲线）

    Android把商品添加到购物车的动画效果（贝塞尔曲线）

    当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹 设置属性动画,ValueAnimator插值器,获取中间点的坐标 将执行动画的控件的x.y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 难点: PathMeasure的使用 - getLength() - boolean getPosTan(float distance, f

  • Android贝塞尔曲线初步学习第二课 仿QQ未读消息气泡拖拽黏连效果

    Android贝塞尔曲线初步学习第二课 仿QQ未读消息气泡拖拽黏连效果

    上一节初步了解了Android端的贝塞尔曲线,这一节就举个栗子练习一下,仿QQ未读消息气泡,是最经典的练习贝塞尔曲线的东东,效果如下 附上github源码地址:https://github.com/MonkeyMushroom/DragBubbleView 欢迎star~ 大体思路就是画两个圆,一个黏连小球固定在一个点上,一个气泡小球跟随手指的滑动改变坐标.随着两个圆间距越来越大,黏连小球半径越来越小.当间距小于一定值,松开手指气泡小球会恢复原来位置:当间距超过一定值之后,黏连小球消失,气泡小球

随机推荐