Quatz 2D/Core Graphics 中的触摸绘制
我正在尝试实现“手绘工具”。 目前算法看起来像这样(我不插入任何代码,因为方法相当大,将尝试解释一个想法):
Drawing
- 在我创建的 touchesStarted: 方法中NSMutableArray *pointsArray 并向其中添加点。调用setNeedsDisplay:方法。
- 在 touchesMoved: 方法中,我计算 pointArray 中最后添加的点和当前点之间的点。将所有点添加到点数组中。调用setNeedsDisplay:方法。
- 在 touchesFinished: 事件中,我计算数组中最后添加的点和当前点之间的点。设置标志touchesWereFinished。调用setNeedsDisplay:。
Render:
drawRect: 方法检查是否是 pointsArray != nil 以及其中是否有任何数据。如果有 - 它开始在该数组的每个点上绘制圆圈。如果设置了标志touchesWereFinished - 将当前上下文保存到UIImage,释放pointsArray,将其设置为nil并重置标志。
这种方法有很多缺点:
- 速度慢
- 当用户长时间触摸和移动手指时,速度变得非常慢。数组变得巨大,
- 由圆圈组成的“线”很难看,
我想改变我的算法,使其更快一点,线更平滑。 结果,我希望在以下 URL 的图片上显示类似的线条(抱歉,没有足够的声誉来插入图像): http://2.bp.blogspot.com/_r5VzEAUYXJ4/SrOYp8tJCPI/AAAAAAAAAMw/ZwDKXiHlhV0/s320/SketchBook+Mobile(4).png
你能给我建议吗,我可以用这种方式画线(边缘光滑细长)吗?我想在边缘绘制带有 alpha 渐变的圆圈(以使线条更平滑),但恕我直言,它会非常慢。
感谢您的帮助
更新
我更改了绘制算法。现在,我保存每个事件 UITouch ,并在 drawRect: 方法中从上一个事件中绘制路径。指向当前的一个。并在每次 drawRect: 调用时从上下文中转储 UIImage 。
但我还有2个问题:
- 是否可以画得更流畅。我的意思是,如果我画得很快,我很容易就能看到路径是一组直线。但我想画曲线,使路径平滑。也许贝塞尔曲线会有所帮助,但我不明白它们如何在这方面提供帮助。 情况。
- 我想以较细的线开始路径并以较细的线结束。我怎样才能进行这条线的变换? 谢谢!
I'm trying to implement "hand draw tool".
At the moment algorythm looks like that (I don't insert any code because methods are quite big, will try to explain an idea):
Drawing
- In touchesStarted: method I create NSMutableArray *pointsArray and add point into it. Call setNeedsDisplay: method.
- In touchesMoved: method I calculate points between last added point from the pointsArray and current point. Add all points to the pointsArray. Call setNeedsDisplay: method.
- In touchesFinished: event I calculate points between last added point from the array and current point. Set flag touchesWereFinished. Call setNeedsDisplay:.
Render:
drawRect: method checks is pointsArray != nil and is there any data in it. If there is - it starts to traw circles in each point of this array. If flag touchesWereFinished is set - save current context to the UIImage, release pointsArray, set it to nil and reset the flag.
There are a lot disadvantages of this method:
- It is slow
- It becomes extremely slow when user touches and move finger for long time. Array becomes enormous
- "Lines" composed by circles are ugly
I would like to change my algorithm to make it bit faster and line smoother.
In result I would like to have lines like on the picture at following URL (sorry, not enough reputation to insert an image): http://2.bp.blogspot.com/_r5VzEAUYXJ4/SrOYp8tJCPI/AAAAAAAAAMw/ZwDKXiHlhV0/s320/SketchBook+Mobile(4).png
Can you advice me, ho I can draw lines this way (smooth and slim on the edges)? I thought to draw circles with alpha gradient on the edges (to make lines smoother), but it will be extremely slowly IMHO.
Thanks for help
Update
I changed draw algorithm. Now every event I save UITouch and in the drawRect: method I draw path from prev. point to the current one. And dump UIImage from context every drawRect: invocation.
But I still have 2 questions:
- Is it possible to draw more smooth. I mean if I draw quite fast, I easily can see that path path is a set of straight lines. But I want to draw curves, to make path smooth. Probably Bezier curves will help but I don't understand how they can help in this.
situation. - I want to start path with thiner line and finish with thiner line too. How I can do this line transform?
Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论