Flutter實現截圖元件封裝

2021-10-09 12:52:15 字數 3880 閱讀 8847

用到的螢幕截圖外掛程式(外掛程式的用法大家參考該外掛程式文件):

screenshot: ^0.2.0
封裝思路

手勢如何操作執行截圖呢? -> gesturedetector

多子葉布局用什麼?考慮應該覆蓋,選用了stack

截圖顯示的位置應該可以顯示和隱藏,且將其放到stack最後一層 -> offstage

最後就是截圖顯示後的動畫

@override

widget build

(buildcontext context)

, child:

screenshot

( controller: screenshotcontroller,

child:

container

( width:

double

.infinity,

height:

double

.infinity,

child:

stack

( children:

[ widget.child,

positioned

( bottom: animationpadding.value,

right:20,

child:

offstage

( offstage: ishidescreenarea,

child:

container

( decoration:

boxdecoration

( color: colors.bluegrey, border: border.

all(width:1)

),width:

120,

height:

200,

child: imagefile == null

? null

: image.

file

(imagefile, fit: boxfit.fill),)

,),)

],),

),),);}

動畫想要實現跳動的感覺,用到補間物件tween和時間曲線函式物件curve.

原理 : 根據時間曲線函式我們拿到時間內不同的值,然後給顯示的元件設定padding值,從而達到移動的效果.

cure動畫效果可以參考這篇部落格:

_initanim()

);})

; curve =

curvedanimation

(parent: animationcontroller, curve: curves.bounceout)

; animationpadding =

tween

(begin:

40.0

, end:

10.0).

animate

(curve)

;}

**中設定了40 - 10的區間變化,也就是padding值會隨著時間函式在這個範圍內變化,達到移動效果.

注意:動畫開始前最好執行reset

animationcontroller.

reset()

; animationcontroller.

forward()

;

class

screenshotwidget

extends

statefulwidget);

@override

_screenshotwidgetstate createstate()

=>

_screenshotwidgetstate()

;}class

_screenshotwidgetstate

extends

state

with tickerproviderstatemixin

screenshotcontroller.

capture()

.then

((file image));

print

(imagefile.path)

; animationcontroller.

reset()

; animationcontroller.

forward()

;}).

catcherror

((onerror));

}_timerhidescreenwidget()

);})

;}_initanim()

);})

; curve =

curvedanimation

(parent: animationcontroller, curve: curves.bounceout)

; animationpadding =

tween

(begin:

40.0

, end:

10.0).

animate

(curve);}

@override

void

initstate()

@override

void

dispose()

@override

widget build

(buildcontext context)

, child:

screenshot

( controller: screenshotcontroller,

child:

container

( width:

double

.infinity,

height:

double

.infinity,

child:

stack

( children:

[ widget.child,

positioned

( bottom: animationpadding.value,

right:20,

child:

offstage

( offstage: ishidescreenarea,

child:

container

( decoration:

boxdecoration

( color: colors.bluegrey, border: border.

all(width:1)

),width:

120,

height:

200,

child: imagefile == null

? null

: image.

file

(imagefile, fit: boxfit.fill),)

,),)

],),

),),

);}}

Android 實現截圖

android實現截圖功能,使用view的方法,得到以時間戳命名的png view view v.getrootview view.setdrawingcacheenabled true view.builddrawingcache bitmap bitmap1 view.getdrawingcac...

截圖效果實現

markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文字格式編寫文件,然後轉換成格式豐富的html頁面。維基百科 使用簡單的符號標識不同的標題,將某些文字標記為粗體或者斜體,建立乙個鏈結等,詳細語法參考幫助?本編輯器支援markdown extra,擴充套件了很多好用的功能。具體請參考...

Qt實現桌面截圖

實現桌面截圖,軟體如下 圖1 桌面截圖 主要介紹乙個方法 grabwindow wid window,int x 0,int y 0,int width 1,int height 1 建立並返回乙個qpixmap,通過抓取給定視窗的內容 x y width height 引數 x y 指定視窗中的偏...