Konva常用的形狀及引數說明

2021-09-25 13:14:48 字數 2304 閱讀 6999

新的一周又來了,大家還記得我們學習的konva的使用步驟麼?相信聰明的大家一定都還牢牢記得現在的步驟呢,所以我們直接開始上手咯,還記得我們說這一期我們要做什麼呢?

吶,這一次呢,我們會將konva裡面最常用的形狀以及對應的引數做相應的說明哦,趕緊學起來吧!

屬性含義

引數型別

fill

形狀的填充顏色

顏色的字串

stroke

形狀的邊框

顏色的字串

strokewidth

形狀邊框的粗度

數字後面我們再用到的時候,我就不再詳細說明了哦!

1.rect-矩形

**為:

var rect1 = new konva.rect();
相應的引數說明,我已經給大家寫在**裡面了,相信聰明的你們一定能看明白吧!

注意

後面的陰影程度和圓角並不只是針對矩形特有的哦,但是矩形也可以設定這些樣式

乙個矩形要形成,必須需要起始座標的(x,y)和矩形的寬度和高度,還要有填充或者邊框之一才可以在層上看到圖案哦

2.circle-圓

var circle1 = new konva.circle();
注意

要實現乙個圓,最基本的需要圓心的座標和半徑,填充或者邊框給其中之一。

如果圓心的位置太小,小於半徑,會只出現部分圓哦!這時候大家就應該要改變圓心的位置哦!

3.ellipse-橢圓

var circle1 = new konva.circle();
4.wedge-扇形

var wedge1 = new konva.wedge();
注意

要實現乙個扇形,圓心座標+半徑+角度+旋轉角度+填充顏色或者邊框顏色必須都要有,才能實現扇形哦!

var polygon1= new konva.line() ;
var polygon2 = new konva.line() ;
注意

實現線段或者多邊形,根據我們給的points的陣列,實現對應的圖案。

closed代表的是圖案是否要閉合,如果要閉合記得給上對應的引數。true | false

各種線段使用的方法都是line(),只不過不同的引數會繪製不一樣的圖案。

/ 插入

// main api:

var imageobj = new image(); //新建乙個物件

imageobj.src = '../project/images/01.jpg'; //放入的路徑

//當載入完成的時候,執行以下函式

imageobj.onload = function() );

// add the shape to the layer

layer.add(yoda);

layer.batchdraw(); //繪製影象

};

注意

一定要在載入完成之後寫函式哦,

在函式裡面新建乙個konva的影象,然後將這個影象新增到對應的層上面,還要將layer繪製出來哦,否則不會生效哦!

var ******text = new konva.text();

layer.add(******text);

注意

字型的text這個屬性一定要設定,大小、字型、顏色不設定會啟用預設值。

var star1 = new konva.star()

layer.add(star1);

注意

如果要形成正常的多角星星,對應的innerradius和outerradius都必須要設定,如果只設定其中之一,出現的不是正常的多角星。如果兩個都不設定,不能出現多角星哦!

var ring1 = new konva.ring()

layer.add(ring1);

注意

內圓半徑一定要小於外圓半徑,否則不會出現相應的圖案哦!

好啦,今天的內容就到此結束啦!應該很簡單吧,在練習中熟練。下一次我們將講述裡面各種偏門的形狀,這樣媽媽就再也不擔心我們遇到偏門的形狀了,是吧!趕緊學習起來吧!

uwsgi常用引數說明

demo.socket 4 root workspace djangodemo root workspace djangodemo djangodemo.wsgi var run django demo.pid var log django demo.log processes 同時啟動uwsgi程...

configure常用引數說明

在交叉編譯中比較常見的引數是build host和target了,正確的理解這三者的含義對於交叉編譯是非常重要的,下面就此進行解釋 build 編譯該軟體所使用的平台 在什麼平台上進行編譯 host 該軟體將執行的平台 生成的程式在什麼平台上執行 target 該軟體所處理的目標平台 我們以 編譯 ...

tcpdump常用引數說明

一 學習tcpdump的5個引數 初次使用tcpdump時,使用tcpdump h命令可以看到它有數十個引數。根據我們在運維工作中的經驗,掌握tcpdump以下5個引數即可滿足大部分的工作需要了。i引數。使用 i引數指定需要抓包的網絡卡。如果未指定的話,tcpdump會根據搜尋到的系統中狀態為up的...