[英]how to make rounded corners on polygon with kineticjs
我正在使用kineticjs
一些HTML5图形,并且我想在多边形上制作一个圆角。 我怎样才能做到这一点? 目前,我有这个多边形:
var poly = new Kinetic.Polygon({
points: [50, 100, 180, 100, 180, 120, 200, 120, 200, 180, 50, 180, 50, 100],
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 1
});
请注意,我希望左下角是一个半径为10的圆角。我该怎么做?
改用Kinect.Shape
var poly = new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
var radius=10;
context.beginPath();
context.moveTo(50, 100);
context.lineTo(180, 100);
context.lineTo(180, 120);
context.lineTo(200, 120);
context.lineTo(200, 180);
//context.lineTo(50, 180);
context.arcTo(50, 180, 50, 180-radius, radius);
context.closePath();
canvas.fillStroke(this);
},
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 1
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.