繪製管道並新增水流動效果

2022-05-10 18:08:28 字數 3375 閱讀 5231

最近專案上使用sliverlight製作動畫效果,下面是繪製自來水管道並新增流水效果,給大家分享一下。

動態效果                                      效果截圖

用inkpresenter作為容器,在其上的繪製line。

1

"layoutroot

" background="

white

">2"

inkpresenter

">3"

20" x:name="

line1

" y1="

52" x2="

100" y2="

50" stroke="

red" strokethickness="

7" />4"

100" x:name="

line2

" y1="

47" x2="

100" y2="

130" stroke="

red" strokethickness="

7" />56

7

用line的strokedasharray屬性繪製線的虛線效果,可以根據需求適當調整線段的大小。

line1.strokedasharray.add(5

);line1.strokedasharray.add(2);

新增乙個執行緒,執行緒裡改變strokedashoffset屬性,讓虛線的位置隨時間變化,看起來就像水在流動了。

///

///支路流動動畫效果

/// private

void

channlthreadstart()

));thread.sleep(

100);//掛起時間

} });

p_th.isbackground = true;//

設定執行緒為後台執行緒

p_th.start();

//執行緒開始

}

當然別忘了在初始化時加入呼叫channlthreadstart()方法。

首先加入line的漸變樣式,分為垂直和水平兩種漸變方式。

<

usercontrol.resources

>

<

style

x:key

="linestaticredh"

targettype

="line"

>

<

setter

property

="opacity"

value

="0.7"

/>

<

setter

property

="stroke"

>

<

setter.value

>

<

lineargradientbrush

endpoint

="0.5,1"

startpoint

="0.5,0"

>

<

gradientstop

color

="red"

offset

="0.948"

/>

<

gradientstop

color

="red"

offset

="0.056"

/>

<

gradientstop

color

="#8ce4efe6"

offset

="0.503"

/>

lineargradientbrush

>

setter.value

>

setter

>

style

>

<

style

x:key

="linestaticredv"

targettype

="line"

>

<

setter

property

="opacity"

value

="0.7"

/>

<

setter

property

="stroke"

>

<

setter.value

>

<

lineargradientbrush

endpoint

="1,0.5"

startpoint

="0,0.5"

>

<

gradientstop

color

="red"

offset

="0.933"

/>

<

gradientstop

color

="red"

offset

="0.111"

/>

<

gradientstop

color

="#ffe4efe6"

offset

="0.503"

/>

lineargradientbrush

>

setter.value

>

setter

>

style

>

usercontrol.resources

>

在後台**中根據現在的管道line,動態建立每個line的覆蓋層,並新增漸變效果。

line channel = new

line();

channel.x1 =line1.x1;

channel.x2 =line1.x2;

channel.y1 =line1.y1;

channel.y2 =line1.y2;

channel.strokethickness =line1.strokethickness;

channel.style =channelstyleredh;

this.inkpresenter.children.add(channel);

好了,大功告成。當然如果inkpresenter中的線段很多的話,可以迴圈inkpresenter.children,判斷如果是line形狀的話,則後台**中動態加入管道覆蓋效果。

Opencv繪製曲線,並新增標註

include draw.h include stdio.h using namespace cv void draw route const double c 2 int shortest route for int i 0 i 30 i 畫線 point p1 c shortest route ...

CGAL 繪製Power Diagram並顯示

這些 用的挺頻繁的,梳理一下便於日後檢視。macos clion編譯器 確保您基本掌握cgal與opengl 注意輸入的是weight point您的權重應該確保足夠大 日期 2018 8 10 聯絡 sdudzy 163.com include include include include in...

unity繪製管道 Unity 之渲染管線初探

unity 是一款跨平台的 3d 引擎,有著強大的渲染功能,並主要用於遊戲開發。談到 unity 的渲染功能,我們不得不提及到著色器 shader 3d 遊戲引擎中最重要的乙個因素 它在遊戲效果以及畫面顯示方面起到了決定性的作用。shader 程式設計也屬於計算機圖形學中乙個重要的部分。接下來讓我們...