以画布形状添加多个控制点

Question

我在动力学js中制作了画布形状（正方形），每个顶点都有4个控制点。用户可以点击并拖动这些控制点，并以他/她喜欢的方式扭曲形状。小提琴链接

http://jsfiddle.net/Lucy1/opsy1pn9/2/

相应的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中的正方形也分别有12个控制点。我可以'了解在哪里以及做出哪些修改，以便每个画布方块都有12个控制点。请帮助..