Canvas畫圖設定漸變色
1、線形圖設定填充色為漸變色方法:
漸變色圖片:/** * Draws the provided path in filled mode with the provided drawable. * * @param c * @param filledPath * @param drawable */ protected void drawFilledPath(Canvas c, Path filledPath, Drawable drawable) { if (clipPathSupported()) { c.save(); c.clipPath(filledPath); drawable.setBounds((int) mViewPortHandler.contentLeft(), (int) mViewPortHandler.contentTop(), (int) mViewPortHandler.contentRight(), (int) mViewPortHandler.contentBottom()); drawable.draw(c); c.restore();//在canvas上設定漸變色圖片 } else { throw new RuntimeException("Fill-drawables not (yet) supported below API level 18, " + "this code was run on API level " + Utils.getSDKInt() + "."); } }
最終效果:
具體程式碼參見:MPChartLibrary開源專案中的LineRadarRenderer.class類
2、為canvas背景設定漸變色
final Drawable drawable = dataSet.getFillDrawable(); c.save(); drawable.setBounds((int) mViewPortHandler.contentLeft(), (int) mViewPortHandler.contentTop(), (int) mViewPortHandler.contentRight(), (int) mViewPortHandler.contentBottom()); drawable.draw(c); // mRenderPaint.setColor(dataSet.getColor()); for (int j = 0; j < buffer.size(); j += 4) { if (!mViewPortHandler.isInBoundsLeft(buffer.buffer[j + 2])) continue; if (!mViewPortHandler.isInBoundsRight(buffer.buffer[j])) break; c.drawRect(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2], buffer.buffer[j + 3], mRenderPaint); if (drawBorder) { c.drawRect(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2], buffer.buffer[j + 3], mBarBorderPaint); } } c.restore();
效果圖:看後面背景
大致是這樣的修改的。具體可再優化。public Drawable getFillDrawable() { return mFillDrawable; } /** * Sets the drawable to be used to fill the area below the line. * * @param drawable */ @TargetApi(18) public void setFillDrawable(Drawable drawable) { this.mFillDrawable = drawable; }
3、為柱狀圖每個元素設定漸變色
for (int j = 0; j < buffer.size(); j += 4) {
if (!mViewPortHandler.isInBoundsLeft(buffer.buffer[j + 2]))
continue;
if (!mViewPortHandler.isInBoundsRight(buffer.buffer[j]))
break;
//設定柱狀圖的顏色為漸變色
LinearGradient linearGradient = new LinearGradient(0, 0, 0, 2000,Color.GREEN, Color.WHITE, Shader.TileMode.CLAMP);
mRenderPaint.setShader(linearGradient);//目標Paint即為繪製柱的Paint
c.drawRect(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2],
buffer.buffer[j + 3], mRenderPaint);
if (drawBorder) {
c.drawRect(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2],
buffer.buffer[j + 3], mBarBorderPaint);
}
}
效果圖:
程式碼初步是在BarChartRenderer.class中做了修改。
相關推薦
Canvas畫圖設定漸變色
1、線形圖設定填充色為漸變色方法: /** * Draws the provided path in filled mode with the provided drawable. * * @param c * @param filledPath * @param
qt 使用樣式設定漸變色背景
qt中使用樣式設定漸變色背景 setStyleSheet()函式設定背景的前期是設定的視窗控制元件有父視窗 ui.widget->setStyleSheet("background-color:qlineargradient(spread:pad, x1:0,
RcButton按鈕控制元件,可設定漸變色和懸停圖片
namespace Controls { using System; using System.ComponentModel; using System.Drawing; using System.Drawing.Drawing2D; using System
iOS中Navbar設定漸變色效果
- (void) viewWillAppear:(BOOL)animated{ [super viewWillAppear:animated]; //狀態列高亮 self.navigationController.navigatio
藉助 CAGradientLayer 可以設定漸變色的屬性 實現蘇寧易購首頁導航欄的效果
實現如標題所示的功能使用的核心程式碼如下 //初始化漸變層 self.gradientLayer = [CAGradientLayerlayer]; self.gradientLayer.frame = CGRectMake(0, 0, self.view.frame
echarts如何給柱狀圖設定漸變色
在series 的 itemStyle 裡面進行設定color的屬性值, itemStyle: { normal: { color: new echarts.graphic.Linear
CSS漸變色邊框,解決border設定漸變後,border-radius無效的問題
需求:用css設定漸變邊框 通過border-image來實現漸變色邊框 <div class="content"></div> .content { width: 100px; height: 100px; border:10px
MATLAB plot()、scatter()的RGB顏色設定以及生成漸變色
1.轉載:https://blog.csdn.net/wh1312142954/article/details/80796764 plot(x,y,'Color',[R G B]);%只要設定顏色中RGB的值就可以得到不同的顏色。 2.轉載:https://blog.csdn.net/gu
html5 canvas 標籤繪製圖像且漸變色處理
html5 提供了很多很強大的功能,有些功能甚至可以擺脫伺服器的限制,減少對伺服器的訪問。canvas就是一個html5 新增的強大標籤。雖然功能有待完善,但已然可以解決一些網頁問題。 今天主要講ca
利用css3給座右銘設定漂亮的漸變色
1 .footer-container .footer-content p .motto { 2 font-weight: bolder; 3 -webkit-background-clip: text; 4 -webkit-text-fill-color: transpa
iOS-設定圖片漸變色
淘寶電商類圖片漸變設定 .h檔案 typedef NS_ENUM(NSUInteger, GradientType) { GradientTypeTopToBottom = 0,//從上到下 GradientTypeLeftToRight = 1,//從左到右
div背景顏色設定成漸變色
小例子: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditP
hicharts 漸變色主題設定
Highcharts.theme = { colors: ['#50B432','#058DC7', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'], cha
HTML5 canvas帶漸變色的圓形進度條動畫
query-circle-progress是一款帶漸變色的圓形進度條動畫特效jQuery外掛。該圓形進度條使用的是HTML5 canvas來繪製圓形進度條及其動畫效果,進度條使用漸變色來填充,效果非常的酷。
漸變色canvas-微信小程式
效果圖如下: index.js Page({ /** * 頁面的初始資料 */ data: { windowWidth:null, windowHeight:null, }, /** * 生命週期
HTML5 canvas圖形繪製基礎(矩形,線條,漸變色,圓形,圖片,多邊形)
<!DOCTYOE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ margin-lef
高德地圖和canvas畫圖結合應用的一些感想(一)
記錄 src function lose poi pan 高德 工程師 根據地 之前朋友委托有個創業項目,想讓我幫忙,正好那段時間有點閑,半推半就中就答應下來了。 入了團隊才發現,該項目前後端分離,後端工程師已就位主要實現接口,IOS端工程師也已就位,還差一個web
華為項目Tree canvas畫圖 數據2
依賴關系 組件 sse nging struct 之間 ria int semi "name": "Structure","children": [{"description_en": "Indicates the overall dissemination cost of
html5之canvas畫圖 1.寫字板功能
load har line client ctype 監聽事件 tle ntb csdn 寫字板事例: 寫字板分析:1.點擊鼠標開始寫字(onmosedown)2.按下鼠標寫字(onmousemove)3.松開鼠標,停下寫字(
C# Winform 用paint事件實現漸變色
win cxx vertica gpu ++ opc 顏色 分享 mvp 首先創建一個窗體Form1,進入代碼頁面,在前面添加一行代碼 using System.Drawing.Drawing2D; 引用繪圖類。 回到Form1的設計頁面,打開屬性頁面,進入事件列表,找到P