2018-03-19 圖片處理(六)----自定義畫板

筆記如下



如圖:
Video_2018-03-19_104911.gif


  • 實(shí)現(xiàn)步驟:
    首先是布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:orientation="vertical"
    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"
    tools:context="com.chen.panel.MainActivity">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <View
            android:onClick=""
            android:id="@+id/color_red"
            android:background="#ff0000"
            android:layout_width="35dp"
            android:layout_height="35dp"/>



        <View
            android:id="@+id/color_green"
            android:background="#00ff00"
            android:layout_width="35dp"
            android:layout_height="35dp"/>



        <View
            android:id="@+id/color_blue"
            android:background="#0000ff"
            android:layout_width="35dp"
            android:layout_height="35dp"/>



        <View
            android:id="@+id/color_yellow"
            android:background="#ffff00"
            android:layout_width="35dp"
            android:layout_height="35dp"/>



        <View
            android:id="@+id/color_pink"
            android:background="#ff99ff"
            android:layout_width="35dp"
            android:layout_height="35dp"/>

    </LinearLayout>
    
    <!--畫筆 -->
    <SeekBar
        android:id="@+id/skb_stroke"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    <ImageView
        android:id="@+id/iv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        />

    <Button
        android:onClick="save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="保存圖片"
        />

</LinearLayout>

調(diào)節(jié)顏色的方法

    protected void onCreate(Bundle savedInstanceState) {

      .............

        color_red.setOnClickListener(this);
        color_green.setOnClickListener(this);
        color_blue.setOnClickListener(this);
        color_pink.setOnClickListener(this);
        color_yellow.setOnClickListener(this);

      ...........


}

    //點(diǎn)擊換顏色的點(diǎn)擊事件
    @Override
    public void onClick(View v) {

        switch(v.getId()){
            //更改畫筆的顏色
            case R.id.color_red:
                paint.setColor(Color.RED);
                break;
            case R.id.color_yellow:
                paint.setColor(Color.YELLOW);
                break;
            case R.id.color_green:
                paint.setColor(Color.GREEN);
                break;
            case R.id.color_blue:
                paint.setColor(Color.BLUE);
                break;
            case R.id.color_pink:
                paint.setColor(0xffff99ff);
                break;
            default:
                break;

        }

    }

ImageView的觸摸事件


    float startX = 0;
    float startY = 0;
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        //觸摸ImageView的回調(diào)
        //觸摸的時(shí)候繪制我們的圖像,并且顯示
        /*
            Touch時(shí)有三種情況:event.getAction()
            1.手指按下
            2.手指移動(dòng)
            3.手指抬起
         */


        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN://1次
                //1.手指按下
                startX = event.getX();//觸摸的x坐標(biāo)
                startY = event.getY();//觸摸的y坐標(biāo)

//                startX = event.getRawX();
//                startY = event.getRawY();


                break;
            case MotionEvent.ACTION_MOVE://0-多次
                //2.手指移動(dòng)
                //繪制圖像,并顯示到ImageView上
                float stopX = event.getX();
                float stopY = event.getY();
//                float stopX = event.getRawX();
//                float stopY = event.getRawY();

                System.out.println("x :" + stopX + "  y : " + stopY);

                canvas.drawLine(startX,startY,stopX,stopY,paint);

                iv.setImageBitmap(bitmap);

                startX = stopX;
                startY = stopY;

                break;
            case MotionEvent.ACTION_UP://1次
                //3.手指抬起


                break;
            default:
                break;
        }



        return true;

    }

seeBar的調(diào)節(jié)畫筆大小的stop事件

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        //改變畫筆的粗細(xì)
        int progress = seekBar.getProgress();
        //paint.setStrokeWidth(progress);
        paint.setStrokeWidth(10 * progress /100f + 0.5f);

    }



完整源碼:

package com.chen.panel;

import android.Manifest;
import android.content.pm.PackageManager;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.os.Environment;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.Toast;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

public class MainActivity extends AppCompatActivity implements View.OnClickListener, SeekBar.OnSeekBarChangeListener, View.OnTouchListener {

    private View color_red;
    private View color_green;
    private View color_yellow;
    private View color_blue;
    private View color_pink;

    private SeekBar skb_stroke;
    private ImageView iv;

    private Bitmap bitmap;
    private Canvas canvas;
    private Paint paint;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        requestPermission();

        color_red = findViewById(R.id.color_red);
        color_green = findViewById(R.id.color_green);
        color_yellow = findViewById(R.id.color_yellow);
        color_blue = findViewById(R.id.color_blue);
        color_pink = findViewById(R.id.color_pink);

        skb_stroke = (SeekBar) findViewById(R.id.skb_stroke);
        iv = (ImageView) findViewById(R.id.iv);

        color_red.setOnClickListener(this);
        color_green.setOnClickListener(this);
        color_blue.setOnClickListener(this);
        color_pink.setOnClickListener(this);
        color_yellow.setOnClickListener(this);
        skb_stroke.setOnSeekBarChangeListener(this);

        iv.setOnTouchListener(this);


        DisplayMetrics metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);

        float density = metrics.density;
        System.out.println(density);

        //先準(zhǔn)備我們的畫板
        bitmap = Bitmap.createBitmap((int) (200*density), (int) (200*density), Bitmap.Config.ARGB_8888);
        //準(zhǔn)備畫紙
        canvas = new Canvas(bitmap);
        //畫布默認(rèn)是黑底的,所以要一開(kāi)始畫成白底的
        canvas.drawColor(Color.WHITE);
        //準(zhǔn)備畫筆
        paint = new Paint();


    }

    private void requestPermission(){
        if (ContextCompat.checkSelfPermission(this,
                Manifest.permission.READ_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED){ //表示未授權(quán)時(shí)
            //進(jìn)行授權(quán)
            ActivityCompat.requestPermissions(this,new String[]{Manifest.permission.READ_EXTERNAL_STORAGE},1);
        }else{
            //調(diào)用打電話的方法
            Toast.makeText(this, "權(quán)限已經(jīng)申請(qǐng)了.", Toast.LENGTH_SHORT).show();
        }
    }

    //保存圖片
    public void save(View view){

        //File file = new File(Environment.getDataDirectory()+"/data/com.chen.panel/"+System.currentTimeMillis()+".jpg");

        File file = new File(Environment.getExternalStorageDirectory()+"/"+System.currentTimeMillis()+".jpg");

        FileOutputStream out = null;
        try {

            out = new FileOutputStream(file);
            //壓縮到流中
            bitmap.compress(Bitmap.CompressFormat.JPEG,100,out);

        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            if (out != null){
                try {
                    out.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                out = null;
            }

        }

    }

    //點(diǎn)擊換顏色的點(diǎn)擊事件
    @Override
    public void onClick(View v) {

        switch(v.getId()){
            //更改畫筆的顏色
            case R.id.color_red:
                paint.setColor(Color.RED);
                break;
            case R.id.color_yellow:
                paint.setColor(Color.YELLOW);
                break;
            case R.id.color_green:
                paint.setColor(Color.GREEN);
                break;
            case R.id.color_blue:
                paint.setColor(Color.BLUE);
                break;
            case R.id.color_pink:
                paint.setColor(0xffff99ff);
                break;
            default:
                break;

        }

    }

    //seebar實(shí)現(xiàn)
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        //改變畫筆的粗細(xì)
        int progress = seekBar.getProgress();
        //paint.setStrokeWidth(progress);
        paint.setStrokeWidth(10 * progress /100f + 0.5f);

    }


    float startX = 0;
    float startY = 0;
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        //觸摸ImageView的回調(diào)
        //觸摸的時(shí)候繪制我們的圖像,并且顯示
        /*
            Touch時(shí)有三種情況:event.getAction()
            1.手指按下
            2.手指移動(dòng)
            3.手指抬起
         */


        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN://1次
                //1.手指按下
                startX = event.getX();//觸摸的x坐標(biāo)
                startY = event.getY();//觸摸的y坐標(biāo)

//                startX = event.getRawX();
//                startY = event.getRawY();


                break;
            case MotionEvent.ACTION_MOVE://0-多次
                //2.手指移動(dòng)
                //繪制圖像,并顯示到ImageView上
                float stopX = event.getX();
                float stopY = event.getY();
//                float stopX = event.getRawX();
//                float stopY = event.getRawY();

                System.out.println("x :" + stopX + "  y : " + stopY);

                canvas.drawLine(startX,startY,stopX,stopY,paint);

                iv.setImageBitmap(bitmap);

                startX = stopX;
                startY = stopY;

                break;
            case MotionEvent.ACTION_UP://1次
                //3.手指抬起


                break;
            default:
                break;
        }



        return true;

    }


}


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末迷殿,一起剝皮案震驚了整個(gè)濱河市轧房,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌驮履,老刑警劉巖让虐,帶你破解...
    沈念sama閱讀 217,907評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盅弛,死亡現(xiàn)場(chǎng)離奇詭異驻襟,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)捍岳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門富寿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人锣夹,你說(shuō)我怎么就攤上這事页徐。” “怎么了银萍?”我有些...
    開(kāi)封第一講書人閱讀 164,298評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵变勇,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng)搀绣,這世上最難降的妖魔是什么飞袋? 我笑而不...
    開(kāi)封第一講書人閱讀 58,586評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮链患,結(jié)果婚禮上巧鸭,老公的妹妹穿的比我還像新娘。我一直安慰自己麻捻,他們只是感情好纲仍,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,633評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著贸毕,像睡著了一般郑叠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上崖咨,一...
    開(kāi)封第一講書人閱讀 51,488評(píng)論 1 302
  • 那天锻拘,我揣著相機(jī)與錄音油吭,去河邊找鬼击蹲。 笑死,一個(gè)胖子當(dāng)著我的面吹牛婉宰,可吹牛的內(nèi)容都是我干的歌豺。 我是一名探鬼主播,決...
    沈念sama閱讀 40,275評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼心包,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼类咧!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起蟹腾,我...
    開(kāi)封第一講書人閱讀 39,176評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤痕惋,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后娃殖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體值戳,經(jīng)...
    沈念sama閱讀 45,619評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,819評(píng)論 3 336
  • 正文 我和宋清朗相戀三年炉爆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了堕虹。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,932評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡芬首,死狀恐怖赴捞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情郁稍,我是刑警寧澤赦政,帶...
    沈念sama閱讀 35,655評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站耀怜,受9級(jí)特大地震影響恢着,放射性物質(zhì)發(fā)生泄漏掸屡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,265評(píng)論 3 329
  • 文/蒙蒙 一然评、第九天 我趴在偏房一處隱蔽的房頂上張望仅财。 院中可真熱鬧,春花似錦碗淌、人聲如沸盏求。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,871評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)碎罚。三九已至,卻和暖如春纳像,著一層夾襖步出監(jiān)牢的瞬間荆烈,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,994評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工竟趾, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留憔购,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,095評(píng)論 3 370
  • 正文 我出身青樓岔帽,卻偏偏與公主長(zhǎng)得像玫鸟,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子犀勒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,884評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,129評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)屎飘、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,103評(píng)論 4 62
  • 余生很長(zhǎng) 前路漫漫 我要和你齊步 并肩作戰(zhàn) 時(shí)光很慢 我們一定要堅(jiān)持不畏風(fēng)浪 歲月還長(zhǎng) 人生的路上我陪你流浪 接受...
    夏夜之空閱讀 248評(píng)論 2 2
  • 感覺(jué)好累哦
    暮色言落閱讀 127評(píng)論 0 0
  • 現(xiàn)在特別流行一個(gè)詞“斜杠青年”」酉簦“斜杠青年”來(lái)源于英文“Slash”押桃,是指一些人不再滿足“專一職業(yè)”的生活方式,而...
    紅妹愛(ài)折騰閱讀 958評(píng)論 1 1