Quatz 2D/Core Graphics 中的触摸绘制

发布于 2024-09-03 13:51:48 字数 1710 浏览 8 评论 0原文

我正在尝试实现“手绘工具”。 目前算法看起来像这样(我不插入任何代码,因为方法相当大,将尝试解释一个想法):

Drawing

  1. 在我创建的 touchesStarted: 方法中NSMutableArray *pointsArray 并向其中添加点。调用setNeedsDisplay:方法。
  2. touchesMoved: 方法中,我计算 pointArray 中最后添加的点和当前点之间的点。将所有点添加到点数组中。调用setNeedsDisplay:方法。
  3. 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个问题:

  1. 是否可以画得更流畅。我的意思是,如果我画得很快,我很容易就能看到路径是一组直线。但我想画曲线,使路径平滑。也许贝塞尔曲线会有所帮助,但我不明白它们如何在这方面提供帮助。 情况。
  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

  1. In touchesStarted: method I create NSMutableArray *pointsArray and add point into it. Call setNeedsDisplay: method.
  2. 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.
  3. 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:

  1. 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.
  2. I want to start path with thiner line and finish with thiner line too. How I can do this line transform?
    Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文