1.收獲
今天的主要任務就是接著昨天沒有完成的畫板，昨天我們實現了旁邊的進度條，今天我們需要將這個進度條改為可以改變畫筆的大小的工具，我們在旁邊設置了顏色，通過按鈕來實現畫筆顏色的切換，我們還在下方添加了撤銷，清空，橡皮擦，上一步，保存的功能，使得這個畫板更加與真正的畫板接近。在這些功能中，并沒有什么好多的新知識，都是以前學過的東西，只不過有些忘記了，通過這個項目我們有復習了以前學過的東西。這個 項目是我們第二次寫的比較大（對于現在的我來說）的項目，并且這個還是比較實用的，因為在我們生活在還可以直接有的，不管怎樣這一切為了什么自己是最清楚的。
2.技術
（1）界面布局以及操作的實現
（2）畫板的操作
（3）畫畫結果的操作
3.技術的應用和實踐
（1）界面布局以及操作的實現
首先我們要先確定這個界面需要哪些空間或者容器，而我們需要滑動條，畫板，調色區，操作區
image.png
而且在滑動條，畫板，調色區這三個需要用相對布局來約束
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/operration"
app:layout_constraintTop_toTopOf="parent"
>
<!--滑動條-->
<!--畫板-->
<!--選顏色-->
</androidx.constraintlayout.widget.ConstraintLayout>
1.滑動條的布局
首先我們想到讓滑動條位于屏幕的左邊，并且要隨著屏幕的轉動而轉動。所以我們需要對滑動條進行操作，并且滑動條，畫板，調色區這三者在同一個布局中（在xml文件中進行操作）
<!--滑動條-->
<swu.xcf.drawbord.Slider
android:id="@+id/slider"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
app:layout_constraintLeft_toLeftOf="parent"
/>
效果：
image.png
2.畫板的布局
在布局畫板之前我們想到了我們需要他兩邊的控件的位置，所以我們先對調色區域進行布局并且要隨著屏幕的轉動而轉動。并且我們需要對他進行添加id以方便在后面去尋找它，來畫畫
<!--畫板-->
<swu.xcf.drawbord.drawboardview
android:id="@+id/board"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintLeft_toRightOf="@+id/slider"
app:layout_constraintRight_toLeftOf="@+id/color"
/>
image.png
3.調色區域的布局
我們想到讓滑動條位于屏幕的右邊，并且要隨著屏幕的轉動而轉動。由于我們需要對他進行操作，搜易我們給每一個的調色區域添加了一個點擊事件 android:onClick="choicecolor"，我們要在mainActivity中去實現它
<!--選顏色-->
<LinearLayout
android:id="@+id/color"
android:layout_width="30dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintRight_toRightOf="parent"
android:gravity="center">
<Button
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#0000ff"
android:onClick="choicecolor"/>
<Button
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#00ff00"
android:onClick="choicecolor"/>
<Button
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#ff0000"
android:onClick="choicecolor"/>
<Button
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="@color/colorPrimary"
android:onClick="choicecolor"/>
<Button
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#000"
android:onClick="choicecolor"/>
<Button
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#660022"
android:onClick="choicecolor"/>
<Button
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#aaa201"
android:onClick="choicecolor"/>
<Button
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#777777"
android:onClick="choicecolor"/>
</LinearLayout>
android:onClick="choicecolor"方法的實現，由于我們點擊這個按鈕，就需要畫筆改變到這種顏色，所以我們需要去讀取這個區域的顏色，并將畫筆設置為當前顏色
//選擇顏色 獲取按鈕上面的顏色
public void choicecolor(View view) {
//獲取按鈕上面的顏色
Drawable drawable=view.getBackground();
//獲取顏色
drawboardview.setLinecolor (((ColorDrawable) drawable).getColor());
}
效果：
image.png
4.操作的布局
在操作欄我們只需要對他進行一個布局，添加上幾個操作按鈕就可以了，按鈕的布局為線性布局，給每一個按鈕添加一個點擊事件，并在我們要在mainActivity中去實現它
<LinearLayout
android:id="@+id/operration"
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#ff0000"
android:gravity="center">
<Button
android:layout_width="60dp"
android:layout_height="match_parent"
android:text="撤銷"
android:onClick="goBack"/>
<Button
android:layout_width="60dp"
android:layout_height="match_parent"
android:text="清空"
android:onClick="clear"/>
<Button
android:layout_width="60dp"
android:layout_height="match_parent"
android:text="橡皮擦"
android:onClick="eraser"/>
<Button
android:layout_width="60dp"
android:layout_height="match_parent"
android:text="上一步"
android:onClick="lastStep"/>
<Button
android:layout_width="60dp"
android:layout_height="match_parent"
android:text="保存"
android:onClick="save"/>
</LinearLayout>
各部分按鈕的操作實現的函數
//撤銷
public void goBack(View view) {
}
//清空
public void clear(View view) {
}
//橡皮擦
public void eraser(View view) {
}
//保存
public void save(View view) {
}
//上一步 還原
public void lastStep(View view) {
}
我們的布局和一些操作就是這樣，接下來的就需要我們去實現對畫板的一些操作
（2）畫板的操作
我們需要對畫板進行一些操作
1.我們對畫板屬性的定義
a.畫板背景
//設置畫板背景
setBackgroundColor(Color.WHITE);
b.畫筆屬性（顏色，粗細）
我們默認的畫筆顏色是黑色，粗細為5
private int Linecolor= Color.BLACK;
private int Linesize=5;
在這里我們需要將畫筆大小域前面的滑動條相關聯，我們按照畫筆的最大為
private int max=100;//設置最大值
按照這個比例和那個滑動條長度的比例進行搭配
我們要一個監聽者來監聽滑動條的改變
//滑動改變的監聽者
private OnSliderChangeListener onSliderChangeListener;
//得到改變后的大小
private void callback(){
if(onSliderChangeListener!=null){
if(getHeight()>getWidth()){
progress=position/getHeight();
}else{
progress=position/getWidth();
}
onSliderChangeListener.progresschange(progress*max);
}
}
然后我們對滑動條添加的事件，當監聽者監聽到有事件發生時去得到改變后的值
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//小圓點放大
thumScale=2;
if(getHeight()<getWidth()){
//橫向時
position=event.getX();
}else{
//縱向時
position=event.getY();
}
callback();
break;
case MotionEvent.ACTION_MOVE:
//獲取觸摸點的值 X Y
if(getHeight()<getWidth()){
//橫向時
position=event.getX();
if(position<0){
position=0;
}else if(position>getWidth()){
position=getWidth();
}
}else{
//縱向時
position=event.getY();
if(position<0){
position=0;
}else if(position>getHeight()){
position=getHeight();
}
}
callback();
break;
case MotionEvent.ACTION_UP:
thumScale=4;
break;
}
if(style==SLIDER){
invalidate();//重新繪制
}
return true;
}
這時我們需要重新設置改變后的值
//獲取畫板視圖對象
drawboardview=findViewById(R.id.board);
slider.setProgress(drawboardview.getLinesize());
slider.setOnSliderChangeListener(new Slider.OnSliderChangeListener() {
@Override
public void progresschange(float progress) {
//滑動條的進度值設置為線條的寬度
drawboardview.setLinesize((int) progress);
}
});
在畫板里面我們設置了兩個數組，這兩個數組是用來存放我們的畫畫的結果，一便于對于一些對畫畫結果的操作
private ArrayList<Graph> graphs;//操作數組
private ArrayList<Graph> orginalgraphs;//原始數組
添加事件，在我們畫的過程中我們將我們畫的結果存入這兩個數組中
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//創建當前這條線對應的Paint和path
Paint mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Linecolor);
mPaint.setStrokeWidth(Linesize);
mPaint.setStyle(Paint.Style.STROKE);
mPath=new Path();
//數組圖形的起點
mPath.moveTo(event.getX(),event.getY());
//保存當前圖形的詳細信息
Graph temp=new Graph(mPaint,mPath);
graphs.add(temp);
orginalgraphs.add(temp);
break;
case MotionEvent.ACTION_MOVE:
//鏈接從path的終點到當前觸摸點的起點
mPath.lineTo(event.getX(),event.getY());
break;
case MotionEvent.ACTION_UP:
break;
}
invalidate();
return true;
}
（3）畫畫結果的操作
我們畫完后總有一些不如意，所以我們添加了一些操作
1.撤銷
//撤銷
public void goBack(View view) {
drawboardview.removeLast();
}
2.清空
//清空
public void clear(View view) {
drawboardview.removeall();
}
3.橡皮擦
橡皮擦的原理就是我們通過設置畫筆的顏色域畫板顏色一樣
//橡皮擦
public void eraser(View view) {
//獲取畫板的drawble
ColorDrawable drawable= (ColorDrawable) drawboardview.getBackground();
//設置線條顏色與背景色相同
if(drawable!=null){
drawboardview.setLinecolor(drawable.getColor());
}
}
4.上一步
//上一步 還原
public void lastStep(View view) {
drawboardview.returnToLastStep();
}
上一步，清空，清空的具體操作我們是在畫板類里面完成的
//刪除最后一個圖形
public void removeLast(){
if(graphs.size()>0){
graphs.remove(graphs.size()-1);
postInvalidate();
}
}
//刪除所有 清空
public void removeall(){
graphs.clear();
postInvalidate();
}
//還原上一步
public void returnToLastStep(){
//判斷緩存中有
if(graphs.size()<orginalgraphs.size()){
//獲取上一步的索引值
int index=graphs.size()-1+1;
//從緩存中獲取index 添加到操作數組中
graphs.add(orginalgraphs.get(index));
}
//刷新
postInvalidate();
}
