Question

我正在使用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的圆角。我该怎么做？

Answer 1

改为使用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
});

如何使用kineticjs在多边形上制作圆角

1 个答案: