自定義控制元件(陰影,漸變)
Paint 類定義了一個名為 setShadowLayer 的方法:
publicvoid setShadowLayer(float radius,float dx,float dy,int shadowColor), 引數意義如下:
radius:陰影半徑
dx: x 方向陰影的偏移量
dy: y 方向陰影的偏移量
shadowColor: 陰影的顏色
陰影layer顯示 影時,shaderlayer 有 兩 種 類 型 : View.LAYER_TYPE_SOFTWARE 和View.LAYER_TYPE_HARDWARE, layer 的預設型別為 LAYER_TYPE_HARDWARE, 但陰影只能在
View.LAYER_TYPE_SOFTWARE 環 境 下 工 作 , 所 以 , 我 們 需 要 調 用 View 類 的 publicvoidsetLayerType(int layerType,Paint paint) 方 法 為 Paint 對 象 指 定 層 的 類 型 :
setLayerType(View.LAYER_TYPE_SOFTWARE,paint)。如想取消陰影則將radius設定為0.
ShaderView.java:
public class ShaderView extends View { private Paint paint; public ShaderView(Context context, AttributeSet attrs) { super(context, attrs); } public ShaderView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setStrokeWidth(5); paint.setTextSize(100); this.setLayerType(View.LAYER_TYPE_SOFTWARE,paint);//設定為SOFTWARE才會實現陰影 paint.setShadowLayer(10,1,1, Color.BLUE);//偏移度很小時則變成發光字型 canvas.drawText("Android開發",100,100,paint); canvas.restore(); paint.setShadowLayer(10,5,5,Color.GREEN);//如果想要取消陰影,則將Radius設為0即可 canvas.drawText("Android,你好",100,400,paint); } }
二、漸變
漸變種類有:
1. 線性漸變: LinearGradient
線性漸變( LinearGradient) 根據指定的角度、顏色和模式使用漸變顏色填充繪圖區域。我們必須定義兩個點( x0, y0)和( x1, y1),漸變的方向與這兩個點的連線垂直,
LinearGradient 的構造方法如下:
<1>
publicLinearGradient(float x0,float y0,float x1,float y1,int color0,int color1,TileMode tile):本方法用於兩種顏色的漸變, 各引數意義如下:
x0、 y0: 用於決定線性方向的第一個點的座標( x0, y0);
x1、 y1:用於決定線性方向的第二個點的座標( x1, y1);
color0: 第一種顏色;
color1: 第二種顏色;
tile: 漸變模式
<2>
publicLinearGradient(float x0,float y0,float x1,floaty1,int colors[],float positions[],TileMode tile), 這是一個功能更加強大的構造方法, 我們來看看該構造方法引數的作用:
x0、 y0:起始點的座標
x1、 y1:終止點的座標
colors:多種顏色
positions:顏色的位置(比例)
TileMode:漸變模式
引數 colors 和 positions 都是陣列, 前者用於指定多種顏色,後者用於指定每種顏色的起始比例位置。 positions 陣列中的元素個數與 colors 要相同, 且是 0 至 1 的數值, [0,1]是臨界區,
如果小於 0 則當 0 處理, 如果大於 1 則當 1 處理。假如在繪圖區域和漸變區域大小相同的情況下,colors 包含了三種顏色: red、 yellow、 green, 在漸變區域中這三種顏色的起始比例位置為 0、 0.3、
2. 徑向漸變: RadialGradient
徑向漸變是以指定的點為中心, 向四周以漸變顏色進行圓周擴散, 和線性漸變一樣,支援兩種或多種顏色。
<1>public RadialGradient(floatx,floaty,floatradius,int color0,intcolor1,TileMode tile), 該構造方法支援兩種顏色, 下面是引數的作用:
x、 y: 中心點座標
radius: 漸變半徑
color0:起始顏色
color1:結束顏色
TileMode:漸變模式
<2>public RadialGradient(floatx,floaty,floatradius,int colors[],float positions[],TileModetile), 該構造方法支援 3 種或 3 種以上顏色的漸變, 各引數的作用如下:
x、 y: 中心點座標
radius: 漸變半徑
colors:多種顏色
positions:顏色的位置(比例)
TileMode:漸變模式
建構函式2用法如上;
3. 掃描漸變: SweepGradient
SweepGradient 類似於軍事題材電影中的雷達掃᧿效果, 固定圓心, 將半徑假想為有形並旋
轉一週而繪製的漸變顏色。 SweepGradient 定義了兩個主要的構造方法:
<1>public SweepGradient(float cx,float cy,int color0,int color1)
支援兩種顏色的掃描漸變, 引數的作用如下:
cx、 cy:圓點座標;
color0:起始顏色;
color1:結束顏色。
<2>public SweepGradient(float cx,float cy,int colors[],float positions[])
支援多種顏色的掃描漸變, 引數的作用如下:
cx、 cy:圓點座標;
colors:多種顏色;
positions:顏色的位置(比例)。
4. 點陣圖漸變: BitmapShader
點陣圖漸變其實就是在繪製的圖形中將指定的點陣圖作為背景, 如果圖形比點陣圖小, 則通過漸變模式進行平鋪, TileMode.CLAMP 模式不平鋪, TileMode.REPEAT 模式表示平鋪, TileMode.MIRROR
模式也表示平鋪, 但是交錯的點陣圖是彼此的映象, 方向相反。 可以同時指定水平和垂直兩個方向的漸變模式。
構造方法:
publicBitmapShader(Bitmap bitmap,TileMode tileX,TileMode tileY), 引數如下:
bitmap:點陣圖;
tileX: x 方向的重複模式;
tileY: y 方向的重複模式。
5. 混合漸變: ComposeShader
混合漸變 ComposeShader是將兩種不同的漸變通過點陣圖運算後得到的一種更加複雜的漸變。
構造方法:
<1>public ComposeShader(Shader shaderA,Shader shaderB,Xfermode mode)
<2>public ComposeShader(Shader shaderA,Shader shaderB,Mode mode)
shaderA 和 shaderB 是兩個漸變物件, mode 為點陣圖運算型別, 16 種運算模式如圖 5-15
所示:
程式碼中, shaderA 為點陣圖漸變, shaderB 為線性漸變, 根據 Mode.SRC_ATOP 的運算規則,
shaderA 會全部顯示( 此處為小機器人), shaderB 只顯示二者相交部分並位於最上面( TOP)。
漸變效果程式碼:
public class RadialGradientView extends View {
private int color[]={Color.GREEN,Color.BLUE,Color.RED};
//private float position[]={0,0.5f,1};
public RadialGradientView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public RadialGradientView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Rect rect=new Rect(100,100,600,600);
//1.徑向漸變
RadialGradient r=new RadialGradient(350,350,250, Color.BLUE,Color.YELLOW, Shader.TileMode.MIRROR);
//2.線性漸變
// LinearGradient r=new LinearGradient(100,100,600,600,Color.RED,Color.GREEN, Shader.TileMode.CLAMP);
//3.掃描漸變
// SweepGradient r=new SweepGradient(350,350,Color.RED,Color.GREEN);
//SweepGradient r=new SweepGradient(350,350,color,null);
//4.點陣圖漸變
// Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.boy);
// BitmapShader r=new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);
//5.混合漸變
// LinearGradient lg=new LinearGradient(100,100,600,600,Color.RED,Color.GREEN, Shader.TileMode.CLAMP);
// Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.boy);
// BitmapShader bs=new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);
// ComposeShader r=new ComposeShader(bs,lg, PorterDuff.Mode.SRC_ATOP);
//公用部分
Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setShader(r);
canvas.drawRect(rect,paint);
canvas.translate(0,500);
canvas.drawOval(new RectF(rect),paint);
}
}
漸變與Matrixpublic void setLocalMatrix(Matrix localM), 該方法能和漸變結合,在填充漸變顏色的時候實現移位、旋轉、縮放和拉斜的效果。
我們做一個旋轉的圓, 圓內使用 SweepGradient 漸變填充,看起來像一張光碟。首先, 我們建立了一個 Matrix 物件 mMatrix, mMatrix 定義了以圓點為中心漸變的旋轉效
果, 注意不是旋轉 Canvas 而是旋轉 SweepGradient。 onDraw()方法中不斷呼叫 invalidate()重繪自己, 每重繪一次就旋轉 2 度,於是就形成了一個旋轉的動畫。
SweepMatrixView.java:
public class SweepMatrixView extends View {
private Paint mpaint=new Paint(Paint.ANTI_ALIAS_FLAG);
private float mRotate;
private Matrix matrix=new Matrix();
private Shader mshader;
private int[] color={ Color.GREEN,Color.RED,Color.BLUE};
public SweepMatrixView(Context context, AttributeSet attrs) {
super(context, attrs);
setFocusable(true);
setFocusableInTouchMode(true);
float x=100;
float y=100;
mshader=new SweepGradient(x,y,color,null);
mpaint.setShader(mshader);
}
public SweepMatrixView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint =mpaint;
float x=100;
float y=100;
canvas.translate(100,100);
canvas.drawColor(Color.WHITE);
matrix.setRotate(mRotate,x,y);
mshader.setLocalMatrix(matrix);
mRotate+=2;
if(mRotate>=360){
mRotate=0;
}
invalidate();
canvas.drawCircle(x,y,100,paint);
}
}
可以實現掃描漸變像光碟一樣旋轉。相關推薦
自定義控制元件(陰影,漸變)
一、陰影: Paint 類定義了一個名為 setShadowLayer 的方法: publicvoid setShadowLayer(float radius,float dx,float dy,int shadowColor), 引數意義如下: radius:陰影半徑 d
繼承式自定義控制元件——滑動ScrollView,標題顏色漸變
MainActivity.java public class MainActivity extends AppCompatActivity { private ImageView mIvDetail; private ObservableScr
Android自定義控制元件(一) 下拉重新整理,上拉分頁載入更多(支援ListView, GridView, ScrollView)
首先說明,這幾篇文章是對一些前輩的成果進行學習後的心得總結。也借這種方式對他們表示謝意。 最近專案中好幾個模組都用到listview和gridview的下拉重新整理,上拉載入更多等功能,而且涉及到圖片的批量下載。水平有限,首先是想到找一些比較
自定義控制元件(二)Paint,Canvas 基礎用法
本篇部落格繼續學習 Paint 和 Canvas 的基礎用法,上一篇部落格學習了基礎API使用( 基礎幾何圖形,Path 路徑 ),接下來學習 繪製文字 和 繪製圖片 上一篇文章,沒看的有必要先了解一下: 自定義控制元件(一)Paint,Canvas 基礎用
WPF自定義控制元件(一)の控制元件分類
原文: WPF自定義控制元件(一)の控制元件分類 一、什麼是控制元件(Controls) 控制元件是指對資料和方法的封裝。控制元件可以有自己的屬性和方法,其中屬性是控制元件資料的簡單訪問者,方法則是控制元件的一些簡單而可見的功能、控制元件建
WPF自定義控制元件(四)の自定義控制元件
原文: WPF自定義控制元件(四)の自定義控制元件 在實際工作中,WPF提供的控制元件並不能完全滿足不同的設計需求。這時,需要我們設計自定義控制元件。 這裡LZ總結一些自己的思路,特性如下: Coupling UITemplate Behaviour Function Package
WPF自定義控制元件(五)の使用者控制元件(完結)
原文: WPF自定義控制元件(五)の使用者控制元件(完結) 使用者控制元件,WPF中是繼承自UserControl的控制元件,我們可以在裡面融合我們的業務邏輯。 示例:(一個厭惡選擇的使用者控制元件) 後端: using iMicClassBase; using iMicClassBase.B
自定義控制元件(顏色由綠色過渡到紅色的控制元件)
先寫一個顏色的過度(由綠色過度到紅色) **自定義控制元件的程式碼部分** public class OneView extends View { private Paint paint; private Canvas mConvas;
自定義控制元件(14)---ViewGroup繪製的Padding、margin注意
ViewGroup測量子元素有關,其中measureChildWithMargins和measureChildren類似只是加入了對Margins外邊距的處理,ViewGroup提供對子元素測量的方法從measureChildren開始: measureChildren的邏
Qt之自定義控制元件(開關按鈕)
簡述 接觸過iOS系統的童鞋們應該對開關按鈕很熟悉,在設定裡面經常遇到,切換時候的滑動效果比較帥氣。 通常說的開關按鈕,有兩個狀態:on、off。 下面,我們利用自定義控制元件來實現一個開關按鈕。 原理 重寫滑鼠按下事件(mousePres
編寫Qt Designer自定義控制元件(二)——編寫自定義控制元件介面
既然是控制元件,就應該有介面,預設生成的控制元件類只是一個繼承了QWidget的類,如下: #ifndef LOGLATEDIT_H #define LOGLATEDIT_H #include <QWidget> class LogLat
WPF -- 自定義控制元件 (概述)(一)
CustomControl, 其開發出來的控制元件才真正具有WPF風格,其對模板樣式有著很好的支援,這是因為打造CustomControl時做到了邏輯程式碼與外觀相分離,即使換上一套完全不同的視覺樹其同樣能很好的工作,就像WPF內建的控制元件一樣.在使用Visual Studio打造控制元件時,UserCon
Android自定義控制元件(二)-給自定義控制元件新增事件
在這篇部落格中主要講解給Android自定義控制元件新增點選事件,實現可以按住百分比圓圈在螢幕上進行拖動圓圈的功能。分兩部分講,第一部分是獲取自定義控制元件的座標,第二部分是重新繪製控制元件。 第一部分:獲取自定義控制元件座標 首先看一張圖,這是自定義控制元件中獲
自定義控制元件不顯示,,,,,,填坑
自定義控制元件分為繼承View和繼承ViewGroup,兩者不同。 1、繼承View 必須重寫 onLayout() 、onDraw() 因為View相當於沒什麼形狀的控制元件,需要你去重寫onDraw() 去自己畫出來。重寫onLayout() 為了指定 畫在哪裡。 2
自定義控制元件之圓形顏色漸變進度條--SweepGradient
前幾天在群裡面有人找圓形可顏色漸變進度條,其中主要的知識點是SweepGradient;(要看具體需要的漸變效果,LinearGradient線性漸變也是可以的,例如Settings內的電量介面的圓形電量進度WrapCircleVIew) mSweepGradient = n
Android實戰簡易教程-第六十九槍(自定義控制元件實現雪花飄落效果)
現在APP要求越來越高了,不只是要求實現功能,顏值的要求也越來越高,下面我們通過自定義控制元件來實現雪花飄落的效果,可以作為介面背景哦。1.自定義控制元件:package com.test.a; import java.util.Random; import androi
自定義控制元件(6)---PorterDuffXfermode圖形過濾器之橡皮擦應用
activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schema
WPF -- 自定義控制元件 (UserControl)(二 上)
在這裡我們將將打造一個UserControl(使用者控制元件)來逐步講解如何在WPF中自定義控制元件,並將WPF的一些新特性引入到自定義控制元件中來. 我們製作了一個帶語音報時功能的鐘表控制元件, 效果如下: 在VS中右鍵單擊你的專案,點選"新增新專案",在出現的選擇列表中選
自定義控制元件(Dialog篇)
自定義控制元件實現方式 本文中初步討論了關於原生Dialog實現方式,自定義Dialog樣式實現以及注意細節 基於Android Studio API 23開發 - 原生Dialog三種樣式實現方式 - 自定義Dialog實現方式 - 結束語
編寫Qt Designer自定義控制元件(一)——如何建立並使用Qt自定義控制元件
http://blog.csdn.net/giselite/article/details/12622429 在使用Qt Designer設計窗體介面時,我們可以使用Widget Box裡的窗體控制元件非常方便的繪製介面,比如拖進去一個按鈕,一個文字編輯器等。雖然Qt Designer裡的控制元