Konva常用的形状及参数说明

秒速五厘米 2021-11-22 12:04 1015阅读 0赞

新的一周又来了，大家还记得我们学习的konva的使用步骤么？相信聪明的大家一定都还牢牢记得现在的步骤呢，所以我们直接开始上手咯，还记得我们说这一期我们要做什么呢？

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

在此之前，需要给大家一些通用说明：

<table style="width:0px;"> 
 <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.rect-矩形

代码为：

var rect1 = new Konva.Rect({
    x: 20, //起始坐标x
    y: 20, //起始坐标y
    width: 100, //矩形的宽度
    height: 50, //矩形的高度
    fill: 'green', //矩形内填充的颜色
    stroke: 'red', //矩形边框的颜色
    strokeWidth: 4, //矩形边框的粗度
    shadowBlur: 10, //矩形的阴影的模糊程度
    cornerRadius: [0, 10, 20, 30] //矩形的圆角设置，对应的方向分别是：【左上，右上，右下，左下】
    });

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

**注意**：

1.  后面的阴影程度和圆角并不只是针对矩形特有的哦，但是矩形也可以设置这些样式
2.  一个矩形要形成，必须需要起始坐标的（x,y）和矩形的宽度和高度，还要有填充或者边框之一才可以在层上看到图案哦

2.circle-圆

var circle1 = new Konva.Circle({
    x:100, //圆心的坐标x
    y:100, //圆心的坐标y
    radius:40, //圆的半径
    fill:'red', //填充色
    stroke:'black' //边框的颜色
    });

**注意**：

1.  要实现一个圆，最基本的需要圆心的坐标和半径，填充或者边框给其中之一。
2.  如果圆心的位置太小，小于半径，会只出现部分圆哦！这时候大家就应该要改变圆心的位置哦！

3.ellipse-椭圆

var circle1 = new Konva.Circle({
    x:100, //圆心的坐标x
    y:100, //圆心的坐标y
    radius:40, //圆的半径
    fill:'red', //填充色
    stroke:'black' //边框的颜色
    });

4.wedge-扇形

var wedge1 = new Konva.Wedge({
    x:500, //圆心的坐标x
    y:100, //圆心的坐标y
    radius:100, //半径
    angle:180, //角度
    fill:'red' ,
    rotation:90 //旋转的角度
    });

**注意**：

1.  要实现一个扇形，圆心坐标+半径+角度+旋转角度+填充颜色或者边框颜色必须都要有，才能实现扇形哦！

## 5.Line-线段+多边形 ##

### simple line -简单线 ###

var polygon1= new Konva.Line({
    points: [23, 20, 23, 160, 70, 93, 150, 109, 290, 139, 270, 93], 
    //points是多边形各个点的坐标，两两成对，分别代表x,y
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 5,
    lineCap: 'round',
    lineJoin: 'round',
    dash: [29, 20, 0.001, 20],
    //长度为29px、带间隙的线段-20px后接0.001px（A点）的线段-然后是20px的间隙
    closed: false //是否要闭合，如果要就需要给true
    }) ;

### 多边形 ###

var polygon2 = new Konva.Line({
    points: [23, 20, 23, 160, 70, 93, 150, 109, 290, 139, 270, 93], 
    //points是多边形各个点的坐标，两两成对，分别代表x,y
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 5,
    closed: true //是否要闭合，如果要就需要给true
    }) ;

**注意**：

1.  实现线段或者多边形，根据我们给的points的数组，实现对应的图案。
2.  closed代表的是图案是否要闭合，如果要闭合记得给上对应的参数。true | false
3.  各种线段使用的方法都是Line(),只不过不同的参数会绘制不一样的图案。

## 6.image-图片 ##

/ 插入图片
    // main API:
    var imageObj = new Image(); //新建一个图片对象
    imageObj.src = '../project/images/01.jpg'; //放入图片的路径
    //当图片加载完成的时候，执行以下函数
    imageObj.onload = function() {
    // 新建一个konva的图片对象
    var yoda = new Konva.Image({
    x: 50, //图片的起始位置
    y: 50, 
    image: imageObj, //图片对象是对应新建的图像
    width: 106, //引入图片的宽度
    height: 118 //引入图片的高度
    });
    
    // add the shape to the layer
    layer.add(yoda); 
    layer.batchDraw(); //绘制图像
    };

**注意**：

1.  整体的步骤是要先新建一个图片对象，然后引入图片的地址
2.  一定要在图片加载完成之后写函数哦，
3.  在函数里面新建一个konva的图像，然后将这个图像添加到对应的层上面，还要将layer绘制出来哦，否则不会生效哦！

## 7.text-文本 ##

var simpleText = new Konva.Text({
    x: 100, 
    y: 15,
    text: 'Simple Text', //要显示的文本内容
    fontSize: 30, //字体大小
    fontFamily: 'Calibri', //字体类型
    fill: 'green' 
    });
    layer.add(simpleText);

**注意**：

1.  字体的text这个属性一定要设置，大小、字体、颜色不设置会启用默认值。

## 8.star-星星 ##

var star1 = new Konva.Star({
    x: 400,
    y: 100,
    numPoints: 6, //角数
    innerRadius: 40, //内角的角度
    outerRadius: 70, //外角的角度
    fill: 'yellow', 
    stroke: 'black',
    strokeWidth: 4
    })
    layer.add(star1);

**注意**：

1.  如果要形成正常的多角星星，对应的innerRadius和outerRadius都必须要设置，如果只设置其中之一，出现的不是正常的多角星。如果两个都不设置，不能出现多角星哦！

## 9.ring-圆环 ##

var ring1 = new Konva.Ring({
    x:100,
    y:100,
    innerRadius:50, //内圆半径
    outerRadius:70, //外圆半径
    fill: 'yellow', 
    stroke: 'black',
    strokeWidth: 4
    })
    layer.add(ring1);

**注意**：

1.  内圆半径一定要小于外圆半径，否则不会出现相应的图案哦！

好啦，今天的内容就到此结束啦！应该很简单吧，在练习中熟练。下一次我们将讲述里面各种偏门的形状，这样妈妈就再也不担心我们遇到偏门的形状了，是吧！赶紧学习起来吧！