Javascript 拼图拼板形状变化

我正在尝试做一个像这样的拼图游戏。我试过的是这样的

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

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

但我对这种贝塞尔曲线还不熟悉，所以谁能告诉我制作这种形状的价值是什么

现在形状是这样的

我尝试了以下代码，但未达到所需的形状：

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

---

贝塞尔曲线TO

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

经过一些调整，我最终使用以下代码创建了您的形状：

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

说明：

您正在使用的拼图脚本在x、y轴上绘制方形拼图块，其中左上角为（cx、cy），块的大小由s表示

每件作品有4个侧面，每个侧面由您使用的2个代码之一绘制：

• 内部对于孔零件：
• 外部对于突出的零件：

你所需要做的就是画直线来创建所需的形状

对于外部部件：

至于内部零件：

---

您是否先尝试自己解决？在你的小提琴中，我看不到任何创建所需形状的尝试，只看到jigsaw库的默认使用…我尝试解决它我更改了值它给出了不同的形状，但不完全是我想要的。检查此-ps：你必须原谅我拙劣的绘图技能，不要介意视觉效果，只关注坐标逻辑。嗨@Banana，我已经完成了几乎所有使用lineTo的拼图。但有些作品仍然是神秘的，可能是逻辑不同。你能跟着这篇文章走吗？逻辑是一样的，你所需要做的只是一些计算。是的，使用线条来制作所有这些作品，但是如果贝塞尔曲线遇到一些困难，就像这次一样，如果你能在那里解释一下的话。。。。如果你想要@Banana，我可以开始赏金。