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

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
});