Android 仿PhotoShop调色板应用(三) 主体界面绘制
关于PhotoShop调色板应用的实现我总结了两个最核心的部分:
1. 主体界面不同区域的绘制
2. 颜色选择的生成与交互
这里我讲述一下第一要点，也就是ColorPickerDialog对主体界面的绘制.
首先还是看一下ColorPickerDialog整体显示的效果(见图1)
图1
对应着效果图我画了一张界面结构分析图，相信看了之后会对该界面的组成很快能够掌握:(见图2)
图2
一. 界面组成
可以看到整个显示的部分即为ColorPickerDialog. 这个Dialog根据组件的构成及功能实现上可以分为两大部分:
1. 红色边框区域 由ColorPickerView绘制而成. 主要作为颜色区域的选择，此区域又划分为三个部分:
(1) Saturation Area 饱和度选择区域
(2) Hue Area 色相选择区域
(3) Alpha Area 透明度选择区域 绘制此区域借助了上一篇讲到的AlphaPatternDrawable类
2. 蓝色边框区域 由ColorPickerPanelView绘制. 左边的部分作为初始颜色显示 右边的部分做颜色选择的实时显示区域，点击后可将颜色设置为默认值
该Dialog的布局文件dialog_color_picker.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp" >
<net.margaritov.preference.colorpicker.ColorPickerView
android:id="@+id/color_picker_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layerType="software"
android:tag="portrait" />
<LinearLayout
android:id="@+id/text_hex_wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="@string/press_color_to_apply"
android:textAppearance="?android:attr/textAppearanceSmall" />
<EditText
android:id="@+id/hex_val"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="HEX"
android:imeOptions="actionDone"
android:maxLength="7"
android:singleLine="true"
android:inputType="textCapCharacters"
android:visibility="gone" >
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal" >
<net.margaritov.preference.colorpicker.ColorPickerPanelView
android:id="@+id/old_color_panel"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_weight="0.5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:text="→"
android:textSize="20sp" />
<net.margaritov.preference.colorpicker.ColorPickerPanelView
android:id="@+id/new_color_panel"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
</LinearLayout>
</LinearLayout>
二. 不同区域的绘制实现:
1. Saturation Area 饱和度选择区域
这里用到了组合渲染(ComposeShader)的方式.
(1)使用了两个线性渲染器:一个作为亮度的显示渲染，一个作为饱和度的显示渲染, 因为我们可以看到颜色渐变和亮度渐变的综合显示效果
此区域完成了HSV(也叫HSB)色彩空间之Saturation(饱和度)及value(色调)/brightness(明度)的综合显示
(2) 选择圆环绘制: 分为了内外两个圆环分别绘制. 黑色内圆及灰色外圆
具体实现请看以下代码
/**
* 绘制饱和度选择区域
* @param canvas
*/
private void drawSatValPanel(Canvas canvas){
final RectF rect = mSatValRect;
if(BORDER_WIDTH_PX > 0){
mBorderPaint.setColor(mBorderColor);
canvas.drawRect(mDrawingRect.left, mDrawingRect.top, rect.right + BORDER_WIDTH_PX, rect.bottom + BORDER_WIDTH_PX, mBorderPaint);
}
//明度线性渲染器
if (mValShader == null) {
mValShader = new LinearGradient(rect.left, rect.top, rect.left, rect.bottom,
0xffffffff, 0xff000000, TileMode.CLAMP);
}
//HSV转化为RGB
int rgb = Color.HSVToColor(new float[]{mHue,1f,1f});
//饱和线性渲染器
mSatShader = new LinearGradient(rect.left, rect.top, rect.right, rect.top,
0xffffffff, rgb, TileMode.CLAMP);
//组合渲染 = 明度线性渲染器 + 饱和线性渲染器
ComposeShader mShader = new ComposeShader(mValShader, mSatShader, PorterDuff.Mode.MULTIPLY);
mSatValPaint.setShader(mShader);
canvas.drawRect(rect, mSatValPaint);
//初始化选择圆块的位置
Point p = satValToPoint(mSat, mVal);
//绘制黑色内圆
mSatValTrackerPaint.setColor(0xff000000);
canvas.drawCircle(p.x, p.y, PALETTE_CIRCLE_TRACKER_RADIUS - 1f * mDensity, mSatValTrackerPaint);
//绘制外圆
mSatValTrackerPaint.setColor(0xffdddddd);
canvas.drawCircle(p.x, p.y, PALETTE_CIRCLE_TRACKER_RADIUS, mSatValTrackerPaint);
}
2.Hue Area 色相选择区域
(1) 颜色渲染部分仍为竖直方向的线性渐变.这里可以看一下对应颜色数组的生成:
private int[] buildHueColorArray(){
int[] hue = new int[361];
int count = 0;
for(int i = hue.length -1; i >= 0; i--, count++){
hue[count] = Color.HSVToColor(new float[]{i, 1f, 1f});
}
return hue;
}
这里使用了一个大小为
361的int数组, 根据当前位置生成不同的
hsv颜色数组
通过Color.HSVToColor，将HSV转换为ARGB的形式,因为在线性渐变渲染中，我们不能直接使用HSV色彩，而是需要使用ARGB制式的颜色.
因此我们看到了一个数值方向的一个多彩变换效果
(2) 绘制矩形颜色选择条区域
/**
* 绘制右侧色相选择区域
* @param canvas
*/
private void drawHuePanel(Canvas canvas){
final RectF rect = mHueRect;
if(BORDER_WIDTH_PX > 0){
mBorderPaint.setColor(mBorderColor);
canvas.drawRect(rect.left - BORDER_WIDTH_PX,
rect.top - BORDER_WIDTH_PX,
rect.right + BORDER_WIDTH_PX,
rect.bottom + BORDER_WIDTH_PX,
mBorderPaint);
}
//初始化色相线性渲染器
if (mHueShader == null) {
mHueShader = new LinearGradient(rect.left, rect.top, rect.left, rect.bottom, buildHueColorArray(), null, TileMode.CLAMP);
mHuePaint.setShader(mHueShader);
}
canvas.drawRect(rect, mHuePaint);
float rectHeight = 4 * mDensity / 2;
//初始化色相选择器选择条位置
Point p = hueToPoint(mHue);
RectF r = new RectF();
r.left = rect.left - RECTANGLE_TRACKER_OFFSET;
r.right = rect.right + RECTANGLE_TRACKER_OFFSET;
r.top = p.y - rectHeight;
r.bottom = p.y + rectHeight;
//绘制选择条
canvas.drawRoundRect(r, 2, 2, mHueTrackerPaint);
}
3. Alpha Area 透明度选择区域
这里主要借助于AlphaPatternDrawable进行绘制,见上一篇博客:
Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable
具体请见注释，渲染部分和Hue Area类似
/**
* 绘制底部透明度选择区域
* @param canvas
*/
private void drawAlphaPanel(Canvas canvas){
if(!mShowAlphaPanel || mAlphaRect == null || mAlphaPattern == null) return;
final RectF rect = mAlphaRect;
if(BORDER_WIDTH_PX > 0){
mBorderPaint.setColor(mBorderColor);
canvas.drawRect(rect.left - BORDER_WIDTH_PX,
rect.top - BORDER_WIDTH_PX,
rect.right + BORDER_WIDTH_PX,
rect.bottom + BORDER_WIDTH_PX,
mBorderPaint);
}
mAlphaPattern.draw(canvas);
float[] hsv = new float[]{mHue,mSat,mVal};//hsv数组
int color = Color.HSVToColor(hsv);
int acolor = Color.HSVToColor(0, hsv);
//初始化透明度线性渲染器
mAlphaShader = new LinearGradient(rect.left, rect.top, rect.right, rect.top,
color, acolor, TileMode.CLAMP);
mAlphaPaint.setShader(mAlphaShader);
canvas.drawRect(rect, mAlphaPaint);
if(mAlphaSliderText != null && mAlphaSliderText!= ""){
canvas.drawText(mAlphaSliderText, rect.centerX(), rect.centerY() + 4 * mDensity, mAlphaTextPaint);
}
float rectWidth = 4 * mDensity / 2;
//初始化透明度选择器选择条位置
Point p = alphaToPoint(mAlpha);
RectF r = new RectF();
r.left = p.x - rectWidth;
r.right = p.x + rectWidth;
r.top = rect.top - RECTANGLE_TRACKER_OFFSET;
r.bottom = rect.bottom + RECTANGLE_TRACKER_OFFSET;
canvas.drawRoundRect(r, 2, 2, mHueTrackerPaint);
}
4. ColorPickerPanelView
由于此区域可做最终颜色的显示，所以也借助了AlphaPatternDrawable的实现
此矩形区域绘制相对比较简单:
final RectF rect = mColorRect;
if(BORDER_WIDTH_PX > 0){
mBorderPaint.setColor(mBorderColor);
canvas.drawRect(mDrawingRect, mBorderPaint);
}
if(mAlphaPattern != null){
mAlphaPattern.draw(canvas);
}
mColorPaint.setColor(mColor);
canvas.drawRect(rect, mColorPaint);
至此，ColorPickerDialog主体面板绘制部分已讲述完毕.下面我会讲述另一大核心部分：颜色选择生成的交互.
如果对颜色渲染方面还是不太清楚的话，可以参照我之前写的颜色渲染系列，关于原理和具体API的讲解.
分享到：
相关推荐
Android 仿PhotoShop调色板,非常复杂的颜色选择器,而且完全可以媲美PhotoShop中的调色板.
这是一款仿制PhotoShop的调色板源码。代码主要使用了自定义view视图和Drawable。对自定义view，和drawable不了解的这是一个很好的例子。代码中很对方法都加了注释，可选择用手指在屏幕上滑动选择颜色以及透明度，小...
Android应用源码仿制PhotoShop的调色板是一款仿制PhotoShop的调色板源码。代码主要使用了自定义view视图和Drawable。对自定义view，和drawable不了解的这是 一个很好的例子。代码中很对方法都加了注释，可选择用手指...
PHOTOSHOP调色教程 上传到网上的照片不“出色”？QQ空间里的照片不引人注目？淘宝店里的商品不光鲜亮丽？想让自己的作品有专业水准？如果能在PHOTOSHOP中对普通的素材稍作调整，即可让你有更多网络人气！ 本书详细...
自己用VC的MDC多文档制作的仿Photoshop界面。目前只要是仿制了Photoshop的工具栏。并且带有声音（鼠标滑过和点击时）。 只有可执行程序，无源码。
jQueryUI.Ruler是一款基于jQuery UI的仿Photoshop界面的屏幕标尺插件。该插件可以在一个DOM元素上使用屏幕标尺，这个元素可以是body元素，也可以是一个div元素.演示地址：http://www.jq22.com/jquery-info8529
Photoshop调色教程：为漂亮女孩改头换面.doc Photoshop调色教程：为漂亮女孩改头换面.doc
《抠图+修图+调色+合成+特效Photoshop核心应用5项修炼》以案例为主导，核心内容包括抠图、修图、调色、合成和特效，这些案例均源自经验丰富的设计师、商业修图师，并由Adobe Photoshop产品专家根据读者的学习习惯...
2款调色板源码，一款是防PS调色板，一款是简洁调色板，操作简单易用。
如何使用photoshop进行数码创作，如何将图像的颜色进行合适的调整，使之更美观，符合个人审美。
Theme02Photoshop中的调色相关的基础知识 Theme03简单的调色技巧 Theme04光与影的调整 Theme05通过色彩进行变换 Theme06不同颜色模式下的调色应用 Theme07对偏色照片的校正和处理 Theme08人像的调色应用 Theme09风景...
photo shop psd 实用色板 20+ 各种色调 各种风格 冷色 暖色等等
Photoshop调色教程[汇编].pdf
Photoshop调色动作，只要你点击动作，就能完成照相馆风格的图片后期制作。让你的图片有专业感的体现。
16.act win.pal 调色板文件Paint Shop 专用和Photo Shop专用
仿photoshop .NET技术
这是一本介绍如何使用PhotoShop软件进行图片的操作：抠图，修图，调色，合成，特效。
C#高仿PhotoshopCS6界面,供大家参考！
75款photoshop调色动作,应有尽有!