實現畫布的效果
刮刮卡效果的原理
paint.setXferMode();
先繪製一個影象層1,使用者再手繪的部分為2。交際的部分就是要顯示的部分。
先來點基礎的
之前有做過一個類似畫板的demo
public class MyviewDraw extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setContentView(R.layout.ontouchdraw);
}
}
主佈局檔案
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.demotest.MainActivity" >
<!-- 匯入自定義的空間 -->
<com.example.demotest2.MypiantView
android:id="@+id/myview"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</com.example.demotest2.MypiantView>
</LinearLayout>
主要看重寫的MypiantView
package com.example.demotest2;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class MypiantView extends View {
private List<Point> allpoints = new ArrayList<Point>();;
// 用容器來儲存所有座標
public MypiantView(Context context, AttributeSet attrs) {
super(context, attrs);
super.setBackgroundColor(Color.WHITE);
super.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
Point point = new Point((int) event.getX(), (int) event.getY());
if (event.getAction() == MotionEvent.ACTION_DOWN) {
allpoints = new ArrayList<Point>();// 初始化
allpoints.add(point);
} else if (event.getAction() == MotionEvent.ACTION_UP) {
allpoints.add(point);
} else if (event.getAction() == MotionEvent.ACTION_MOVE) {
allpoints.add(point);
MypiantView.this.postInvalidate();// 重新繪製
}
return true;// 表示不再執行了
}
});
}
// 重寫andraw方法
@Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(Color.RED);
if (allpoints.size() > 1) {
// 用集合來裝點,遍歷每個點
Iterator<Point> iterator = allpoints.iterator();
Point firstPoint = null;// 開始點
Point lastpPoint = null;// 結束點
while (iterator.hasNext()) {
if (firstPoint == null) {// 找到開始點
firstPoint = (Point) iterator.next();
} else {
if (lastpPoint != null) {
firstPoint = lastpPoint;
}
lastpPoint = (Point) iterator.next();
canvas.drawLine(firstPoint.x, firstPoint.y, lastpPoint.x, lastpPoint.y, paint);// 畫線
}
}
}
super.onDraw(canvas);
}
}
效果如下
這只是實現了普通的畫布 刮刮卡還是沒有看懂,以後看懂了再來補充 挖坑+1~~~
相關文章
- Flutter PIP(畫中畫)效果的實現Flutter
- Fiori裡花瓣的動畫效果實現原理動畫
- Flutter動畫實現粒子漂浮效果Flutter動畫
- 前端動畫效果實現的簡單比較前端動畫
- MaterialDesign系列文章(十二)ConstraintLayout實現的動畫效果AI動畫
- 加入購物車動畫效果實現動畫
- Flutter 類抽屜效果動畫實現。Flutter動畫
- Web 頁面如何實現動畫效果Web動畫
- ul>li*3 實現翻書動畫效果動畫
- css3實現動畫閃爍效果CSSS3動畫
- Flutter實戰動畫番外篇-翻頁效果實現Flutter動畫
- 畫布就是一切(二) — 實現元素拖拉拽
- CSS3實現王者匹配時的粒子動畫效果CSSS3動畫
- js利用H5的requestAnimationFrame()API實現動畫效果JSH5requestAnimationFrameAPI動畫
- 用Provider實現商品加入購物車的動畫效果IDE動畫
- 萬彩動畫大師教程 | 如何實現物件的閃動的動畫效果動畫物件
- 使用css3實現小車行駛的動畫效果CSSS3動畫
- 簡單的低開編輯器(三):實現元件畫布內拖拽元件
- 動畫-CAShapeLayer實現QQ訊息紅點拖拽效果動畫
- Flutter實戰之畫布使用篇Flutter
- canvas簡單的畫布動畫 - KaiqisanCanvas動畫AI
- Canvas 實現畫中畫動畫效果–網易娛樂年度盤點H5動畫解密Canvas動畫H5解密
- Canvas 實現畫中畫動畫效果--網易娛樂年度盤點H5動畫解密Canvas動畫H5解密
- Flutter入門篇(三)— 如何實現登入動畫效果Flutter動畫
- 教你如何用WPF實現文字粒子閃爍動畫效果動畫
- 短視訊系統,Android 使用MotionLayout實現動畫效果Android動畫
- 動畫合成小技巧!CSS 實現動感的倒數計時效果動畫CSS
- 畫布就是一切(一)— 畫布程式設計的基本模式程式設計模式
- 原生JS實現拋物線動畫以及動態模糊效果JS動畫
- jquery.gridrotator實現響應式圖片展示畫廊效果jQuery
- 實現聚焦效果
- canvas實現 漂亮的下雨效果Canvas
- Elasticsearch實現Mysql的Like效果ElasticsearchMySql
- CSS3動畫實現3D倒數計時效果CSSS3動畫3D
- 【動畫消消樂|CSS】083.純CSS實現卡通齒輪效果動畫CSS
- CSS3中用background-image實現粒子動畫效果CSSS3動畫
- 瞭解canvas畫布Canvas
- 【Android初級】如何實現一個有動畫效果的自定義下拉選單Android動畫
- css 實現打分效果CSS