廢話不多說先上圖:
新增功能:新建、保存、修改編輯功能。最新版安裝包
什麼是貝塞爾曲線
貝塞爾曲線(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);
}