時(shí)間過(guò)得真快，相信大家對(duì)于konva已經(jīng)非常熟悉了吧。那么多常用的函數(shù)及使用，大家已經(jīng)能夠熟練使用了嗎？如果不知道的，看這里哦！? ?http://www.itdecent.cn/p/fa030213817a正所謂，熟能生巧，大家要經(jīng)常練習(xí)哦。今天我們又為大家?guī)?lái)了新的知識(shí)點(diǎn)，是什么呢？一起來(lái)看看吧！
吶，這一次呢，我們會(huì)將konva里面其他會(huì)用到的形狀函數(shù)以及對(duì)應(yīng)的參數(shù)做相應(yīng)的說(shuō)明哦，趕緊學(xué)起來(lái)吧！
在此之前，相應(yīng)的通用屬性的說(shuō)明就還是給大家擺在這里了哦！
屬性含義參數(shù)類型
fill形狀的填充顏色顏色的字符串
stroke形狀的邊框顏色的字符串
strokeWidth形狀邊框的粗度數(shù)字
arc-弧形
代碼為：
var?arc?= new?Konva.Arc({
x:?300, //圓心的橫軸坐標(biāo)
y:?200, //圓心的豎軸坐標(biāo)
innerRadius:?40, //內(nèi)圓半徑
outerRadius:?80, //外圓半徑
fill:?'red',
stroke:?'black',
strokeWidth:?5,
angle:?60, //圓弧角度
rotationDeg:?10?//圓弧的旋轉(zhuǎn)角度，是平面旋轉(zhuǎn)，以x軸為基準(zhǔn)的順時(shí)針旋轉(zhuǎn)
});
相應(yīng)的參數(shù)說(shuō)明，我已經(jīng)給大家寫在代碼里面了，相信聰明的你們一定能看明白吧！
注意：1. 圓弧的圓心坐標(biāo)一定要給哦！否則不會(huì)有效果的。
arrow-箭頭
var?arrow?= new?Konva.Arrow({
x:100, //以這個(gè)為基準(zhǔn)點(diǎn)，類似于坐標(biāo)的起點(diǎn)
y:?100,
points:?[0, 0, 100, 100],
//基于坐標(biāo)后移動(dòng)的點(diǎn)，實(shí)際位置其實(shí)是起點(diǎn)為（x+0,y+0）,終點(diǎn)為（x+100,y+100）
pointerLength:?100, //箭頭三角形的高的長(zhǎng)度
pointerWidth:?20, //箭頭三角形的底邊的寬度
fill:?'black',
stroke:?'black',
strokeWidth:?4
});
注意：
1. points是兩個(gè)坐標(biāo)，起點(diǎn)和終點(diǎn)，但是并不是以這里的坐標(biāo)為坐標(biāo)，而是以x和y的值為原點(diǎn)，畫出來(lái)的圓哦！
3.spline-樣條
var?line?= new?Konva.Line({
points:?[5, 70, 140, 23, 250, 60, 300, 20], //線條上的點(diǎn)
stroke:?'red',
strokeWidth:?15,
lineCap:?'butt', //兩端的圖形可以是butt，round，sqare的。默認(rèn)是butt
lineJoin:?'bevel', //設(shè)置線的連接，可以是miter, round, bevel。默認(rèn)是miter
tension:?1?//設(shè)置曲線的角度的，數(shù)值越大，曲線越彎曲。如果值為0，則不會(huì)產(chǎn)生插補(bǔ)。
// 默認(rèn)值為0
});
layer.add(line);
注意：
1. lineJoin的多個(gè)參數(shù)，具體效果依次如下：
2. 當(dāng)tension設(shè)置為0的時(shí)候才不會(huì)插值，也就是說(shuō)不會(huì)添加新的點(diǎn)，但是如果被設(shè)置為非0的值，就會(huì)插值，我們的lineJoin的值就不會(huì)有改變了哦！
4.?path-路徑
var?line?= new?Konva.Path({
x:?0, //圖形距離原點(diǎn)的x的位置
y:?40, //圖形距離原點(diǎn)的y的位置
data:?//通過(guò)svg的方式表示的圖案
'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
fill:?'green',
scale:?{
x:?2, //x的放大倍數(shù)
y:?2?//y的放大倍數(shù)
}
});
layer.add(line);
注意：
1. 這里的data對(duì)應(yīng)的值，應(yīng)該是SVG的方式來(lái)表示圖案哦，這里的SVG畫圖，到底是什么呢？大家如果有興趣可以參照以下教程https://www.runoob.com/svg/svg-tutorial.html，自行學(xué)習(xí)哦！
5.?RegularPolygon-常規(guī)多邊形
var?RegularPolygon?= new?Konva.RegularPolygon({
x:?300, //中心點(diǎn)的x軸坐標(biāo)
y:?150, //中心點(diǎn)的y軸坐標(biāo)
sides:?6, //多邊形的邊數(shù)
radius:?170, //半徑
fill:?'red',
stroke:?'black',
strokeWidth:?4
});
layer.add(RegularPolygon);
6. textpath-文本路徑
var?TextPath?= new?Konva.TextPath({
x:?0, //起點(diǎn)的x
y:?50, //起點(diǎn)的y
fill:?'#333',
fontSize:?16,
fontFamily:?'Arial',
text:
"All the world's a stage, and all the men and women merely players.",
//文本路徑的SVG表示方式
data:?'M10,10 C0,0 10,150 100,100 S300,150 4.0.100'
});
layer.add(TextPath);
注意：
1. 這里的data的值和前面學(xué)的路徑的值是一樣的，都是SVG的方式畫圖哦！
7. label-標(biāo)簽
// 創(chuàng)建一個(gè)標(biāo)簽。商標(biāo)
var?tooltip?= new?Konva.Label({
// 中心距離原點(diǎn)的x,y坐標(biāo)
x:?170,
y:?75,
opacity:?0.75?//元素顏色的透明度
});
//往商標(biāo)上面添加三角形
tooltip.add(
new?Konva.Tag({
fill:?'black',
//三角的方向--可以是上，右，下，左，或沒有。up, right, down, left, or none 默認(rèn)值是none
pointerDirection:?'down',
//三角形圖標(biāo)的寬度和高度
pointerWidth:?10,
pointerHeight:?10,
lineJoin:?'round'
})
);
//往商標(biāo)上面添加文字
tooltip.add(
new?Konva.Text({
text:?'Tooltip pointing down',
fontFamily:?'Calibri', //字體類型
fontSize:?18,
padding:?10, //字和盒子的內(nèi)邊距
fill:?'white'
})
);
layer.add(tooltip);
注意：
1. 這個(gè)方法相對(duì)比較復(fù)雜，但是其實(shí)就是一個(gè)盒子，如果需要三角形，我們調(diào)用的形狀函數(shù)是tag(),主要是注意設(shè)置方向的時(shí)候?qū)?yīng)的英文參數(shù)哦！
2. 如果需要添加文字或者其他基本形狀，就按照之前形狀相應(yīng)的函數(shù)使用方式，使用就可以了哦！
好啦，今天的內(nèi)容就到此結(jié)束啦！大家學(xué)習(xí)了這么久的形狀函數(shù)，是不是都累了??！我感覺都有點(diǎn)無(wú)聊了，所以呢，我們下一次的課程會(huì)有更加有趣的內(nèi)容哦！我們下次會(huì)將拖動(dòng)元素，以及動(dòng)畫相關(guān)的內(nèi)容哦！是不是很心動(dòng)啦，我們下次不見不散哦！
