简体   繁体   English

SpriteKit-逐渐绘制贝塞尔曲线

[英]SpriteKit - Draw Bezier Curve Gradually

I'm working on an iOS educational where kids are drawing letters. 我正在做一个iOS教育系统,孩子们正在画字母。 The game mechanism is pretty simple and works OK. 游戏机制非常简单,可以正常运行。 What I want to do is to show a drawing progress by turning the elapsed part into green thick line. 我要做的是通过将经过的零件变成绿色的粗线来显示绘图进度。 See the image: 见图片:

在此处输入图片说明

There are couple of solution I have in mind. 我想到了几种解决方案。

  1. Mask over hidden path which transforms according to users touch position 遮盖隐藏的路径,根据用户的触摸位置进行转换
  2. Creating a new path on touchesMoved: by taking the original and adding a point to the user touch position, then stripping the rest 在touches上创建新路径已移动:通过获取原始路径并在用户触摸位置添加一个点,然后去除其余部分

What would you choose or is there some better solution? 您会选择什么,还是有更好的解决方案?

Note: I want to draw the green path precisely as the dashed one. 注意:我想精确地绘制绿色的虚线。 By just drawing a path following the user movement would result in ugly line. 通过仅跟随用户移动绘制路径将导致线条难看。

Thanks. 谢谢。

I would say your choice depends on whether the dashed line is also drawn (or drawable in all of its parts) with bezier curves. 我会说您的选择取决于是否也用贝塞尔曲线绘制了虚线(或在其所有部分中都可绘制)。

If the dashed line is an image you show, probably solution 1 with an also drawn thick line and an adapted mask is easiest to do. 如果虚线是您显示的图像,则解决方案1可能还会绘制一条粗线和一个经过修改的蒙版,这是最容易做到的。

If the dashed line is already drawn as a bezier curve (or drawn by drawing several connected bezier curves), then solution 2 seems best to me. 如果虚线已经作为贝塞尔曲线绘制(或通过绘制几条相连的贝塞尔曲线绘制),那么解决方案2对我来说似乎是最好的。 The tricky part would be to ensure you exactly follow the dashed line in this case (but I suppose you figured that already :-). 棘手的部分是在这种情况下确保您完全遵循虚线(但我想您已经知道了:-)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM