Canvas框架之Konva的形状函数及参数说明
2019/09/19 15:26 分类: 技术交流 浏览:1
时间过得真快,相信大家对于konva已经非常熟悉了吧。那么多常用的函数及使用,大家已经能够熟练使用了吗?如果不知道的同学,看这里哦!
http://bbs.itsource.cn/forum.php?mod=viewthread&tid=4555&highlight=konva 正所谓,熟能生巧,大家要经常练习哦。今天我们又为大家带来了新的知识点,是什么呢?一起来看看吧!
呐,这一次呢,我们会将konva里面其他会用到的形状函数以及对应的参数做相应的说明哦,赶紧学起来吧!
在此之前,相应的通用属性的说明就还是给大家摆在这里了哦!
属性 |
含义 |
参数类型 |
fill |
形状的填充颜色 |
颜色的字符串 |
stroke |
形状的边框 |
颜色的字符串 |
strokeWidth |
形状边框的粗度 |
数字 |
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. 圆弧的圆心坐标一定要给哦!否则不会有效果的。
2.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
});
注意:
points是两个坐标,起点和终点,但是并不是以这里的坐标为坐标,而是以x和y的值为原点,画出来的圆哦!
3.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);
注意:
lineJoin的多个参数,具体效果依次如下:
当tension设置为0的时候才不会插值,也就是说不会添加新的点,但是如果被设置为非0的值,就会插值,我们的lineJoin的值就不会有改变了哦!
4.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);
注意:
- 这里的data对应的值,应该是SVG的方式来表示图案哦,这里的SVG画图,到底是什么呢?大家如果有兴趣可以参照以下教程https://www.runoob.com/svg/svg-tutorial.html,自行学习哦!
5.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);
6.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);
注意:
这里的data的值和前面学的路径的值是一样的,都是SVG的方式画图哦!
7.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);
注意:
- label这个方法相对比较复杂,但是其实就是一个盒子,如果需要三角形,我们调用的形状函数是tag(),主要是注意设置方向的时候对应的英文参数哦!
- 如果需要添加文字或者其他基本形状,就按照之前形状相应的函数使用方式,使用就可以了哦!
好啦,今天的内容就到此结束啦!大家学习了这么久的形状函数,是不是都累了啊!我感觉都有点无聊了,所以呢,我们下一次的课程会有更加有趣的内容哦!我们下次会将拖动元素,以及动画相关的内容哦!是不是很心动啦,我们下次不见不散哦!
赞 0