我正在尝试制作一个像这样的拼图游戏。我尝试过的看起来像这样。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)
},
在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)
},
解释:
您正在使用的拼图脚本,在x,y轴上绘制方形拼图碎片,其中左上角为(cx,cy),并且碎片的大小由s表示
每块都有4个面,每个面都由您使用的2个代码之一绘制:
您所需要做的就是绘制直线以创建所需的形状。
对于外部:
对于内部零件:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句