Как сделать закругленные углы на многоугольнике с помощью кинетики

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