拼图碎片形状变化答案

【问题标题】：Jigsaw Puzzle Pieces shape change拼图碎片形状变化
【发布时间】：2015-05-29 05:55:17
【问题描述】：

我正在尝试制作一个看起来像这样的拼图游戏。我尝试过的看起来像这样。 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)
},

【问题讨论】：

你试过自己解决吗？在您的小提琴中，我没有看到任何创建所需形状的尝试，仅默认使用拼图库...
我试图解决它我改变了它给出不同形状但不完全是我想要的值。检查这个 - jsfiddle.net/uccfb46z/2

标签： javascript jquery html bezier

【解决方案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 个代码之一绘制：

inside 用于孔零件：
外部用于突出的部分：

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

对于外部部分：

对于内部部分：

【讨论】：

ps：请原谅我的绘画水平不佳，不要介意视觉效果，只关注坐标逻辑。
嗨 @Banana 我已经完成了几乎所有使用 lineTo 的拼图。但仍有一些作品仍然是谜，可能是逻辑不同。你能关注这个帖子吗 - stackoverflow.com/questions/30617132/…
逻辑是一样的，只需要计算一下即可。
是的，使用 lineTo 制作了所有这些作品，但如果你能在那边解释一下，bezierCurveTo 会像这次一样面临一些困难......stackoverflow.com/questions/30617132/…
如果你想要@Banana，我可以开始赏金。