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

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 程式設計也屬於計算機圖形學中乙個重要的部分。接下來讓我們...