實現畫布的效果
刮刮卡效果的原理
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~~~
相關文章
- canvas畫布效果程式碼Canvas
- Flutter PIP(畫中畫)效果的實現Flutter
- 自定義View:畫布實現自定義View(折線圖的實現)View
- 基於canvas畫布的兩個炫酷效果展示Canvas
- 畫布就是一切(二) — 實現元素拖拉拽
- Flutter實戰之畫布使用篇Flutter
- canvas實現的簡單畫板效果程式碼例項Canvas
- 簡單的低開編輯器(三):實現元件畫布內拖拽元件
- 畫布就是一切(一)— 畫布程式設計的基本模式程式設計模式
- viewpager實現畫廊(一屏多個Fragment)效果ViewpagerFragment
- 你的商業模式畫布畫好了沒?模式
- HTML5的畫布:PathsHTML
- 使用 RecyclerView 實現 Gallery 畫廊效果,並控制 Item 停留位置View
- 純CSS3畫出小黃人並實現動畫效果CSSS3動畫
- 瞭解canvas畫布Canvas
- 商業模式畫布模式
- canvas簡單的畫布動畫 - KaiqisanCanvas動畫AI
- Android照片牆加強版,使用ViewPager實現畫廊效果AndroidViewpager
- Canvas 實現畫中畫動畫效果--網易娛樂年度盤點H5動畫解密Canvas動畫H5解密
- Canvas 實現畫中畫動畫效果–網易娛樂年度盤點H5動畫解密Canvas動畫H5解密
- HTML5 Canvas(畫布)實戰程式設計初級篇:基本介紹和基礎畫布元素HTMLCanvas程式設計
- Tkinter (03) 畫布部件 CanvasCanvas
- 微信小程式-畫布元件微信小程式元件
- html5畫布canvasHTMLCanvas
- HTML5畫布概述HTML
- HTML5畫布: clearRect()HTML
- jquery.gridrotator實現響應式圖片展示畫廊效果jQuery
- 如何抓取canvas畫布中的圖片Canvas
- SVG viewport視口和畫布SVGView
- 元件註冊與畫布渲染元件
- 研讀《商業模式畫布》模式
- HTML5畫布-小球碰撞HTML
- 實現聚焦效果
- 基於圖遍歷的Flink任務畫布模式下零程式碼開發實現方案模式
- 五子棋畫布-我的理解
- 10個出色的HTML5畫布示例HTML
- Elasticsearch實現Mysql的Like效果ElasticsearchMySql
- IOS抽屜效果的實現iOS