安卓實現(xiàn)自定義圓形取色盤
更新時間：2022年08月16日 08:47:10 作者：返回主頁勤奮的小鐵
這篇文章主要介紹了安卓實現(xiàn)自定義圓形取色盤的相關資料,并且給出了相應的代碼，推薦給大家，需要的朋友可以參考下
概述
這是一個自定義色盤，根據(jù)點，直線和圓的幾何學加上hsv顏色模型完成
技術點
幾何：
圓的標準方程式：
(x-a)²+(y-b)²=r²
直線一般方程式：
已知直線上的兩點P1(X1,Y1) P2(X2,Y2)， P1 P2兩點不重合。
AX+BY+C=0
A = Y2 - Y1
B = X1 - X2
C = X2*Y1 - X1*Y2
點與圓的位置關系：
點在圓內、點在圓上、點在圓外。假設圓的半徑為r，點到圓心的距離為d，則有：d＜r點在圓內，d=r點在圓上，d＞r點在圓外。
點P（x1,y1) 與圓(x-a)²+(y-b)²=r²的位置關系：
當(x-a)²+(y-b)²＞r²時，則點P在圓外。
當(x-a)²+(y-b)²=r²時，則點P在圓上。
當(x-a)²+(y-b)²＜r²時，則點P在圓內。
直線的斜率：
一條直線與某平面直角坐標系橫軸正半軸方向的夾角的正切值即該直線相對于該坐標系的斜率
斜率 k=tanα（α傾斜角）
與x軸垂直的直線不存在斜率
直線的斜率公式為：k=y2-y1）/（x2-x1）或（y1-y2）/（x1-x2）
象限：
記（x,y) 是象限中的一點
第一象限中的點：x > 0, y > 0
第二象限中的點：x < 0, y > 0
第三象限中的點：x < 0, y < 0
第四象限中的點：x > 0, y < 0
值得注意的是原點和坐標軸上的點不屬于任何象限。
解方程:
Android：
自定義View、ComposeShader、SweepGradient、RadialGradient、Paint。
上源碼
代碼都比較簡單這里就不介紹了
class RoundColorPaletteHSV360 constructor(context: Context, attrs: AttributeSet?, defStyleAttr:Int): View(context,attrs,defStyleAttr) {
constructor(context: Context):this(context,null,0)
constructor(context: Context,attrs: AttributeSet?):this(context,attrs,0)
//取色范圍半徑
var radius:Float = 0f
private set(value){
field = value-stroke-gap-colorRadius
}
//取色圓半徑
var colorRadius = 50f
set(value){
if (value >= 0)
field = value
}
//取色圓邊框半徑
var colorStroke = 8f
set(value){
if (value >= 0)
field = value
}
//取色圓邊框顏色
var colorStrokeColor = Color.BLACK
//取色顏色
var color = Color.WHITE
//邊框半徑
var stroke = 24f
set(value){
if (value >= 0)
field = value
}
//邊框顏色
var strokeColor = Color.YELLOW
//間隙半徑
var gap = 4f
set(value){
if (value >= 0)
field = value
}
var isOutOfBounds:Boolean = false
private val paint = Paint()
private val colors1:IntArray
private val positions1 :FloatArray
private val colors2:IntArray
private val positions2 :FloatArray
private var xColor: Float = 0f
private var yColor: Float = 0f
private var colorChangeCallBack: ColorChangeCallBack? = null
init {
// <declare-styleable name="RoundColorPaletteHSV360">
// <attr name="colorRadius" format="dimension"/>
// <attr name="colorStroke" format="dimension"/>
// <attr name="gap" format="dimension"/>
// <attr name="stroke" format="dimension"/>
// <attr name="colorStrokeColor" format="color"/>
// <attr name="strokeColor" format="color"/>
// <attr name="isOutOfBounds" format="boolean"/>
// </declare-styleable>
val typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundColorPaletteHSV360)
colorRadius = typedArray.getDimension(R.styleable.RoundColorPaletteHSV360_colorRadius,50f)
colorStroke = typedArray.getDimension(R.styleable.RoundColorPaletteHSV360_colorStroke,8f)
gap = typedArray.getDimension(R.styleable.RoundColorPaletteHSV360_gap,4f)
stroke = typedArray.getDimension(R.styleable.RoundColorPaletteHSV360_stroke,24f)
colorStrokeColor = typedArray.getColor(R.styleable.RoundColorPaletteHSV360_colorStrokeColor,Color.BLACK)
strokeColor = typedArray.getColor(R.styleable.RoundColorPaletteHSV360_strokeColor,Color.YELLOW)
isOutOfBounds = typedArray.getBoolean(R.styleable.RoundColorPaletteHSV360_isOutOfBounds,false)
typedArray.recycle()
val colorCount1 = 360
val colorCount2 = 255
val colorAngleStep = 360 / colorCount1
positions1 = FloatArray(colorCount1+1){i-> i/(colorCount1*1f)}
var hsv = floatArrayOf(0f, 1f, 1f)
colors1 = IntArray(colorCount1+1){ i->
hsv[0] = 360 - i * colorAngleStep % 360f
Color.HSVToColor(hsv)
}
hsv = floatArrayOf(0f, 0f, 1f)
positions2 = FloatArray(colorCount2+1){i-> i/(colorCount2*1f)}
colors2 = IntArray(colorCount2+1){ i->
Color.HSVToColor(255 * (colorCount2 -i) / colorCount2 , hsv)
}
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
val width = MeasureSpec.getSize(widthMeasureSpec)/2f
val height = MeasureSpec.getSize(heightMeasureSpec)/2f
radius = if(width-height<0) width else height
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
}
@SuppressLint("DrawAllocation")
override fun onDraw(canvas: Canvas?) {
createColorWheel(canvas)
createColorRadius(canvas,xColor,yColor)
super.onDraw(canvas)
}
//色盤
private fun createColorWheel(canvas: Canvas?){
paint.reset()
paint.isAntiAlias = true
paint.shader = ComposeShader(
SweepGradient(
width / 2f,
height / 2f,
colors1,
positions1
), RadialGradient(
width / 2f,
height / 2f,
radius-colorRadius,
colors2,
positions2,
Shader.TileMode.CLAMP
), PorterDuff.Mode.SRC_OVER)
canvas?.drawCircle(width / 2f,height / 2f,radius,paint)
paint.shader = null
paint.style = Paint.Style.STROKE
paint.strokeWidth = stroke.toFloat()
paint.color = strokeColor
canvas?.drawCircle(width / 2f,height / 2f,radius+gap+stroke/2,paint)
}
//取色圓
private fun createColorRadius(canvas: Canvas?, rx: Float, ry: Float){
var x = rx
var y = ry
if(x==0f || y==0f ){
x = width / 2f
y = height / 2f
}
paint.reset()
paint.isAntiAlias = true
paint.color = color
canvas?.drawCircle(x,y,colorRadius,paint)
paint.style = Paint.Style.STROKE
paint.color = colorStrokeColor
paint.strokeWidth = colorStroke
canvas?.drawCircle(x,y,colorRadius+colorStroke/2,paint)
}
fun setColorChangeCallBack(colorChangeCallBack: ColorChangeCallBack){
this.colorChangeCallBack = colorChangeCallBack
}
override fun onTouchEvent(event: MotionEvent?): Boolean {
event?.let {
val pointToCircle = pointToCircle(it.x, it.y)
if( pointToCircle <= radius - if(isOutOfBounds) 0f else (colorRadius-colorStroke)){
xColor = it.x
yColor = it.y
color = Color.HSVToColor(floatArrayOf((angdeg(it.x,it.y)),pointToCircle/radius,1f))
colorChangeCallBack?.onChange(color)
}else{
findPoint( it.x, it.y)
}
invalidate()
}
return true
}
//點到圓心距離
private fun pointToCircle(x: Float = width / 2f, y: Float = height / 2f ) =
sqrt((x - width / 2f)*(x - width / 2f) + (y-height / 2f)*(y-height / 2f))
//離目標最近的點 待開發(fā)
private fun findPoint(x1: Float = width / 2f, y1: Float = height / 2f ){
// 直線一般方程
// 以圓心為坐標0，0 重新計算點（a，b）坐標
val a = y1 - height / 2f
val b = x1 - width / 2f
val r = radius - if(isOutOfBounds) 0f else (colorRadius-colorStroke)
//r^2/((b/a)^2+1)的開平方
yColor = sqrt( (r * r) / ((b / a) * (b / a) + 1))
//判斷開平方的正負值
if(a<0) yColor = -yColor
xColor = (b*yColor)/a + width / 2f
yColor += height / 2f
color = Color.HSVToColor(floatArrayOf((angdeg(xColor,yColor)),1f,1f))
colorChangeCallBack?.onChange(color)
}
//角度
private fun angdeg(x: Float = width / 2f, y: Float = height / 2f ):Float{
var angdeg = 0
//特殊角度, 與x軸垂直不存在斜率
if(x - width / 2f == 0f && y - height / 2f < 0){
angdeg = 90
}else{
//到圓心的斜率
val k = ((y-height / 2f)*(y-height / 2f))/((x - width / 2f)*(x - width / 2f))
//二分法
var min = 0.00
var max = 90.00
while(max-min>1){
val deg = min + (max - min) / 2
if(k>tan(toRadians(deg))) min = deg else max = deg
}
angdeg = (max-1).toInt()
}
if((x - width / 2f <= 0f && y - height / 2f <= 0f)) {//第二象限 90~180
angdeg = 180 - angdeg
}else if((x - width / 2f <= 0f && y - height / 2f >= 0f)) {//第三象限 180~270
angdeg += 180
}else if((x - width / 2f >= 0f && y - height / 2f >= 0f)) {//第四象限 270~360
angdeg = 360 - angdeg
}
return angdeg.toFloat()
}
interface ColorChangeCallBack{
fun onChange(@ColorInt color: Int)
}
}# 圓形取色盤
#### 倉庫地址
https://gitee.com/yangguizhong/circular-color-plate
#### 安裝教程
gradle 7.0以上的在 settings.gradle 添加：
```
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven {url "https://gitee.com/yangguizhong/circular-color-plate/raw/master"}
jcenter() // Warning: this repository is going to shut down soon
}
}
```gradle 7.0以下的在根 build.gradle 添加：
```
allprojects {
repositories {
google()
mavenCentral()
maven {url "https://gitee.com/yangguizhong/circular-color-plate/raw/master"}
}
}
```build.gradle 添加：
``` implementation 'com.xiaotie.colorPicker:colorPicker:1.0.0' ```
#### 使用說明
```
<com.wifiled.ipixels.view.RoundColorPaletteHSV360
android:id="@+id/color_picker"
android:layout_width="300dp"
android:layout_height="300dp"
app:gap="1dp"http://取色背景和背景邊框的間隙
app:colorRadius="20dp"http://取色圓的半徑
app:colorStroke="3dp"http://取色圓的邊框寬度
app:stroke="8dp"http://背景邊框的寬度
app:strokeColor="#FFF7A6"http://背景邊框的顏色
app:isOutOfBounds="true"http://是否超出邊框
app:colorStrokeColor="#2E3C3C"http://取色圓的邊框寬度
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
```
```
colorPickerView.setColorChangeCallBack(object:RoundColorPaletteHSV360.ColorChangeCallBack{
override fun onChange(color: Int) {
//返回的顏色
}
})
```到此這篇關于安卓實現(xiàn)自定義圓形取色盤 的文章就介紹到這了,更多相關Android實現(xiàn)圓形取色盤 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
flutter ExpansionTile 層級菜單的實現(xiàn)
這篇文章主要介紹了flutter ExpansionTile 層級菜單的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
Flutter 利用CustomScrollView實現(xiàn)滑動效果
我們可以使用ListView將幾個GridView組合在一起實現(xiàn)了不同可滑動組件的粘合，但是這里必須要設置禁止 GridView 的滑動，防止多個滑動組件的沖突。這種方式寫起來不太方便，事實上 Flutter 提供了 CustomScrollView 來粘合多個滑動組件，并且可以實現(xiàn)更有趣的滑動效果。2021-06-06
Android 自定義圓形頭像CircleImageView支持加載網(wǎng)絡圖片的實現(xiàn)代碼
這篇文章主要介紹了Android 自定義圓形頭像CircleImageView支持加載網(wǎng)絡圖片的實現(xiàn)代碼,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了Android 監(jiān)聽鎖屏、解鎖、開屏 功能代碼的相關資料,需要的朋友可以參考下2016-06-06
動態(tài)代理是一種在編程中非常有用的設計模式,它允許你在運行時創(chuàng)建一個代理對象來代替原始對象,以便在方法調用前后執(zhí)行額外的邏輯,本文將深入探討Android動態(tài)代理的原理、用途和實際示例2023-09-09
Flutter學習LogUtil封裝與實現(xiàn)實例詳解
這篇文章主要為大家介紹了Flutter學習LogUtil封裝與實現(xiàn)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了 Android EditText限制輸入字符的方法總結的相關資料,這里提供了五種方法來實現(xiàn)并進行比較，需要的朋友可以參考下2017-07-07
今天小編就為大家分享一篇關于Android自定義控件ListView下拉刷新的代碼，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-12-12
這篇文章主要介紹了Android高仿抖音照片電影功能的實現(xiàn)代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了Android開發(fā)gradle拉取依賴的加速配置，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06