android 貝塞爾曲線繪制心形

廢話不多說先上圖：

新增功能：建立、儲存、修改編輯功能。最新版安裝包

安裝包下載下傳

什麼是貝塞爾曲線

貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應用于二維圖形應用程式的數學曲線。一般的矢量圖形軟體通過它來精确畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。主要結構：起始點、終止點（也稱錨點）、控制點。通過調整控制點，貝塞爾曲線的形狀會發生變化。

本文旨在對貝塞爾曲線的使用，下面我們來看看如何做出上圖效果：

這裡我們使用三階貝塞爾曲線：

mPath.reset();
        mPath.moveTo(controllerLeft.getPointBX(), controllerLeft.getPointBY());
        for(int a=0;a<4;a++){
            mPath.cubicTo(bezierPoint.get(a*4+1).pX, bezierPoint.get(a*4+1).pY
                    , bezierPoint.get(a*4+2).pX, bezierPoint.get(a*4+2).pY
                    , bezierPoint.get(a*4+3).pX, bezierPoint.get(a*4+3).pY);
        }
        mPath.close();
           

從第三幅圖容易看出，我一共使用了4個控制器，每個控制器上我加了3個控制點，下面給出控制器類：

package com.viclee.beziercurve.entity;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

/**
 * Created by dujq on 2017/3/27.
 */

public class ShapeController {
    public float pointAX;
    public float pointAY;
    public float pointBX;
    public float pointBY;
    public float pointCX;
    public float pointCY;
    private int side = 10;
    private ShapeController() {
    }

    public ShapeController(float pointAX, float pointAY, float pointBX, float pointBY, float pointCX, float pointCY) {
        this.pointAX = pointAX;
        this.pointAY = pointAY;
        this.pointBX = pointBX;
        this.pointBY = pointBY;
        this.pointCX = pointCX;
        this.pointCY = pointCY;
    }

    public void changePoint(int pointIdx, float x, float y) {
        switch (pointIdx) {
            case 1:
                this.pointAX = x;
                this.pointAY = y;
                break;
            case 2:
                this.pointBX = x;
                this.pointBY = y;
                break;
            case 3:
                this.pointCX = x;
                this.pointCY = y;
                break;
        }
    }

    /**
     * 繪制圖形
     */
    public void onDraw(Canvas canvas, Paint paint) {
        paint.setColor(Color.GRAY);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawRect(pointAX - side, pointAY - side, pointAX + side, pointAY + side, paint);
        canvas.drawRect(pointBX - side, pointBY - side, pointBX + side, pointBY + side, paint);
        canvas.drawRect(pointCX - side, pointCY - side, pointCX + side, pointCY + side, paint);
        paint.setStrokeWidth(2.0f);
        canvas.drawLine(pointAX, pointAY, pointBX, pointBY, paint);
        canvas.drawLine(pointBX, pointBY, pointCX, pointCY, paint);
    }

}
           

View初始化：

public BezierDrawLove2View(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        mGesturePaint.setAntiAlias(true);
        mGesturePaint.setStyle(Paint.Style.FILL);
        mGesturePaint.setStrokeWidth(8);
        mGesturePaint.setColor(context.getResources().getColor(R.color.colora));
    }

    private void initController() {
        controllerLeft = new ShapeController(mWidth / 4, mHeight / 2 - length
                , mWidth / 4, mHeight / 2, mWidth / 4, mHeight / 2 + length);
        controllerRight = new ShapeController(mWidth * 3 / 4, mHeight / 2 - length
                , mWidth * 3 / 4, mHeight / 2, mWidth * 3 / 4, mHeight / 2 + length);

        controllerTop = new ShapeController(mWidth * 2 / 4 - length, mHeight / 2 - length * 2
                , mWidth * 2 / 4, mHeight / 2 - length * 2, mWidth * 2 / 4 + length, mHeight / 2 - length * 2);
        controllerButtom = new ShapeController(mWidth * 2 / 4 - length, mHeight / 2 + length * 2
                , mWidth * 2 / 4, mHeight / 2 + length * 2, mWidth * 2 / 4 + length, mHeight / 2 + length * 2);

    }

    private void drawController(Canvas canvas) {
        controllerLeft.onDraw(canvas, new Paint());
        controllerRight.onDraw(canvas, new Paint());
        controllerTop.onDraw(canvas, new Paint());
        controllerButtom.onDraw(canvas, new Paint());
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mHeight = getMeasuredHeight();
        mWidth = getMeasuredWidth();
        color = context.getResources().getColor(R.color.colord);
        initController();
        initData();
    }
           

view的繪制：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        mGesturePaint.setColor(color);
        mPath.reset();
        mPath.moveTo(controllerLeft.getPointBX(), controllerLeft.getPointBY());
        for(int a=0;a<4;a++){
            mPath.cubicTo(bezierPoint.get(a*4+1).pX, bezierPoint.get(a*4+1).pY
                    , bezierPoint.get(a*4+2).pX, bezierPoint.get(a*4+2).pY
                    , bezierPoint.get(a*4+3).pX, bezierPoint.get(a*4+3).pY);
        }
        mPath.close();
        canvas.drawPath(mPath, mGesturePaint);

        drawController(canvas);

        Paint paint = new Paint();
        paint.setColor(Color.WHITE);
        paint.setTextSize(24f);
        canvas.drawRect(0,0,108,108,mGesturePaint);
        canvas.drawText("複位",24,56,paint);

        Paint paintColor = new Paint();
        paintColor.setColor(context.getResources().getColor(R.color.colora));
        canvas.drawRect(108+48,0,108+48+108,108,paintColor);
        paintColor.setColor(context.getResources().getColor(R.color.colorb));
        canvas.drawRect(108+48+108+48,0,108+108+48+108+48,108,paintColor);
        paintColor.setColor(context.getResources().getColor(R.color.colorc));
        canvas.drawRect(108+108+48+108+48+48,0,108+108+108+48+108+48+48,108,paintColor);

    }