拼图碎片形状变化

Question

我正在尝试制作一个看起来像这样的拼图游戏。我试过的看起来像这样。 https://jsfiddle.net/uccfb46z/

现在如果我想改变作品的形状，我需要修改这部分 -

self.sampleConstraint.constant = 20
self.view.layoutIfNeeded()

但我是BezierCurve的新手，所以任何人都可以指导我制作这种形状的价值。

现在形状是这样的..

我尝试了以下代码，但没有达到预期的形状：

 outside: function(ctx, s, cx, cy) {
            ctx.lineTo(cx + s * .34, cy);
            ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .4, cy + s * -.15, cx + s * .4, cy + s * -.15);
            ctx.bezierCurveTo(cx + s * .3, cy + s * -.3, cx + s * .5, cy + s * -.3, cx + s * .5, cy + s * -.3);
            ctx.bezierCurveTo(cx + s * .7, cy + s * -.3, cx + s * .6, cy + s * -.15, cx + s * .6, cy + s * -.15);
            ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .65, cy, cx + s * .65, cy);
            ctx.lineTo(cx + s, cy)
        },
        inside: function(ctx, s, cx, cy) {
            ctx.lineTo(cx + s * .35, cy);
            ctx.bezierCurveTo(cx + s * .505, cy + .05, cx + s * .405, cy + s * .155, cx + s * .405, cy + s * .1505);
            ctx.bezierCurveTo(cx + s * .3, cy + s * .3, cx + s * .5, cy + s * .3, cx + s * .5, cy + s * .3);
            ctx.bezierCurveTo(cx + s * .7, cy + s * .29, cx + s * .6, cy + s * .15, cx + s * .6, cy + s * .15);
            ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .65, cy, cx + s * .65, cy);
            ctx.lineTo(cx + s, cy)
        },

Answer 1

bezierCurveTo创建贝塞尔曲线。对于你想要的形状，你不需要beziers，只需要直线。

经过一些调整后，我最终得到了以下代码来创建你的形状：

outside: function (ctx, s, cx, cy) {
    ctx.lineTo(cx, cy)
    ctx.lineTo(cx+s*.3, cy+s*.1)
    ctx.lineTo(cx+s*.5, cy+s*-.2)
    ctx.lineTo(cx+s*.7, cy+s*.1)
    ctx.lineTo(cx+s, cy)
},
inside: function (ctx, s, cx, cy) {
    ctx.lineTo(cx, cy)
    ctx.lineTo(cx+s*.3, cy+s*-.1)
    ctx.lineTo(cx+s*.5, cy+s*+.2)
    ctx.lineTo(cx+s*.7, cy+s*-.1)
    ctx.lineTo(cx+s, cy)
},

Fixed Fiddle

<强>说明

您正在使用的拼图脚本，在x，y轴上绘制方形拼图，左上角是（cx，cy），并且该部分的大小由<强>取值

每件都有4面，每面都用你使用的2个代码之一绘制：

孔部件的
• 内部：
对于突出的部分

您需要做的就是绘制直线以创建所需的形状。

外部部分：

以及内部部分：