如何使用dynamic.js在多邊形上制作圓角

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