1. 程式人生 > >Canvas畫圖設定漸變色

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();

效果圖:看後面背景


程式碼初步是在BarChartRenderer.class中做了修改。並且在 BaseDataSet.class中添加了兩個介面
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