kjeum参数 Konva常用的形状及参数说明

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

kjeum参数 Konva常用的形状及参数说明(1)

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

在此之前,需要给大家一些通用说明:

kjeum参数 Konva常用的形状及参数说明(2)

后面我们再用到的时候,我就不再详细说明了哦!

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 ellipse1 = new Konva.Ellipse({

x:100, //圆心的坐标x

y:100, //圆心的坐标y

radiusX:100, //横方向的半径

radiusY:30, //竖方向的半径

fill:'red'

});

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. 内圆半径一定要小于外圆半径,否则不会出现相应的图案哦!

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

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页