javascript - 拼图 block 形状变化

Question

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

现在如果我想改变碎片的形状我需要修改这部分 -

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

但我是这个 BezierCurve 的新手，所以任何人都可以指导我制作这种形状的值(value)应该是多少。

现在的形状是这样的..

我试过下面的代码，但没有达到想要的形状:

outside: function(ctx, s, cx, cy) {
    ctx.lineTo(cx + s * .34, cy);
    ctx.bezierCurveTo(cx + s * .86, 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 * .80, cy + s * .80, 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 创建贝塞尔曲线。对于你想要的形状，你不需要贝塞尔曲线，只需要直线。

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

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 轴上绘制方形拼图 block ，其中左上角为 (cx,cy)， block 的大小用 < strong>s

每 block 有 4 个面，每个面都由您使用的 2 个代码之一绘制:

• 内部用于孔部件:
• 外面对于突出的部分:

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

对于外部部件:

内部零件: