Javascript 在画布形状中添加多个控制点

我在kinetic js中制作了画布形状正方形，每个顶点上有4个控制点。用户可以点击并拖动这些控制点，并以自己喜欢的方式扭曲形状。小提琴链接是

相应的js代码是

   var room = new Kinetic.Shape({
    x: 0,
    y: 0,
    width: w,
    height: h,
    stroke: "blue",
    fill: 'red',
    drawFunc: function (context) {
        var x = this.x();
        var y = this.y();
        var w = this.width();
        var h = this.height();
        var tlX = this.anchorTL.x();
        var tlY = this.anchorTL.y();
        context.beginPath();
        context.moveTo(tlX, tlY);
        // top
        context.bezierCurveTo(x + w / 3, y, x + w * 2 / 3, y, this.anchorTR.x(), this.anchorTR.y());
        // right
        context.bezierCurveTo(x + w, y + h / 3, x + w, y + h * 2 / 3, this.anchorBR.x(), this.anchorBR.y());
        // bottom
        context.bezierCurveTo(x + w * 2 / 3, y + h, x + w / 3, y + h, this.anchorBL.x(), this.anchorBL.y());
        // left
        context.bezierCurveTo(x, y + h * 2 / 3, x, y + h / 3, tlX, tlY);

        context.closePath();
        context.fillStrokeShape(this);
    }
});

问题是我想在每个正方形边缘上添加更多的控制点。我希望画布的形状像这样

---

除顶点中的4个控制点外，上面的正方形每侧有2个控制点，因此，每个方块总共有12个点。我希望js fiddle中的方块每个也有12个控制点。我不知道要在哪里以及做什么修改，以便每个画布方块都有12个控制点。请帮助..

您已经掌握了所需的技术。只需为8个缺失的控制点添加额外的锚点，然后将锚点x、y插入贝塞尔曲线-@markE我尝试在每条直线的中点添加控制点，方法是添加额外的锚并将其插入Bezier曲线，但中点控制点不会像顶点那样随直线移动..js FIDLE是每个Bezier曲线有4个控制点，因此需要4个锚。控制点：1起点2影响起点的中点3影响终点的中点4终点。