畫板——畫筆顏色、基本功能
（代碼中有基礎(chǔ)解釋乐疆，有疑問歡迎來找我探討；浴）
畫板
xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!--
constraintLayout
需要知道：x,y,寬，高-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/operation"
app:layout_constraintTop_toTopOf="parent"
android:orientation="horizontal">
<!--<SeekBar-->
<!--android:id="@+id/slider"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="50dp"-->
<!--android:background="#666"-->
<!--android:progressTint="#000"-->
<!--android:progressBackgroundTint="#f00"-->
<!--android:thumbTint="#fff"-->
<!--android:max="100"/>-->
<!--
滑動(dòng)條
自定義Slider
1.進(jìn)度條
2.滑動(dòng)條
3.橫豎切換
創(chuàng)建Slider extends View
-->
<swu.xujiangtao.day_11drawtop.Slider
android:id="@+id/slider"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
app:layout_constraintLeft_toLeftOf="parent"/>
<!--畫板-->
<swu.xujiangtao.day_11drawtop.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"
android:background="@drawable/ic_launcher_foreground"/>
<LinearLayout
android:id="@+id/color"
android:layout_width="60dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginRight="20dp"
app:layout_constraintRight_toRightOf="parent"
android:gravity="center">
<Button
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@color/colorPrimary"
android:onClick="choiceColor"/>
<Button
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#000"
android:onClick="choiceColor"/>
<Button
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@color/colorAccent"
android:onClick="choiceColor"/>
<Button
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#ff5"
android:onClick="choiceColor"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:id="@+id/operation"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
android:background="@color/colorAccent"
android:gravity="center">
<Button
android:layout_width="80dp"
android:layout_height="match_parent"
android:text="撤銷"
android:onClick="goBack"
/>
<Button
android:layout_width="80dp"
android:layout_height="match_parent"
android:text="清空"
android:onClick="clear"/>
<Button
android:layout_width="80dp"
android:layout_height="match_parent"
android:text="橡皮擦"
android:onClick="eraser"/>
<Button
android:layout_width="80dp"
android:layout_height="match_parent"
android:text="上一步"
android:onClick="lastStep"/>
<Button
android:layout_width="80dp"
android:layout_height="match_parent"
android:text="保存"
android:onClick="save"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity
public class MainActivity extends AppCompatActivity {
private DrawBoardView boardView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//獲取畫板視圖對(duì)象
boardView=findViewById(R.id.Board);
//獲取滑動(dòng)條視圖對(duì)象
final Slider slider = findViewById(R.id.slider);
// new Timer().schedule(new TimerTask() {
// @Override
// public void run() {
// slider.setProgress(
// (float) (slider.getProgress()+0.01));
// }
// },0,100);
slider.setMax(30);
slider.setStyle(Slider.SLIDER);
slider.setOnSliderChangeListener(new Slider.OnSliderChangeListener() {
@Override
public void progressChanged(float progress) {
}
});
slider.setProgress(boardView.getLineSize());
}
@Override
protected void onResume() {
super.onResume();
//設(shè)置橫豎屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
}
void text(){
/*SeekBar slider=findViewById(R.id.slider);
//關(guān)鍵幀動(dòng)畫
//補(bǔ)間動(dòng)畫：旋轉(zhuǎn) 平移 縮放 漸變
//屬性動(dòng)畫：ObjectAnimator
//ValueAnimator 在給定值區(qū)間動(dòng)畫
//ViewPropertyAnimator animator().動(dòng)畫 快速動(dòng)畫
//slider.animate().rotation(90);
//監(jiān)聽滑動(dòng)條的滑動(dòng)事件
slider.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
//進(jìn)度值改變
//System.out.println("change");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
//監(jiān)聽已經(jīng)開始拖拽
//System.out.println("start");
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
//停止拖拽 手放開
//System.out.println("stop");
}
});
*/
}
//選顏色
public void choiceColor(View view) {
//獲取按鈕上的背景顏色
ColorDrawable drawable = (ColorDrawable)view.getBackground();
//獲取顏色
boardView.setLineColor(drawable.getColor());
}
//撤銷
public void goBack(View view) {
boardView.removeLast();
}
//清空
public void clear(View view) {
boardView.removeAll();
}
//橡皮擦
public void eraser(View view) {
ColorDrawable drawable = (ColorDrawable)
boardView.getBackground();
if (boardView!=null) {
boardView.setLineColor(drawable.getColor());
}
}
//保存
public void save(View view) {
}
//還原
public void lastStep(View view) {
boardView.returnTolastStep();
}
}
Slider
public class Slider extends View {
private int lineSize = 6; //線條的粗細(xì)
private int lineColor = Color.BLACK;//默認(rèn)線條顏色
private Paint linePaint;
private Paint circlePaint; //小圓點(diǎn)的畫筆
private int thumbColor = Color.MAGENTA; //小圓點(diǎn)的顏色
private int cx; //中心點(diǎn)x
private int cy; //中心點(diǎn)y
private int radius; //小圓點(diǎn)半徑
private int thumbScale = 4; //小圓點(diǎn)縮放尺寸基數(shù)
private float position; //記錄觸摸點(diǎn)的坐標(biāo)
private Paint progressPaint; //進(jìn)度條進(jìn)度的畫筆
private int progressColor = Color.MAGENTA;//顏色
public static int PROGERSS=0;//進(jìn)度條
public static int SLIDER=1;//滑動(dòng)條
private int style=PROGERSS;//默認(rèn)樣式
public int max=100;//設(shè)置最大值
public float progress;//進(jìn)度值
//滑動(dòng)改變
private OnSliderChangeListener onSliderChangeListener;
public Slider(Context context) {
super(context);
}
public Slider(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init(){
//背景線
linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
linePaint.setColor(lineColor);
linePaint.setStrokeWidth(lineSize);
//小圓點(diǎn)
circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setColor(thumbColor);
circlePaint.setStyle(Paint.Style.FILL);
//進(jìn)圖條
progressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
progressPaint.setColor(progressColor);
progressPaint.setStrokeWidth(lineSize);
}
@Override
protected void onDraw(Canvas canvas) {
if (getWidth() > getHeight()){
//橫著
//畫背景條
canvas.drawLine(0,
getHeight()/2,
getWidth(),
getHeight()/2,
linePaint);
if (position > 0) {
//畫進(jìn)度條
canvas.drawLine(0,
getHeight() / 2,
position,
getHeight() / 2,
progressPaint);
}
radius = getHeight()/thumbScale;
cy = getHeight()/2;
//確定cx的值
if (position < radius){
cx = radius;
}else if (position > getWidth()-radius){
cx = getWidth()-radius;
}else{
cx = (int) position;
}
}else{
//豎著
canvas.drawLine(getWidth()/2,
0,
getWidth()/2,
getHeight(),
linePaint);
if (position > 0){
canvas.drawLine(getWidth()/2,
0,
getWidth()/2,
position,
progressPaint);
}
radius = getWidth()/thumbScale;
cx = getWidth()/2;
//確定中心點(diǎn)cy的值
if (position < radius){
cy = radius;
}else if(position > getHeight()-radius){
cy = getHeight()-radius;
}else{
cy = (int) position;
}
}
//畫小圓點(diǎn)
if (style==SLIDER) {
canvas.drawCircle(cx, cy, radius, circlePaint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//小圓點(diǎn)放大
thumbScale = 2;
if (getWidth() > getHeight()){
//橫向時(shí) y不變 x改變
position = event.getX();
}else{
//豎著時(shí) x不變 y改變
position = event.getY();
}
callback();
break;
case MotionEvent.ACTION_MOVE:
//獲取當(dāng)前觸摸點(diǎn)的值 X Y
if (getWidth() > getHeight()){
//橫向時(shí) y不變 x改變
position = event.getX();
if (position <0){
position = 0;
} else if (position > getWidth()){
position = getWidth();
}
}else{
//豎著時(shí) x不變 y改變
position = event.getY();
if (position <0){
position = 0;
} else if (position > getHeight()){
position = getHeight();
}
}
callback();
break;
case MotionEvent.ACTION_UP:
thumbScale = 4;
break;
}
if (style==SLIDER) {
invalidate();
}
return true;
}
private void callback(){
if (onSliderChangeListener !=null){
if (getWidth()>getHeight()){
progress=position/getWidth();
}else {
progress=position/getHeight();
}
onSliderChangeListener.progressChanged(progress*max);
}
}
public int getStyle() {
return style;
}
public void setStyle(int style) {
this.style = style;
}
public float getProgress() {
return progress;
}
public void setPrpgress(int progress){
//計(jì)算比例
this.progress= (float) (progress*1.0/max);
setProgress(this.progress);
}
public void setProgress(float progress) {
this.progress = progress;
if (progress<1.001) {
//將進(jìn)度值轉(zhuǎn)化為控件中的尺寸位置
if (getWidth() > getHeight()) {
position = progress * getWidth();
} else {
position = progress * getHeight();
}
}
invalidate();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
//將進(jìn)度值轉(zhuǎn)化為控件中的尺寸位置
if (getWidth() > getHeight()) {
position = progress * getWidth();
} else {
position = progress * getHeight();
}
}
public int getMax() {
return max;
}
public void setMax(int max) {
this.max = max;
}
public interface OnSliderChangeListener{
void progressChanged(float progress);
}
public void setOnSliderChangeListener(OnSliderChangeListener onSliderChangeListener) {
this.onSliderChangeListener = onSliderChangeListener;
}
}
DrawBoardView
public class DrawBoardView extends View {
private ArrayList<Graph> graphs;//操作的
private ArrayList<Graph> orginaGraphs;//原始的
private int lineColor= Color.BLACK;
private int lineSize=15;
Path mPath;
public DrawBoardView(Context context) {
super(context);
init();
}
public DrawBoardView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init(){
//初始化數(shù)組
graphs=new ArrayList<>();
orginaGraphs=new ArrayList<>();
setBackgroundColor(Color.WHITE);
}
@Override
protected void onDraw(Canvas canvas) {
//遍歷數(shù)組
Iterator<Graph> iterator=graphs.iterator();
while (iterator.hasNext()){
//從集合中獲取一個(gè)圖形對(duì)象
Graph line=iterator.next();
//繪制圖形
canvas.drawPath(line.path,line.paint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//創(chuàng)建當(dāng)前這條線的Paint挤土，Path
Paint mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(lineColor);
mPaint.setStrokeWidth(lineSize);
mPaint.setStyle(Paint.Style.STROKE);
mPath=new Path();
//設(shè)置起點(diǎn)
mPath.moveTo(event.getX(),event.getY());
//保存信息
Graph temp=new Graph(mPaint,mPath);
graphs.add(temp);
orginaGraphs.add(temp);
break;
case MotionEvent.ACTION_MOVE:
//連接Path終點(diǎn)到當(dāng)前觸摸點(diǎn)的線
mPath.lineTo(event.getX(),event.getY());
break;
case MotionEvent.ACTION_UP:
invalidate();
break;
}
return true;
}
//創(chuàng)建私有類來管理圖形的畫板和路徑
private class Graph{
Paint paint;
Path path;
public Graph(Paint paint,Path path){
this.paint=paint;
this.path=path;
}
}
public int getLineSize() {
return lineSize;
}
public void setLineSize(int lineSize) {
this.lineSize = lineSize;
}
public int getLineColor() {
return lineColor;
}
public void setLineColor(int lineColor) {
this.lineColor = lineColor;
}
//撤銷
public void removeLast(){
if (graphs.size()>0){
graphs.remove(graphs.size()-1);
invalidate();
}
}
//清空
public void removeAll(){
graphs.clear();
invalidate();
}
//還原上一步
public void returnTolastStep(){
//判斷緩存中是否有
if (graphs.size()<orginaGraphs.size()){
//獲取上一步的索引值
int index=graphs.size()-1+1;
//從緩存中獲取index 添加到操作數(shù)組中
graphs.add(orginaGraphs.get(index));
//刷新
invalidate();
}
}
}
最后我用此畫板項(xiàng)目制作了一幅杰作琴庵，不要表揚(yáng)，不要羨慕仰美，其實(shí)你也可以迷殿！
賽梵高
