GDI繪製Winform工作流元件、具有獨立圖層的增刪處理、防PPT效果

真有意思發表於2021-11-19

最近接了個小專案10K。用了2個下班時間寫完,共花費了6-7個小時完成。如有同類需求的可以與本人聯絡,QQ:120772981

功能目標:

需要寫一個仿PPT畫泳道圖的元件。之前寫過工作流的元件,其實這個跟工作流元件基本一樣,所以寫這個也得心應手。PPT的效果圖如下,

 

在C#winform裡面想要及支援手動拖拽又要只支援自定義的一些功能, 很會想到拖拽控制元件,控制元件直接放圖片不就的了嗎?這樣也可以, 但後續控制元件元素越來越大的時候,可能會出現控制元件閃屏,嚴重的可能效能都跟不上,再有如果使用者需要放大和縮小,裡面有幾百個元素,是不是很崩潰。 

隨著元素的增加以及使用者的操作邏輯增加,可能會直至跟不上使用者操作的節奏 。會很託執行效率。

結合自己的經驗,採用GDI繪圖,設計思路就是將所有元素都有獨立的圖層。 使用者可自定義圖層,繪製自定義圖層內容,支援對目標圖層元素的移動、放大縮小,置頂和置底顯示等功能。同時這個元件支援匯出JSON圖層元素資料,並將Json資料載入還原圖形顯示等功能。

估計是多年經驗,寫起來這個設計思想有得到了進一步的昇華。感覺用這個思想寫photoshop問題不大(我吹牛B呢,沒費用搞起來沒啥意義。)。

具體實現介面如下:

1、矩形框

首先我們數帶圓角的元件 使用者的矩形框追加圓角屬性,搞B/S方面的同學應該都知道CornerRadius或Radius 是圓角屬性,如果我們採用圖片的方式,在拉伸的時候圖形元素就會產生嚴重變形。所以我們通過

原始的GDI加能夠很好的解決這個問題,

 

 

 

通過滑鼠可任意移動圖層位置,同時,通過鍵盤上、下、左、右按鍵使用者也能夠最圖層進行微調。

針對很多開發者說GDI繪圖慢的問題, C# 的GDI繪圖本身並不慢,慢的根本原因還是在於能力不足所致。找找自身程式碼原因,有些繪圖能區域性重新整理,就自己應該刷那就刷哪,你非得全刷,再有你的處理明明已經阻塞了你還要繼續同步執行。不慢才怪。目前我的這個元件放100個圖層,滑鼠任意拖拽任意移動,CPU佔用率不足5%。 

最後你來個總結,c# GDI不行。建議別聽風是雨。先深入瞭解一下他的機制。 最主要的就是這個繪圖設計思想。

對於這個元件支援文字自動換行。設定字型顏色,邊框顏色以及裡面的背景顏色。

外邊框的四個小放款是放大和所有按鈕。滑鼠點選是追加了ReSize游標,提升使用者指導性操作。

 

 

1、判斷框

跟矩形框相同,使用者也可以對其進行移動、調節尺寸,設定輸入內容、設定邊框顏色,背景顏色,字型大小,字型顏色等屬性。

 

 

 每個圖形元素都是一個獨立的圖層,使用者可以對其設定置頂,和置底。如下圖:

 

 置於底層

 

 

3、文件框

 所有的基礎屬性都整合一個基類元素,基類元素均包含以下操作, 使用者也可以對其進行移動、調節尺寸,設定輸入內容、設定邊框顏色,背景顏色,字型大小,字型顏色等屬性。

 

 

 4、平行四邊形框

 

5、泳道圖層

 

相關文章