您的位置:首页 > 移动开发 > Android开发

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

2013-09-14 09:25 471 查看
Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应
上一篇讲过了主体界面的绘制,这里讲解调色板应用中的另外一个核心: 颜色选择及生成.
ColorPcikerView中不同部分的选择和ColorPickerPanelView中颜色显示是怎样响应的呢?这里当然少不了回调函数:
ColorPickerView:

public interface OnColorChangedListener {
		public void onColorChanged(int color);
	}

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

@Override
	public boolean onTrackballEvent(MotionEvent event) {

		float x = event.getX();
		float y = event.getY();

		boolean update = false;//是否需要更新颜色

		if(event.getAction() == MotionEvent.ACTION_MOVE){

			switch(mLastTouchedPanel){

			case PANEL_SAT_VAL://饱和度&亮度选择区域

				float sat, val;

				sat = mSat + x/50f;
				val = mVal - y/50f;

				if(sat < 0f){
					sat = 0f;
				}
				else if(sat > 1f){
					sat = 1f;
				}

				if(val < 0f){
					val = 0f;
				}
				else if(val > 1f){
					val = 1f;
				}

				mSat = sat;
				mVal = val;

				update = true;

				break;

			case PANEL_HUE://色相选择区域

				float hue = mHue - y * 10f;

				if(hue < 0f){
					hue = 0f;
				}
				else if(hue > 360f){
					hue = 360f;
				}

				mHue = hue;

				update = true;

				break;

			case PANEL_ALPHA://透明度选择区域

				if(!mShowAlphaPanel || mAlphaRect == null){
					update = false;
				}
				else{

					int alpha = (int) (mAlpha - x*10);

					if(alpha < 0){
						alpha = 0;
					}
					else if(alpha > 0xff){
						alpha = 0xff;
					}

					mAlpha = alpha;

					update = true;
				}

				break;
			}

		}

		if(update){//如果需要更新,调用对用的回调函数并重新绘制

			if(mListener != null){//参数需要由HSV格式的float数组转换为ARGB格式的 int 参数
				mListener.onColorChanged(Color.HSVToColor(mAlpha, new float[]{mHue, mSat, mVal}));
			}

			 invalidate();
			 return true;
		}

		return super.onTrackballEvent(event);
	}

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


@Override
	public boolean onTouchEvent(MotionEvent event) {

		boolean update = false;

		switch(event.getAction()){

		case MotionEvent.ACTION_DOWN:

			mStartTouchPoint = new Point((int)event.getX(), (int)event.getY());

			update = moveTrackersIfNeeded(event);

			break;

		case MotionEvent.ACTION_MOVE:

			update = moveTrackersIfNeeded(event);

			break;

		case MotionEvent.ACTION_UP:

			mStartTouchPoint = null;

			update = moveTrackersIfNeeded(event);

			break;

		}

		if(update){

			if(mListener != null){
				mListener.onColorChanged(Color.HSVToColor(mAlpha, new float[]{mHue, mSat, mVal}));
			}

			invalidate();
			return true;
		}

		return super.onTouchEvent(event);
	}
    //判断是否触发事件,更新区域颜色
     private boolean moveTrackersIfNeeded(MotionEvent event){

        if(mStartTouchPoint == null) return false;

        boolean update = false;
        //获取触摸点X,Y坐标值
        int startX = mStartTouchPoint.x;
        int startY = mStartTouchPoint.y;

        //判断 X,Y坐标是否在对应的区域内,并做相应的处理 
        if(mHueRect.contains(startX, startY)){
            mLastTouchedPanel = PANEL_HUE;

            mHue = pointToHue(event.getY());

            update = true;
        }
        else if(mSatValRect.contains(startX, startY)){

            mLastTouchedPanel = PANEL_SAT_VAL;

            float[] result = pointToSatVal(event.getX(), event.getY());

            mSat = result[0];
            mVal = result[1];

            update = true;
        }
        else if(mAlphaRect != null && mAlphaRect.contains(startX, startY)){

            mLastTouchedPanel = PANEL_ALPHA;

            mAlpha = pointToAlpha((int)event.getX());

            update = true;
        }

        return update;
    }


使用时,让ColorPickerDialog实现ColorPickerView.OnColorChangedListener接口:
并完成对应方法:

@Override
	public void onColorChanged(int color) {

		mNewColor.setColor(color);// mNewColor即为右下角实时显示颜色的ColorPickerPanelView
		
		if (mHexValueEnabled)
			updateHexValue(color);

		/*
		if (mListener != null) {
			mListener.onColorChanged(color);
		}
		*/

	}


private void updateHexValue(int color) {
		if (getAlphaSliderVisible()) {
			mHexVal.setText(ColorPickerPreference.convertToARGB(color).toUpperCase(Locale.getDefault()));
		} else {
			mHexVal.setText(ColorPickerPreference.convertToRGB(color).toUpperCase(Locale.getDefault()));
		}
		mHexVal.setTextColor(mHexDefaultTextColor);
	}
/** 转化为ARGB格式字符串
	 * For custom purposes. Not used by ColorPickerPreferrence
	 * @param color
	 * @author Unknown
	 */
    public static String convertToARGB(int color) {
        String alpha = Integer.toHexString(Color.alpha(color));
        String red = Integer.toHexString(Color.red(color));
        String green = Integer.toHexString(Color.green(color));
        String blue = Integer.toHexString(Color.blue(color));

        if (alpha.length() == 1) {
            alpha = "0" + alpha;
        }

        if (red.length() == 1) {
            red = "0" + red;
        }

        if (green.length() == 1) {
            green = "0" + green;
        }

        if (blue.length() == 1) {
            blue = "0" + blue;
        }

        return "#" + alpha + red + green + blue;
    }


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

@Override
	public void onClick(View v) {
		if (v.getId() == R.id.new_color_panel) {
			if (mListener != null) {
				mListener.onColorChanged(mNewColor.getColor());
			}
		}
		dismiss();
	}

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

        private OnColorChangedListener mListener;

public interface OnColorChangedListener { public void onColorChanged(int color); }

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


implements ColorPickerDialog.OnColorChangedListener

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


@Override
	public void onColorChanged(int color) {
		if (isPersistent()) {
			persistInt(color);
		}
		mValue = color;
		setPreviewColor();
		try {
			getOnPreferenceChangeListener().onPreferenceChange(this, color);
		} catch (NullPointerException e) {

		}
	}

调用setPreviewColor()改变ColorPickerPreference中颜色区域的显示:
private void setPreviewColor() {
		if (mView == null) return;
		ImageView iView = new ImageView(getContext());
		LinearLayout widgetFrameView = ((LinearLayout)mView.findViewById(android.R.id.widget_frame));
		if (widgetFrameView == null) return;
		widgetFrameView.setVisibility(View.VISIBLE);
		widgetFrameView.setPadding(
			widgetFrameView.getPaddingLeft(),
			widgetFrameView.getPaddingTop(),
			(int)(mDensity * 8),
			widgetFrameView.getPaddingBottom()
		);
		// remove already create preview image
		int count = widgetFrameView.getChildCount();
		if (count > 0) {
			widgetFrameView.removeViews(0, count);
		}
		widgetFrameView.addView(iView);
		widgetFrameView.setMinimumWidth(0);
		iView.setBackgroundDrawable(new AlphaPatternDrawable((int)(5 * mDensity)));
		iView.setImageBitmap(getPreviewBitmap());
	}

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


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

mDialog = new ColorPickerDialog(getContext(), mValue);
至此,PS调色板应用中颜色交互的事件讲解完毕.
相信当分析完PhotoShop调色板应用后,大家会对颜色渲染方面会有一个认识上的提高.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: