源码时代前端干货分享| konva里面会用到哪些形状函数以及对应的参数

红太狼 2024-04-20 09:15 72阅读 0赞

# **应用教程** #

## **--常用的形状及参数说明** ##

时间过得真快，相信大家对于konva已经非常熟悉了吧。那么多常用的函数及使用，大家已经能够熟练使用了吗？如果不知道的同学，看这里哦！

[http://bbs.itsource.cn/forum.php?mod=viewthread&tid=4555&highlight=konva][http_bbs.itsource.cn_forum.php_mod_viewthread_tid_4555_highlight_konva] 正所谓，熟能生巧，大家要经常练习哦。今天我们又为大家带来了新的知识点，是什么呢？一起来看看吧！

呐，这一次呢，我们会将konva里面其他会用到的形状函数以及对应的参数做相应的说明哦，赶紧学起来吧！

在此之前，相应的通用属性的说明就还是给大家摆在这里了哦！

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:142pt;"> 属性 </td> 
 <td style="vertical-align:top;width:142.05pt;"> 含义 </td> 
 <td style="vertical-align:top;width:142.05pt;"> 参数类型 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:142pt;"> fill </td> 
 <td style="vertical-align:top;width:142.05pt;"> 形状的填充颜色 </td> 
 <td style="vertical-align:top;width:142.05pt;"> 颜色的字符串 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:142pt;"> stroke </td> 
 <td style="vertical-align:top;width:142.05pt;"> 形状的边框 </td> 
 <td style="vertical-align:top;width:142.05pt;"> 颜色的字符串 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:142pt;"> strokeWidth </td> 
 <td style="vertical-align:top;width:142.05pt;"> 形状边框的粗度 </td> 
 <td style="vertical-align:top;width:142.05pt;"> 数字 </td> 
 </tr> 
 </tbody> 
</table>

1.  **arc-弧形**

代码为：

var arc = new Konva.Arc(\{

x: 300, //圆心的横轴坐标

y: 200, //圆心的竖轴坐标

innerRadius: 40, //内圆半径

outerRadius: 80, //外圆半径

fill: 'red',

stroke: 'black',

strokeWidth: 5,

angle: 60, //圆弧角度

rotationDeg: 10 //圆弧的旋转角度，是平面旋转，以x轴为基准的顺时针旋转

\});

相应的参数说明，我已经给大家写在代码里面了，相信聪明的你们一定能看明白吧！

**注意**：

1.  圆弧的圆心坐标一定要给哦！否则不会有效果的。

1.  **arrow-箭头**

vvar arrow = new Konva.Arrow(\{

x:100, //以这个为基准点，类似于坐标的起点

y: 100,

points: \[0, 0, 100, 100\],

//基于坐标后移动的点，实际位置其实是起点为（x+0,y+0）,终点为（x+100,y+100）

pointerLength: 100, //箭头三角形的高的长度

pointerWidth: 20, //箭头三角形的底边的宽度

fill: 'black',

stroke: 'black',

strokeWidth: 4

\});

**注意**：

1.  points是两个坐标，起点和终点，但是并不是以这里的坐标为坐标，而是以x和y的值为原点，画出来的圆哦！

1.  **spline-样条**

var line = new Konva.Line(\{

points: \[5, 70, 140, 23, 250, 60, 300, 20\], //线条上的点

stroke: 'red',

strokeWidth: 15,

lineCap: 'butt', //两端的图形可以是butt，round，sqare的。默认是butt

lineJoin: 'bevel', //设置线的连接，可以是miter, round, bevel。默认是miter

tension: 1 //设置曲线的角度的，数值越大，曲线越弯曲。如果值为0，则不会产生插补。

// 默认值为0

\});

layer.add(line);

**注意**：

1.  lineJoin的多个参数，具体效果依次如下：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70][]

1.  当tension设置为0的时候才不会插值，也就是说不会添加新的点，但是如果被设置为非0的值，就会插值，我们的lineJoin的值就不会有改变了哦！

1.  **path-路径**

var line = new Konva.Path(\{

x: 0, //图形距离原点的x的位置

y: 40, //图形距离原点的y的位置

data: //通过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的放大倍数

y: 2 //y的放大倍数

\});

layer.add(line);

**注意**：

1.  这里的data对应的值，应该是SVG的方式来表示图案哦，这里的SVG画图，到底是什么呢？大家如果有兴趣可以参照以下教程[https://www.runoob.com/svg/svg-tutorial.html][https_www.runoob.com_svg_svg-tutorial.html]，自行学习哦！

1.  **[RegularPolygon][]\-常规多边形**

vvar RegularPolygon = new Konva.RegularPolygon(\{

x: 300, //中心点的x轴坐标

y: 150, //中心点的y轴坐标

sides: 6, //多边形的边数

radius: 170, //半径

fill: 'red',

stroke: 'black',

strokeWidth: 4

\});

layer.add(RegularPolygon);

1.  **textpath-文本路径**

vvar TextPath = new Konva.TextPath(\{

x: 0, //起点的x

y: 50, //起点的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的值和前面学的路径的值是一样的，都是SVG的方式画图哦！

1.  **label-标签**

// 创建一个标签。商标

var tooltip = new Konva.Label(\{

// 中心距离原点的x,y坐标

x: 170,

y: 75,

opacity: 0.75 //元素颜色的透明度

\});

//往商标上面添加三角形

tooltip.add(

new Konva.Tag(\{

fill: 'black',

//三角的方向--可以是上，右，下，左，或没有。up, right, down, left, or none 默认值是none

pointerDirection: 'down',

//三角形图标的宽度和高度

pointerWidth: 10,

pointerHeight: 10,

lineJoin: 'round'

\})

);

//往商标上面添加文字

tooltip.add(

new Konva.Text(\{

text: 'Tooltip pointing down',

fontFamily: 'Calibri', //字体类型

fontSize: 18,

padding: 10, //字和盒子的内边距

fill: 'white'

\})

);

layer.add(tooltip);

**注意**：

1.  label这个方法相对比较复杂，但是其实就是一个盒子，如果需要三角形，我们调用的形状函数是tag(),主要是注意设置方向的时候对应的英文参数哦！
2.  如果需要添加文字或者其他基本形状，就按照之前形状相应的函数使用方式，使用就可以了哦！

好啦，今天的内容就到此结束啦！大家学习了这么久的形状函数，是不是都累了啊！我感觉都有点无聊了，所以呢，我们下一次的课程会有更加有趣的内容哦！我们下次会将拖动元素，以及动画相关的内容哦！是不是很心动啦，我们下次不见不散哦！

（本文由源码时代技术老师原创撰写，转载请注明出处）

[http_bbs.itsource.cn_forum.php_mod_viewthread_tid_4555_highlight_konva]: http://bbs.itsource.cn/forum.php?mod=viewthread&tid=4555&highlight=konva
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpbGxhaW55MTM1Nzk_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d1f15b1364444f2caaa3cb2653d27a3d.png
[https_www.runoob.com_svg_svg-tutorial.html]: https://www.runoob.com/svg/svg-tutorial.html
[RegularPolygon]: https://konvajs.org/api/Konva.RegularPolygon.html