這篇文章中我們比較了DraggableFlagView和BezierDemo兩個項目的區別,提到將對其中一個做源碼分析,那麼我們就來分析BezierDemo的源碼吧,因為這個項目的源碼最簡單,可以更直接的去分析核心的東西。但是效果還是DraggableFlagView好些。我盡量講的詳細些,滿足更多的初學者。這篇文章主要分析拉伸效果的實現。
BezierDemo只有兩個java文件
其中MainActivity.java是程序界面,而BezierView.java是實現了粘連拉伸效果的類。
MainActivity.java
package github.chenupt.bezier; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }
activity_main.xml
這裡有個疑問:為啥BezierView控件的layout_width和layout_height為match_parent。 這是因為這個代碼很粗糙,哈哈。
好了,從上面的activity可以看出,所有的功能都是BezierView控件實現的,因此我們直接轉向BezierView.java
先貼代碼
package github.chenupt.bezier; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics.PorterDuff; import android.graphics.Rect; import android.graphics.drawable.AnimationDrawable; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.widget.FrameLayout; import android.widget.ImageView; /** * Created by [email protected] on 11/20/14. * Description : custom layout to draw bezier */ public class BezierView extends FrameLayout { // 默認定點圓半徑 public static final float DEFAULT_RADIUS = 20; private Paint paint; private Path path; // 手勢坐標 float x = 300; float y = 300; // 錨點坐標 float anchorX = 200; float anchorY = 300; // 起點坐標 float startX = 100; float startY = 100; // 定點圓半徑 float radius = DEFAULT_RADIUS; // 判斷動畫是否開始 boolean isAnimStart; // 判斷是否開始拖動 boolean isTouch; ImageView exploredImageView; ImageView tipImageView; public BezierView(Context context) { super(context); init(); } public BezierView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public BezierView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init(){ path = new Path(); paint = new Paint(); paint.setAntiAlias(true); paint.setStyle(Paint.Style.FILL_AND_STROKE); paint.setStrokeWidth(2); paint.setColor(Color.RED); LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); exploredImageView = new ImageView(getContext()); exploredImageView.setLayoutParams(params); exploredImageView.setImageResource(R.drawable.tip_anim); exploredImageView.setVisibility(View.INVISIBLE); tipImageView = new ImageView(getContext()); tipImageView.setLayoutParams(params); tipImageView.setImageResource(R.drawable.skin_tips_newmessage_ninetynine); addView(tipImageView); addView(exploredImageView); } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { exploredImageView.setX(startX - exploredImageView.getWidth()/2); exploredImageView.setY(startY - exploredImageView.getHeight()/2); tipImageView.setX(startX - tipImageView.getWidth()/2); tipImageView.setY(startY - tipImageView.getHeight()/2); super.onLayout(changed, left, top, right, bottom); } private void calculate(){ float distance = (float) Math.sqrt(Math.pow(y-startY, 2) + Math.pow(x-startX, 2)); radius = -distance/15+DEFAULT_RADIUS; if(radius < 9){ isAnimStart = true; exploredImageView.setVisibility(View.VISIBLE); exploredImageView.setImageResource(R.drawable.tip_anim); ((AnimationDrawable) exploredImageView.getDrawable()).stop(); ((AnimationDrawable) exploredImageView.getDrawable()).start(); tipImageView.setVisibility(View.GONE); } // 根據角度算出四邊形的四個點 float offsetX = (float) (radius*Math.sin(Math.atan((y - startY) / (x - startX)))); float offsetY = (float) (radius*Math.cos(Math.atan((y - startY) / (x - startX)))); float x1 = startX - offsetX; float y1 = startY + offsetY; float x2 = x - offsetX; float y2 = y + offsetY; float x3 = x + offsetX; float y3 = y - offsetY; float x4 = startX + offsetX; float y4 = startY - offsetY; path.reset(); path.moveTo(x1, y1); path.quadTo(anchorX, anchorY, x2, y2); path.lineTo(x3, y3); path.quadTo(anchorX, anchorY, x4, y4); path.lineTo(x1, y1); // 更改圖標的位置 tipImageView.setX(x - tipImageView.getWidth()/2); tipImageView.setY(y - tipImageView.getHeight()/2); } @Override protected void onDraw(Canvas canvas){ if(isAnimStart || !isTouch){ canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.OVERLAY); }else{ calculate(); canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.OVERLAY); canvas.drawPath(path, paint); canvas.drawCircle(startX, startY, radius, paint); canvas.drawCircle(x, y, radius, paint); } super.onDraw(canvas); } @Override public boolean onTouchEvent(MotionEvent event) { if(event.getAction() == MotionEvent.ACTION_DOWN){ // 判斷觸摸點是否在tipImageView中 Rect rect = new Rect(); int[] location = new int[2]; tipImageView.getDrawingRect(rect); tipImageView.getLocationOnScreen(location); rect.left = location[0]; rect.top = location[1]; rect.right = rect.right + location[0]; rect.bottom = rect.bottom + location[1]; if (rect.contains((int)event.getRawX(), (int)event.getRawY())){ isTouch = true; } }else if(event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_CANCEL){ isTouch = false; tipImageView.setX(startX - tipImageView.getWidth()/2); tipImageView.setY(startY - tipImageView.getHeight()/2); } invalidate(); if(isAnimStart){ return super.onTouchEvent(event); } anchorX = (event.getX() + startX)/2; anchorY = (event.getY() + startY)/2; x = event.getX(); y = event.getY(); return true; } }
該控件是一個自定義的FrameLayout,之所以不用自定義view,是為了能直接添加顯示消息數目的圖片。
關於成員變量的那部分注釋已經比較清楚了,我直接看看
init()方法
在init方法中首先初始化了畫筆paint,這個paint就是繪制粘連拉伸效果的。然後paint初始化代碼下面為FrameLayout添加了兩個圖片:exploredImageView和tipImageView,exploredImageView是在拉斷之後顯示的氣泡,而tipImageView是數字提示,這兩個ImageView都只是為了輔助模仿qq,但不是我們要討論的核心。
onLayout()方法
非重點,略。
calculate()方法
這是根據手指拖動位置計算各坐標的的方法,同時還在這裡根據坐標點將path路徑也定義了:
path.reset(); path.moveTo(x1, y1); path.quadTo(anchorX, anchorY, x2, y2); path.lineTo(x3, y3); path.quadTo(anchorX, anchorY, x4, y4); path.lineTo(x1, y1);
這端代碼是粘連拉伸效果的核心。一會而我們做的各種實驗都是在這裡修修改改。
onDraw()方法
@Override protected void onDraw(Canvas canvas){ if(isAnimStart || !isTouch){ canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.OVERLAY); }else{ calculate(); canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.OVERLAY); canvas.drawPath(path, paint); // canvas.drawCircle(startX, startY, radius, paint); // canvas.drawCircle(x, y, radius, paint); } super.onDraw(canvas); }
這個方法調用了上面的calculate方法,然後根據計算出的值繪制path和圓圈。
onTouchEvent()方法
這個方法將根據觸摸點的位置變化記錄必要的位置信息,供calculate()方法計算,同時在必要的地方發送繪制請求。
如果講到這裡就結束,你肯定不滿意-“我還是沒明白貝塞爾曲線是如何應用到裡面的呢”。為了徹底明白我們將做幾個分解代碼的實驗。
首先我們找到onDraw方法,
@Override protected void onDraw(Canvas canvas){ if(isAnimStart || !isTouch){ canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.OVERLAY); }else{ calculate(); canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.OVERLAY); canvas.drawPath(path, paint); canvas.drawCircle(startX, startY, radius, paint); canvas.drawCircle(x, y, radius, paint); } super.onDraw(canvas); }
在
if(isAnimStart || !isTouch){
中的代碼是拉斷之後的效果,不去管他。
主要看else中的代碼
首先調用了calculate()方法,然後調用了
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.OVERLAY);
這個去掉也無所謂。
接著繪制了一條帶有貝塞爾曲線的封閉路徑:
canvas.drawPath(path, paint);
然後分別繪制了兩端的圓圈。
為了更直觀的看出效果,我們將原本
// 默認定點圓半徑
public static final float DEFAULT_RADIUS = 20;
改成
// 默認定點圓半徑
public static final float DEFAULT_RADIUS = 150;
這樣大點會更清楚的看到拉伸過程,而且拉很長也不會斷,拉斷的臨界點是下面代碼決定的:
calculate方法中
float distance = (float) Math.sqrt(Math.pow(y-startY, 2) + Math.pow(x-startX, 2));
radius = -distance/15+DEFAULT_RADIUS;
if(radius < 9){
isAnimStart = true;
更改之後得到的效果如下:
你看我都拉了半邊屏幕。
但是這樣仍然難以看到曲線是如何繪制的,這是因為畫筆paint的繪制類型是填充模式的,我們改成線條模式:
將init()方法改成
private void init(){
path = new Path();
paint = new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(2);
paint.setColor(Color.RED);
......
這樣我們就能看到線條是如何組合的了:
可以看出的確是兩個圓圈和一條封閉的路徑組成的。那個數字圖片有點礙眼,我們想辦法去掉
在calculate()方法的適當位置加上
tipImageView.setVisibility(View.GONE);
我是加在第三行左右,總之能保證會被執行就行。我不敢說加在這裡最合適,我只是單純的想去掉它而已。
下面是去掉之後來回拉伸的變換圖:
有點猥瑣。。。。
現在我們將兩個圓圈也去掉吧,這兩個圓圈僅僅是根據兩點之間距離的大小改變了下半徑而已(第二個點也改變了圓點坐標)。貝塞爾曲線在中間那部分,讓我們看看包含了貝塞爾曲線的path路徑的真面目。
去掉圓圈只需將ondraw方法的相關代碼注釋掉:
下面是注釋之後的效果:
這就是我們的path了。
回到構建這個path的代碼,在calculate方法中:
path.reset(); path.moveTo(x1, y1); path.quadTo(anchorX, anchorY, x2, y2); path.lineTo(x3, y3); path.quadTo(anchorX, anchorY, x4, y4); path.lineTo(x1, y1);
其中lineTo方法是繪制直線,quadTo方法就是繪制貝塞爾曲線,准確的說,是繪制二階貝塞爾曲線。為了能看出path的先後順序,我們分別定義
(x1, y1)為A點
(x2, y2)為B點
(x3, y3)為C點
(x4, y4)為D點
(anchorX, anchorY)為X點,這是二階貝塞爾曲線的控制點,這裡有兩條二階貝塞爾曲線,都是同一個控制點。
同時在canvas中將這幾個點的字母標注出來,具體的做法是調用canvas.drawText,修改具體的代碼我就不發了。
每個點的顯示位置有所偏差(尤其是X點),這是因為canvas.drawText的參數需要根據字符的大小做調整,我為了簡便,沒有去做,但是這些點你應該知道他們的實際位置,A,B,C,D很好辨認,但是X應該是在中間才對。
有了上面那幅圖對於這段代碼就好理解了
path.moveTo(x1, y1); path.quadTo(anchorX, anchorY, x2, y2); path.lineTo(x3, y3); path.quadTo(anchorX, anchorY, x4, y4); path.lineTo(x1, y1);
拉伸的粘連效果主要取決於quadTo繪制的兩條貝塞爾曲線,這兩條曲線以他們之間的中間位置為控制點,導致曲線以相同的弧度往內彎曲。當兩端的圓圈距離越來越長,控制點的位置以及兩條曲線的端點也跟著變化(需要根據距離計算端點和控制點的位置)就形成了橡皮筋的粘連效果。
那麼現在的最後一個問題是如何尋找這些變化的點。
首先我們需要記錄手指運動過程中,觸摸點的變化情況,在demo中是使用(x,y)來代表這個觸摸點,然後根據(startX,startY)(這個點是寫死的)計算出控制點的坐標(anchorX,anchorY)
代碼如下
@Override public boolean onTouchEvent(MotionEvent event) { if(event.getAction() == MotionEvent.ACTION_DOWN){ // 判斷觸摸點是否在tipImageView中 Rect rect = new Rect(); int[] location = new int[2]; tipImageView.getDrawingRect(rect); tipImageView.getLocationOnScreen(location); rect.left = location[0]; rect.top = location[1]; rect.right = rect.right + location[0]; rect.bottom = rect.bottom + location[1]; if (rect.contains((int)event.getRawX(), (int)event.getRawY())){ isTouch = true; } }else if(event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_CANCEL){ isTouch = false; tipImageView.setX(startX - tipImageView.getWidth()/2); tipImageView.setY(startY - tipImageView.getHeight()/2); } invalidate(); if(isAnimStart){ return super.onTouchEvent(event); } anchorX = (event.getX() + startX)/2; anchorY = (event.getY() + startY)/2; x = event.getX(); y = event.getY(); return true; }
其中if和else代碼塊中的的代碼和粘連效果無關,這些代碼是關於氣泡的ImageView顯示與消失的。
主要就是下面的代碼
invalidate(); if(isAnimStart){ return super.onTouchEvent(event); } anchorX = (event.getX() + startX)/2; anchorY = (event.getY() + startY)/2; x = event.getX(); y = event.getY();
可以看出在onTouchEvent中,主要工作是記錄,坐標點的計算還是在calculate()方法裡(不過這裡也簡單的計算了控制點的坐標(anchorX,anchorY),其實這也可以放到calculate裡面)。另外
invalidate()方法我覺得還是放在最後比較好。不過沒什麼大礙,也就是落後一個點而已,你根本感覺不到。
而calculate()方法裡面對坐標的計算也很簡單,沒幾行代碼,結合上面的幾幅圖應該很容易解出來。這裡就不再贅述了。
其實整篇文章可以用一句話來概括:粘連效果的關鍵是由同一個控制點(中間點)“拖住”兩條貝塞爾曲線。
最後做一點補充,為了將橡皮的效果做的更逼真,這個demo中還動態的改變了兩端圓點的半徑,當然這也會導致其他點也做相應的改變
float distance = (float) Math.sqrt(Math.pow(y-startY, 2) + Math.pow(x-startX, 2)); radius = -distance/15+DEFAULT_RADIUS;