女人自慰AV免费观看内涵网,日韩国产剧情在线观看网址,神马电影网特片网,最新一级电影欧美,在线观看亚洲欧美日韩,黄色视频在线播放免费观看,ABO涨奶期羡澄,第一导航fulione,美女主播操b

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

【開發者說】開發案例:使用canvas實現圖表系列之折線圖

HarmonyOS開發者 ? 來源:未知 ? 2023-12-13 16:05 ? 次閱讀
# 開發者說 #

【開發者說】欄目是為HarmonyOS開發者提供的展示和分享平臺,在這里,大家可以發表自己的技術洞察和見解,也可以展示自己的開發心得和成果。

歡迎大家積極投稿,后臺回復【投稿】,即可獲得投稿渠道。期待你們的分享~

由于對HarmonyOS的興趣與開發需求,我已經打卡學習ArkTS語言28天了。在模擬開發歷史項目的時候,會經常需要使用到圖表這類樣式展示,我決定結合之前學習的canvas繪畫知識,自己寫一個折線圖組件,希望對各位開發者有所幫助。

功能結構

實現一個公共組件的時候,首先分析一下大概的實現結構以及開發思路,方便我們少走彎路,也可以使組件更加容易拓展,維護性更強。然后我會把功能逐個拆開來講,這樣大家才能學習到更詳細的內容。下面簡單闡述下折線圖組件的功能結構:

wKgZomV5ZvGAGzrqAABM_95KNDw782.png以上是基礎的功能結構框架,包含一些比較簡單的基礎功能,后續還有點擊觸發、動畫等功能也會規劃進去。這一期我們先實現上面這些基礎的功能,后續再慢慢拓展。

公共屬性

一個組件肯定會有一些公共的屬性作為動態參數,便于組件之間的信息傳遞,我們分別講解一下五個公共屬性的作用:
  1. 畫布的寬度(cWidth)和高度(cHeight),這個是最基本的。但是我這里控制是非必傳,默認值都是100%就可以了。

  2. 畫布的內部留白間距(cSpace)。主要是用來控制內容區與畫布外框的距離,避免繪畫的內容被截掉。

  3. 字體大小(fontSize)。主要是來控制整個繪畫內容的字體大小,全局性,避免每個小功能都需要傳字體大小。

  4. 字體顏色(color)。與字體大小的功能一致。

  5. 圖表數據(data)。用來存儲圖表內容的數組,其中name與value是必傳的。

以下是具體的代碼:


	
 // 圖表數據的特征接口
interface interface_data {
  name: string | number;
  value: string | number;
  [key: string]: any;
}


// 圖表的特征接口
interface interface_option {
  cWidth?: string | number,
  cHeight?: string | number,
  fontSize?: string | number,
  color?: string,
  cSpace?: number,
  data?: interface_data[]
}


// option 默認值
const def_option: interface_option = {
  cWidth: '100%',
  cHeight: '100%',
  fontSize: 10,
  color: '#333',
  cSpace: 20,
  data: []
}


@Component
export struct McLineChart {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State options: interface_option = {}
  aboutToAppear() {
    this.options = Object.assign({}, def_option, this.options)
  }
  build() {
    Canvas(this.context)
      .width(this.options.cWidth)
      .height(this.options.cHeight)
      .onReady(() => {
        
      })
  }
}
(左右滑動查看更多)

繪畫坐標軸

繪畫圖表內容區部分,首先是繪畫坐標軸,坐標軸分為X軸跟Y軸,我們要先開始畫Y軸,原因是:y軸上要顯示文本標簽,如果一開始沒有得到文本標簽對應的寬度最大值,那么Y軸跟X軸的起點坐標就會有偏差,會導致繪畫全部錯位,下圖是完整的坐標軸的效果。

wKgZomV5ZvGAbMiTAAAlHkuEnbc035.png

1.繪畫Y軸

Y軸整體是由軸線、分割線、刻度線、文本標簽四個部分組成的,四個部分都有先后關系,而且包含一定的算法邏輯,下面簡單用一個概念圖進行講解。

wKgZomV5ZvGASmFWAAA3pYDyH9Y940.png

首先用500*500的矩形作為我們這次的畫布,我們可以在圖上看到Y軸整體包含了文本標簽、Y軸線、分割線、刻度線四個部分。而canvas繪畫基本都是通過坐標來定位的,Y軸整體的四個部分的起點與結束坐標都互相有關系,甚至需要把內部間距、分割間距、y軸線高度、文本最大的寬度四個屬性計算在內。以上是概念與思路,接下來我們逐一講解代碼:

1、計算得到文本最長寬度(maxNameW),我們可以從圖中看到,不論是y軸線、刻度線還是分割線的起點坐標都是需要內容間距、文本標簽、文本標簽與分割線間隔相加計算得到,而為了保持對齊,所以我們需要計算出文本最長寬度。而y軸的文本一般都是數據(data)對應的數值,所以我們需要得到傳入數據(data)中的最大值。然后講最大值分割成五等分。以下就是計算獲取最大文本寬度的代碼,部分邏輯我也會寫在代碼上:


	
build() {
    Canvas(this.context)
      .width(this.options.cWidth)
      .height(this.options.cHeight)
      .backgroundColor(this.options.backgroundColor)
      .onReady(() => {
        const values: number[] = this.options.data.map((item) => Number(item.value || 0))
        const maxValue = Math.max(...values)
        let maxNameW = 0
        let cSpiltNum = 5 // 分割等分
        let cSpiltVal = maxValue / cSpiltNum // 計算分割間距
        for(var i = 0; i <= this.options.data.length; i++){
          // 用最大值除于分割等分得到每一個文本的間隔值,而每一次遍歷用間隔值乘于i就能得到每個刻度對應的數值了,計算得到得知需要保留整數且轉成字符串
          const text = (cSpiltVal * i).toFixed(0)
          const textWidth = this.context.measureText(text).width; // 獲取文字的長度
          maxNameW = textWidth > maxNameW ? textWidth : maxNameW // 每次進行最大值的匹配
        }
      })
}

左右滑動查看更多

2、繪畫文本標簽,我們可以從圖中看到文本標簽的x坐標只跟內部間距有關,而且我們從上面代碼就已經得到每個刻度的分割間距了,從而可以得到每個文本的y軸。


	
.onReady(() => {
   ....
   for(var i = 0; i <= this.options.data.length; i++){
     ...
     // 繪畫文本標簽
     this.context.fillText(text, this.options.cSpace, cSpiltVal * (this.options.data.length - i) + this.options.cSpace , 0);
   }
})

左右滑動查看更多

3、繪畫刻度線。我們可以從概念圖得到,刻度線的起點x坐標算法是:內部間距(cSpace)加最長文本寬度(maxNameW)加上文本與刻度線的間距,起點y坐標則跟文本一樣,通過分割間距與下角標的關系得到每個刻度的y坐標;而終點x坐標則是刻度線的長度,終點y坐標則跟起點的y坐標一樣,我設置默認長度是5,這樣就能得到我們的刻度線了。代碼如下:


	
.onReady(() => {
  ....
  const length = this.options.data.length
  for(var i = 0; i <= length; i++){
    ...
  }
  // 上面是獲取最長文本寬度的代碼
  // 畫線的方法
  function drawLine(x, y, X, Y){
    this.context.beginPath();
    this.context.moveTo(x, y);
    this.context.lineTo(X, Y);
    this.context.stroke();
    this.context.closePath();
  }
  for(var i = 0; i <= length; i++){
    const item = this.options.data[i]
    // 繪畫文本標簽
    ctx.fillText(text, this.options.cSpace,  cSpiltVal * (this.data.length - i) + this.options.cSpace, 0);
    // 內部間距+文本長度
    const scaleX = this.options.cSpace + maxNameW
    // 通過數據最大值算出等分間隔,從而計算出每一個的終點坐標
    const scaleY = cSpiltVal * (length - i) + this.options.cSpace
    // 這里的5就是我設置文本跟刻度線的間隔與刻度線的長度
    drawLine(scaleX, scaleY, scaleX + 5 + 5, scaleY);
  }
})

左右滑動查看更多

4、繪畫y軸線。繼續分析概覽圖,從圖中我們可以得到:y軸線的起點x坐標的算法是:內部間距(cSpace)加最長文本寬度(maxNameW)加上文本與刻度線的間距以及刻度線長度,起點y坐標則是內部上間距;而終點x坐標與起點x坐標相同,終點y坐標算法是:畫布高度減去上下兩邊的內部間距。通過以上計算關系就能繪畫出y軸線了。代碼如下:


	
.onReady(() => {
  ...
  // 上面是繪畫其他組成部分代碼
   const startX = this.options.cSpace + maxNameW + 5 + 5
   const startY = this.options.cSpace
   const endX = startX
   const endY = this.context.height - (this.options.cSpace * 2)
   drawLine(startX, startY, endX, endY); // 繪畫y軸
})

左右滑動查看更多

5、繪畫分割線。其實從圖中可以看出分割線與刻度線差不多,起點x坐標算法是:在刻度線起點x坐標基礎上加刻度線長度;起點y軸與刻度線相同。而終點的x坐標算法:畫布寬度減去起點x坐標;終點的y坐標與起點的y坐標相同。具體代碼如下:


	
.onReady(() => {
  ....
  // 上面是獲取最長文本寬度的代碼
  for(var i = 0; i <= length; i++){
    const item = this.options.data[i]
    // 繪畫文本標簽跟刻度
    ...
    // 繪畫分割線
    const splitX = scaleX + 5 + 5
    const splitY = scaleY
    drawLine(splitX, splitY, this.context.width - splitX - this.options.cSpace, splitY);
  }
})

左右滑動查看更多

2.繪畫X軸

繪畫完Y軸之后,我們接著繪畫X軸, X軸與Y軸繪畫邏輯一致,只是方向不同而已。具體的算法就不一一詳解,可以參考一下概念圖。

wKgZomV5ZvGAABuzAABKE6UgmGg938.png

而與繪畫Y軸不一致的在于:

  1. 最長對象不一樣。Y軸最長是文本寬度;而X軸需要獲取的最長是文本高度。

  2. 間隔分割數不一樣。Y軸是自定義的分割數;而X軸分割線是實際數據的長度。

  3. 分割間距長度算法不一樣。Y軸算法是用數據最大值處于自定義的分割數;而X軸算法是用畫布寬度減去(左右兩邊的內部間隙以及Y軸寬度(文本最長寬度加上刻度線寬度)),再除去數據的長度,得到每個間隔的長度。

除了上面三點需要注意的,其他的就是調換一下計算的位置。X軸整體的代碼如下:


	
.onReady(() => {
  const cSpace = this.options.cSpace
  // 上面是繪制y軸的代碼
  ....
  // 繪制x軸
  // 獲取每個分割線的間距:this.context.width - 20為x軸的長度
  let xSplitSpacing = parseInt(String((this.context.width - cSpace * 2 - maxNameW) / this.options.data.length))
  let x = 0;
  for(var i = 0; i <= this.options.data.length; i++){
    // 繪畫分割線
    x = xSplitSpacing * (i + 1) // 計算每個數值的x坐標值
    this.drawLine(x + cSpace + maxNameW, this.context.height - cSpace, x + cSpace + maxNameW, cSpace);
    // 繪制刻度
    this.drawLine(x + cSpace + maxNameW, this.context.height - cSpace, x + cSpace + maxNameW, this.context.height - cSpace);
    // 繪制文字刻度標簽
    const text = this.options.data[i].name
    const textWidth = this.context.measureText(text).width; // 獲取文字的長度
    // 這里文本的x坐標需要減去本身文本寬度的一半,這樣才能居中顯示, y坐標這是畫布高度減去內部間距即可
    this.context.fillText(text, x + cSpace + maxNameW - textWidth / 2, this.context.height - cSpace, 0);
  }
this.context.save();
  this.context.rotate(-Math.PI/2);
  this.context.restore();
})
左右滑動查看更多

繪畫折線區

繪畫完坐標軸之后,就可以來繪畫折線區的內容了。也是整個畫布重點的部分。折線區分為三個部分:繪畫折線、繪畫標點、繪畫文本。

1.繪畫折線

wKgZomV5ZvGAa7PUAABP1Dqu08o709.png

從上面的圖可以看出折線直接就是把實際數據的數值轉成x跟y坐標,再通過連線連接起來。而每一個轉折點的x坐標算法跟x軸的刻度或者文本是一樣的,而y坐標是實際數值通過一定算法轉成我們需要的高度。x坐標我們已經獲取了,只要是攻克我們的y坐標即可。可以通過圖來觀察一下在畫布中與實際數據的關系:

wKgZomV5ZvKAKO0ZAABZX6Uc3Q8134.png

首先Y軸的高度代表的是實際數據的最大值,這個我們繪畫Y軸的時候就得到的結果,那我們則可以算出Y軸高度與實際數據的縮放倍數(scale),而折線的的每個y坐標對應的也是實際數值,需要把實際數值轉換成畫布中高度,那么就用實際數值乘與剛剛得到的縮放倍數(scale)就能得到轉化后的高度了。

雖然我們已經得到每個轉折點縮放后的高度,但是如果要跟Y軸坐標一一對應的y坐標的畫,還需要用畫布的高度減去下邊內部高度加x軸高度,再減去縮放后的實際高度。這樣算出來的才是我們想要的y坐標值,大概算法關系已經知道了,以下是最終代碼:
.onReady(() => {
  ...
  // 上面是繪制x軸跟y軸的代碼
  // 繪畫折線
  const ySacle = (this.context.height - cSpace *2) / maxValue // 計算出y軸與實際最大值的縮放倍數
  //連線
  this.context.beginPath();
  for(var i=0; i< this.options.data.length; i++){
    const dotVal = String(this.options.data[i].value);
    const x = xSplitSpacing * (i + 1) + cSpace + maxNameW // 計算每個數值的x坐標值
    const y = this.context.height - cSpace - parseInt(dotVal * ySacle); // 畫布的高度減去下邊內部高度加x軸高度,再減去縮放后的實際高度
    if(i==0){
      // 第一個作為起點
      this.context.moveTo( x, y );
    }else{
      this.context.lineTo( x, y );
    }
  }
  ctx.stroke();
})

左右滑動查看更多

2.繪畫標點、文本標簽

畫完折線我們基本能得到很多東西,比如折線上每個轉折點的x跟y坐標值。這樣對我們繪畫標點與文本標簽就很方便了:

.onReady(() => {
  ...
  // 上面是繪制x軸跟y軸的代碼
  // 繪畫折線
  const ySacle = (this.context.height - cSpace *2) / maxValue // 計算出y軸與實際最大值的縮放倍數
  this.context.beginPath();
  for(var i=0; i< this.options.data.length; i++){
    // 繪畫折線代碼
    ...
    // 繪制標點
    drawArc(x, y);
    // 繪制文本標簽
    const textWidth = this.context.measureText(dotVal).width; // 獲取文字的長度
    const textHeight = this.context.measureText(dotVal).height; // 獲取文字的長度
    this.context.fillText(dotVal, x - textWidth / 2, y - textHeight / 2); // 文字
  }


  function drawArc( x, y ){
    this.context.beginPath();
    this.context.arc( x, y, 3, 0, Math.PI*2 );
    this.context.fill();
    this.context.closePath();
  }
  this.context.stroke();
})

左右滑動查看更多

最終效果如下:wKgZomV5ZvKAcrV8AABTPnN5Lfc164.png

總結

以上是本次技術分析,希望能對大家有所啟發,也祝愿各位開發者能開發出理想的效果,后續我們會把chart相關系列的組件封裝到組件庫發布到市場上,這樣可以直接開箱即用了。敬請期待吧,后續還有很多技術的分享,不要錯過!


聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • HarmonyOS
    +關注

    關注

    79

    文章

    2054

    瀏覽量

    32168

原文標題:【開發者說】開發案例:使用canvas實現圖表系列之折線圖

文章出處:【微信號:HarmonyOS_Dev,微信公眾號:HarmonyOS開發者】歡迎添加關注!文章轉載請注明出處。

收藏 人收藏

    評論

    相關推薦
    熱點推薦

    開鴻Bot系列:為開源鴻蒙開發者而生!

    昨日,深開鴻正式宣布,開鴻Bot系列產品——開鴻BotBook與開鴻BotMini全面開啟預售。該系列面向開源鴻蒙開發者量身打造,搭載基于OpenHarmony深度定制的KaihongOS桌面
    的頭像 發表于 05-16 16:06 ?318次閱讀
    開鴻Bot<b class='flag-5'>系列</b>:為開源鴻蒙<b class='flag-5'>開發者</b>而生!

    為開源鴻蒙開發者而生,開鴻Bot系列今日預售啟動

    操作系統,實現從國產高性能芯片到操作系統的全棧自主化,構建起一站式的開源鴻蒙學習與開發平臺。 融合開發與辦公場景,打造開源鴻蒙生態的“第一站” 作為“開發者平臺+輕辦公終端”的融合產品
    的頭像 發表于 05-15 14:12 ?192次閱讀
    為開源鴻蒙<b class='flag-5'>開發者</b>而生,開鴻Bot<b class='flag-5'>系列</b>今日預售啟動

    Java開發者必備的效率工具——Perforce JRebel是什么?為什么很多Java開發者在用?

    Perforce JRebel是一款Java開發效率工具,旨在幫助java開發人員更快地編寫更好的應用程序。JRebel可即時重新加載對代碼的修改,無需重啟或重新部署應用程序,就能讓開發者即時看到代碼更改的效果,從而縮短
    的頭像 發表于 04-27 13:44 ?164次閱讀
    Java<b class='flag-5'>開發者</b>必備的效率工具——Perforce JRebel是什么?為什么很多Java<b class='flag-5'>開發者</b>在用?

    基于鴻蒙原生ArkTS語法開發圖表組件--柱狀圖

    大家好,我是陳楊。在上一篇文章中,我簡要介紹了折線圖實現邏輯,并解釋了整體圖表的繪制規則。根據這些規則,我們還可以繪制更多種類的圖表組件。在本期中,我將講解如何
    的頭像 發表于 03-16 16:01 ?390次閱讀
    基于鴻蒙原生ArkTS語法<b class='flag-5'>開發</b>的<b class='flag-5'>圖表</b>組件--柱狀圖

    【McCharts】基于鴻蒙ArkTS語法開發圖表組件--折線圖

    ;#039;./db/bd_demo') // 從開發者平臺下載對應的js配置文件,放在對應的函數目錄根目錄下// 加載憑證文件,憑證文件也是在開發者平臺下載,具體看我的截圖let
    發表于 03-15 15:27

    開源啦!!!基于鴻蒙ArkTS封裝的圖表組件《McCharts》,大家快來一起共創

    會分享相關的ArkTS技術 組件的完成進度已經基本完成的組件有:折線圖、柱狀圖、餅圖、散點圖。這幾個是已經可以直接使用,如果遇到問題可以在GitHub上提issues,也可以在群里問。 正在開發的有
    發表于 03-15 15:21

    云端AI開發者工具的核心功能

    當今,云端AI開發者工具已成為推動科技創新與行業升級的重要力量。那么,云端AI開發者工具有哪些核心功能呢?下面,AI部落小編帶您深入探討。
    的頭像 發表于 02-28 11:46 ?371次閱讀

    AI開發平臺如何賦能開發者

    當下,AI開發平臺通過提供豐富的工具集、優化的開發環境以及高效的部署能力,極大地降低了AI應用的開發門檻,加速了創新步伐。那么,AI開發平臺如何賦能
    的頭像 發表于 01-17 14:47 ?323次閱讀

    開發者的開源鴻蒙故事

    近日,在以“一切為了開發者”為主題的“2024開放原子開發者大會暨首屆開源技術學術大會”上,開源鴻蒙5.0 Release版本正式發布,備受各方關注。該版本在系統完備度、分布式創新、開發者體驗以及系統穩定性等方面均
    的頭像 發表于 01-06 10:28 ?659次閱讀

    《HarmonyOS第一課》煥新升級,賦能開發者快速掌握鴻蒙應用開發

    應用集成與開發能力,能夠獨立完成復雜任務及擁有團隊組織能力。 主題課程則聚焦前沿應用開發主題和實踐,如應用UX體驗標準、實時語音與文本互轉、賬戶能力集成等應用核心功能的開發,助力開發者
    發表于 01-02 14:24

    云端AI開發者工具怎么用

    云端AI開發者工具通常包括代碼編輯器、模型訓練平臺、自動化測試工具、代碼管理工具等。這些工具不僅降低了AI開發的門檻,還極大地提高了開發效率和模型性能。下面,AI部落小編為您介紹云端AI開發者
    的頭像 發表于 12-05 13:31 ?451次閱讀

    宣布 RISE RISC-V 開發者表彰試點計劃:賦能開發者拓展 RISC-V 影響力

    我們一直在尋找加強RISC-V架構和擴大其在軟件生態系統中應用的方法。為進一步實現這個愿景,我們很高興地宣布啟動RISC-V開發者表彰試點計劃[1],旨在表彰和支持為將RISC-V打造成所有項目
    的頭像 發表于 10-15 08:08 ?490次閱讀
    宣布 RISE RISC-V <b class='flag-5'>開發者</b>表彰試點計劃:賦能<b class='flag-5'>開發者</b>拓展 RISC-V 影響力

    KaihongOS 4.1.2開發者預覽版正式上線,誠邀開發者免費試用!

    深開鴻在2024開放原子開源生態大會上正式宣布KaihongOS4.1.2開發者預覽版全面上線,并向全球開發者開放免費下載。作為KaihongOS不斷創新與發展的重要里程碑,此次預覽版為開發者提供了
    的頭像 發表于 09-28 08:07 ?616次閱讀
    KaihongOS 4.1.2<b class='flag-5'>開發者</b>預覽版正式上線,誠邀<b class='flag-5'>開發者</b>免費試用!

    KaihongOS 4.1.2開發者預覽版正式上線,誠邀開發者免費試用!

    今日,深開鴻在2024開放原子開源生態大會上正式宣布KaihongOS 4.1.2開發者預覽版全面上線,并向全球開發者開放免費下載。作為KaihongOS不斷創新與發展的重要里程碑,此次預覽版為
    的頭像 發表于 09-26 15:59 ?701次閱讀

    開發者空間實踐指導:基于 3 大 PaaS 主流服務輕松實現文字轉換語音

    【摘要】 基于 CodeArts API 設計語音合成接口,基于 API Explorer 調試接口,并利用 CodeArts IDE 實現數據流轉換為音頻 案例簡介 開發者將在云主機中
    的頭像 發表于 09-13 16:25 ?700次閱讀
    <b class='flag-5'>開發者</b>空間實踐指導:基于 3 大 PaaS 主流服務輕松<b class='flag-5'>實現</b>文字轉換語音