如何绘制“语音气泡”在 iPhone 上?
当您右键单击扩展坞中的某个内容时,我试图获得类似于 Mac OS X 中的“语音气泡”效果。这是我现在所拥有的:
我需要获取下部的“三角形”部分。有什么办法可以画出这样的东西并在它周围加上边框吗?这将用于 iPhone 应用程序。
提前致谢!
编辑:非常感谢 Brad Larson,现在是这样的:
I'm trying to get a "speech bubble" effect similar to the one in Mac OS X when you right click on something in the dock. Here's what I have now:
I need to get the "triangle" part of the lower portion. Is there any way I can draw something like that and get a border around it? This will be for an iPhone app.
Thanks in advance!
EDIT: Many thanks to Brad Larson, here's what it looks like now:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(12)
实际上,我之前已经画过这个确切的形状(底部有一个指向三角形的圆角矩形)。我使用的 Quartz 绘图代码如下:
如果您不打算使用渐变或其他比简单颜色更复杂的填充,则可以省略末尾的剪切路径。
I've actually drawn this exact shape before (rounded rectangle with a pointing triangle at the bottom). The Quartz drawing code that I used is as follows:
The clipping path at the end can be left out if you're not going to use a gradient or some other more fill that's more complex than a simple color.
我来这里寻找在现有视图中绘制“箭头”的解决方案。
我很高兴与您分享一些我希望有用的代码 - 兼容 Swift 2.3 -
这样您就可以为每种视图调用它:
将来我将为派克位置添加偏移量。
SWIFT 3版本
I get here looking for a solution to draw "arrows" in an existing view.
I'm pleased to share you some code that I hope usefull - Swift 2.3 compatible -
In this way you can call this for every kind of view:
In a future I'll add offset for pike position.
SWIFT 3 Version
创建 UIBezierPath 的 Swift 2 代码:
现在你可以用这条路径做任何你想做的事。例如,将其与 CAShapeLayer 一起使用:
Swift 2 code that creates UIBezierPath:
Now you could do whatever you want with this path. For example use it with CAShapeLayer:
也许一个更简单的问题是“是否已经有代码可以为我执行此操作”,答案是“是”。
看
MAAttachedWindow
:当然,您可能不想要整个“附加窗口”行为,但至少绘图代码已经存在。 (Matt Gemmell 的代码是高质量的东西)
Perhaps a simpler question is "Is there code that does this for me already", to which the answer is "Yes".
Behold
MAAttachedWindow
:Granted, you may not want the whole "Attached window" behavior, but at least the drawing code is already there. (And Matt Gemmell's code is high quality stuff)
有两种方法可以实现此目的:
drawRect:
UIView 上的方法来自定义绘制视图。然后,您可以为三角形添加线性路径组件,根据需要填充路径并为路径加边框。要使用
drawRect:
绘制一个简单的三角形,您可以这样做。此代码片段将在视图底部绘制一个向下的三角形。有关详细信息,请参阅 CGContext 参考。
There are two ways you might be able to accomplish this:
drawRect:
method on your UIView to custom-draw the view. You can then add linear path components for your triangle, filling and bordering the path as necessary.To draw a simple triangle using
drawRect:
, you might do something like this. This snippet will draw a triangle pointing downwards at the bottom of your view.For more info, see the CGContext reference.
对于那些根据 Brad Larson 的答案使用 swift 2.0 的人
For those using swift 2.0 based on the answer by Brad Larson
Swift 4 更新
这是 AVT 原始代码的 Swift 4 版本。
Swift 4 Update
Here's a Swift 4 version of AVT's original code.
这是 swift 5
@IBDesignable UIView
版本Here is a swift 5
@IBDesignable UIView
version请参阅下图中弹出菜单上的三角形,它是使用 Core Graphics 函数绘制的,并且是完全可扩展的。
像这样完成一个等边三角形(老式函数名称,抱歉):
}
请注意 triH( x) func 是计算等边三角形高度的优化公式,例如 h = 1/2 * sqrt(3) * x 。由于 1/2 * sqrt(3) 永远不会改变,因此我将其优化为该定义。
See the triangle on the pop up menu in the image below, thats drawn with Core Graphics funcs and is completely scalable.
Done like this to do an equilateral triangle (old-school function names, sorry):
}
Note that the triH(x) func is an optimized formula for calculating the height of an equitlateral triangle e.g. h = 1/2 * sqrt(3) * x . Since 1/2 * sqrt(3) never changes, I optimized it into that define.
如果有人来寻找 Swift 3 的答案,这就能解决问题!感谢那些在我之前做出贡献的人,一段可爱的代码!
在我的例子中,
triangleWidth = 10
和triangleHeight = 5
的视图比 OP 版本中的视图小得多。If anyone comes along looking for the Swift 3 answer, this does the trick! Thanks to those who contributed before I did, lovely piece of code!
In my case
triangleWidth = 10
andtriangleHeight = 5
for a much smaller view than what's in OPs version.这是 Brad Larson 的 swift 3 解决方案
Here is the swift 3 solution of Brad Larson
我可能会在 Photoshop 中制作整个图像(包括三角形),然后使用以下命令在适当的时间将其显示在屏幕上:
I would probably make the whole image (including the triangle) in Photoshop, and then display it on the screen at the appropriate time using the: