拼图块形状变化

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 的新手所以任何人都可以指导我制作这种形状的价值应该是多少。

现在的形状是这样的..

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

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 轴上绘制方形拼图块，其中左上角为 (cx,cy)，并且片由 s

表示

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

内部孔零件：
外面突出的部分：

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

外部部分：

内部零件：

拼图块形状变化

Jigsaw Puzzle Pieces shape change

html

javascript

jquery

bezier