CODEWITHSUNDEEP
javascripthtmlkineticjskonvajs
Poku
Poku

Reputation: 3178

how to make rounded corners on polygon with kineticjs

I am using kineticjs to do some HTML5 graphics, and I would like to make a rounded corner on a polygon. How can I do this? At the moment I have this polygon:

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

Please note that I want the lower left corner to be a rounded corner with a radius of 10. How can I do that?

Upvotes: 1

Views: 1644

Answers (1)

simonzack
simonzack

Reputation: 20938

Use Kinect.Shape instead

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

Upvotes: 1

Related Questions