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

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