Android 仿PhotoShop调色板应用 不同区域颜色选择的颜色生成响应

Posted 2020-07-23 brave-sailor

版权声明：本文为博主原创文章，未经博主允许不得转载。

 Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应

 上一篇讲过了主体界面的绘制，这里讲解调色板应用中的另外一个核心: 颜色选择及生成.

ColorPcikerView中不同部分的选择和ColorPickerPanelView中颜色显示是怎样响应的呢？这里当然少不了回调函数:

ColorPickerView:

[java] view plain copy

1. public interface OnColorChangedListener {  
2.     public void onColorChanged(int color);  
3. }  

然后看一下轨迹球的事件处理：

[java] view plain copy

1. @Override  
2. public boolean onTrackballEvent(MotionEvent event) {  
3.   
4.     float x = event.getX();  
5.     float y = event.getY();  
6.   
7.     boolean update = false;//是否需要更新颜色  
8.   
9.   
10.     if(event.getAction() == MotionEvent.ACTION_MOVE){  
11.   
12.         switch(mLastTouchedPanel){  
13.   
14.         case PANEL_SAT_VAL://饱和度&亮度选择区域  
15.   
16.             float sat, val;  
17.   
18.             sat = mSat + x/50f;  
19.             val = mVal - y/50f;  
20.   
21.             if(sat < 0f){  
22.                 sat = 0f;  
23.             }  
24.             else if(sat > 1f){  
25.                 sat = 1f;  
26.             }  
27.   
28.             if(val < 0f){  
29.                 val = 0f;  
30.             }  
31.             else if(val > 1f){  
32.                 val = 1f;  
33.             }  
34.   
35.             mSat = sat;  
36.             mVal = val;  
37.   
38.             update = true;  
39.   
40.             break;  
41.   
42.         case PANEL_HUE://色相选择区域  
43.   
44.             float hue = mHue - y * 10f;  
45.   
46.             if(hue < 0f){  
47.                 hue = 0f;  
48.             }  
49.             else if(hue > 360f){  
50.                 hue = 360f;  
51.             }  
52.   
53.             mHue = hue;  
54.   
55.             update = true;  
56.   
57.             break;  
58.   
59.         case PANEL_ALPHA://透明度选择区域  
60.   
61.             if(!mShowAlphaPanel || mAlphaRect == null){  
62.                 update = false;  
63.             }  
64.             else{  
65.   
66.                 int alpha = (int) (mAlpha - x*10);  
67.   
68.                 if(alpha < 0){  
69.                     alpha = 0;  
70.                 }  
71.                 else if(alpha > 0xff){  
72.                     alpha = 0xff;  
73.                 }  
74.   
75.                 mAlpha = alpha;  
76.   
77.   
78.                 update = true;  
79.             }  
80.   
81.             break;  
82.         }  
83.   
84.   
85.     }  
86.   
87.   
88.     if(update){//如果需要更新，调用对用的回调函数并重新绘制  
89.   
90.         if(mListener != null){//参数需要由HSV格式的float数组转换为ARGB格式的 int 参数  
91.             mListener.onColorChanged(Color.HSVToColor(mAlpha, new float[]{mHue, mSat, mVal}));  
92.         }  
93.   
94.          invalidate();  
95.          return true;  
96.     }  
97.   
98.   
99.     return super.onTrackballEvent(event);  
100. }  

ColorPickerView中关于触摸事件的处理:

[java] view plain copy

1. @Override  
2.     public boolean onTouchEvent(MotionEvent event) {  
3.   
4.         boolean update = false;  
5.   
6.         switch(event.getAction()){  
7.   
8.         case MotionEvent.ACTION_DOWN:  
9.   
10.             mStartTouchPoint = new Point((int)event.getX(), (int)event.getY());  
11.   
12.             update = moveTrackersIfNeeded(event);  
13.   
14.             break;  
15.   
16.         case MotionEvent.ACTION_MOVE:  
17.   
18.             update = moveTrackersIfNeeded(event);  
19.   
20.             break;  
21.   
22.         case MotionEvent.ACTION_UP:  
23.   
24.             mStartTouchPoint = null;  
25.   
26.             update = moveTrackersIfNeeded(event);  
27.   
28.             break;  
29.   
30.         }  
31.   
32.         if(update){  
33.   
34.             if(mListener != null){  
35.                 mListener.onColorChanged(Color.HSVToColor(mAlpha, new float[]{mHue, mSat, mVal}));  
36.             }  
37.   
38.             invalidate();  
39.             return true;  
40.         }  
41.   
42.   
43.         return super.onTouchEvent(event);  
44.     }  
45.     //判断是否触发事件，更新区域颜色  
46.      private boolean moveTrackersIfNeeded(MotionEvent event){  
47.   
48.         if(mStartTouchPoint == null) return false;  
49.   
50.         boolean update = false;  
51.         //获取触摸点X,Y坐标值  
52.         int startX = mStartTouchPoint.x;  
53.         int startY = mStartTouchPoint.y;  
54.   
55.         //判断 X,Y坐标是否在对应的区域内，并做相应的处理   
56.         if(mHueRect.contains(startX, startY)){  
57.             mLastTouchedPanel = PANEL_HUE;  
58.   
59.             mHue = pointToHue(event.getY());  
60.   
61.             update = true;  
62.         }  
63.         else if(mSatValRect.contains(startX, startY)){  
64.   
65.             mLastTouchedPanel = PANEL_SAT_VAL;  
66.   
67.             float[] result = pointToSatVal(event.getX(), event.getY());  
68.   
69.             mSat = result[0];  
70.             mVal = result[1];  
71.   
72.             update = true;  
73.         }  
74.         else if(mAlphaRect != null && mAlphaRect.contains(startX, startY)){  
75.   
76.             mLastTouchedPanel = PANEL_ALPHA;  
77.   
78.             mAlpha = pointToAlpha((int)event.getX());  
79.   
80.             update = true;  
81.         }  
82.   
83.   
84.         return update;  
85.     }  

使用时，让ColorPickerDialog实现ColorPickerView.OnColorChangedListener接口:

并完成对应方法：

[java] view plain copy

1. @Override  
2. public void onColorChanged(int color) {  
3.   
4.     mNewColor.setColor(color);// mNewColor即为右下角实时显示颜色的ColorPickerPanelView  
5.       
6.     if (mHexValueEnabled)  
7.         updateHexValue(color);  
8.   
9.     /* 
10.     if (mListener != null) { 
11.         mListener.onColorChanged(color); 
12.     } 
13.     */  
14.   
15. }  

 

 

[java] view plain copy

1.      private void updateHexValue(int color) {  
2. if (getAlphaSliderVisible()) {  
3.     mHexVal.setText(ColorPickerPreference.convertToARGB(color).toUpperCase(Locale.getDefault()));  
4. } else {  
5.     mHexVal.setText(ColorPickerPreference.convertToRGB(color).toUpperCase(Locale.getDefault()));  
6. }  
7. mHexVal.setTextColor(mHexDefaultTextColor);  

[java] view plain copy

1.      /** 转化为ARGB格式字符串 
2. * For custom purposes. Not used by ColorPickerPreferrence 
3. * @param color 
4. * @author Unknown 
5. */  
6.   public static String convertToARGB(int color) {  
7.       String alpha = Integer.toHexString(Color.alpha(color));  
8.       String red = Integer.toHexString(Color.red(color));  
9.       String green = Integer.toHexString(Color.green(color));  
10.       String blue = Integer.toHexString(Color.blue(color));  
11.   
12.       if (alpha.length() == 1) {  
13.           alpha = "0" + alpha;  
14.       }  
15.   
16.       if (red.length() == 1) {  
17.           red = "0" + red;  
18.       }  
19.   
20.       if (green.length() == 1) {  
21.           green = "0" + green;  
22.       }  
23.   
24.       if (blue.length() == 1) {  
25.           blue = "0" + blue;  
26.       }  
27.   
28.       return "#" + alpha + red + green + blue;  
29.   }  

最后看一下ColorPickerPanelView点击后的颜色设置事件处理:

[java] view plain copy

1.        @Override  
2. public void onClick(View v) {  
3.     if (v.getId() == R.id.new_color_panel) {  
4.         if (mListener != null) {  
5.             mListener.onColorChanged(mNewColor.getColor());  
6.         }  
7.     }  
8.     dismiss();  
9. }  

注意一下，这里的OnColorChangedListener是在ColorPickerDialog中定义的:

[java] view plain copy

1.       private OnColorChangedListener mListener;  
2.   
3. ublic interface OnColorChangedListener {  
4. public void onColorChanged(int color);  

最终的颜色是怎么显示到ColorPickerPreference上呢，其实实现的方法是一样的:

[java] view plain copy

1. implements ColorPickerDialog.OnColorChangedListener  

在ColorPickerPreference中实现对应的回调方法:

[java] view plain copy

1. @Override  
2.     public void onColorChanged(int color) {  
3.         if (isPersistent()) {  
4.             persistInt(color);  
5.         }  
6.         mValue = color;  
7.         setPreviewColor();  
8.         try {  
9.             getOnPreferenceChangeListener().onPreferenceChange(this, color);  
10.         } catch (NullPointerException e) {  
11.   
12.         }  
13.     }  

调用setPreviewColor()改变ColorPickerPreference中颜色区域的显示:

[java] view plain copy

1. private void setPreviewColor() {  
2.         if (mView == null) return;  
3.         ImageView iView = new ImageView(getContext());  
4.         LinearLayout widgetFrameView = ((LinearLayout)mView.findViewById(android.R.id.widget_frame));  
5.         if (widgetFrameView == null) return;  
6.         widgetFrameView.setVisibility(View.VISIBLE);  
7.         widgetFrameView.setPadding(  
8.             widgetFrameView.getPaddingLeft(),  
9.             widgetFrameView.getPaddingTop(),  
10.             (int)(mDensity * 8),  
11.             widgetFrameView.getPaddingBottom()  
12.         );  
13.         // remove already create preview image  
14.         int count = widgetFrameView.getChildCount();  
15.         if (count > 0) {  
16.             widgetFrameView.removeViews(0, count);  
17.         }  
18.         widgetFrameView.addView(iView);  
19.         widgetFrameView.setMinimumWidth(0);  
20.         iView.setBackgroundDrawable(new AlphaPatternDrawable((int)(5 * mDensity)));  
21.         iView.setImageBitmap(getPreviewBitmap());  
22.     }  

最后调用getOnPreferenceChangeListener().onPreferenceChange(this, color);改变颜色设置值

 

然后在下次打开ColorPickerDialog时，传入上面onColorChanged()回调实现中已经改变的mValue参数

[java] view plain copy

1. mDialog = new ColorPickerDialog(getContext(), mValue);  

至此，PS调色板应用中颜色交互的事件讲解完毕.

相信当分析完PhotoShop调色板应用后，大家会对颜色渲染方面会有一个认识上的提高.