菜鸟教程小白 发表于 2022-12-12 21:42:40

ios - 复杂图像(气泡/pin)和[UIImage resizableImageWithCapInsets :]


                                            <p><p>我正在尝试创建以下图像的可调整大小版本(40x28,<strong>底部的小三角形应水平居中</strong>):</p>

<p> <a href="/image/lcNgF.png" rel="noreferrer noopener nofollow"><img src="/image/lcNgF.png" alt="enter image description here"/></a> </p>

<pre><code>UIEdgeInsets imageInsets = UIEdgeInsetsMake(4.0f, 4.0f, 8.0f, 4.0f);
UIImage *pinImage = [ resizableImageWithCapInsets:imageInsets];                                                                     
</code></pre>

<p>根据 <a href="https://developer.apple.com/reference/uikit/uiimage?language=objc" rel="noreferrer noopener nofollow">documentation</a> ,这种简单的方法不起作用,因为我的三角形属于可调整大小的区域(固定高度但可缩放宽度):</p>

<p> <a href="/image/0MbwJ.png" rel="noreferrer noopener nofollow"><img src="/image/0MbwJ.png" alt="enter image description here"/></a> </p>

<p>这将导致与 <a href="https://stackoverflow.com/questions/18605514/how-to-use-uiimage-resizableimagewithcapinsets" rel="noreferrer noopener nofollow">this</a> 中所述相同的问题。非常相似的 SO 后复制(平铺)三角形。但不幸的是,他们的解决方案不适用于我的特殊情况,因为从可缩放区域中排除三角形会导致其错位,并且由于明显的原因它不会水平居中。</p>

<p>所以我想知道...是否有可能使用 <code></code> 方法来实现我的目标?或者我应该尝试其他方法,比如在代码中绘制所有内容?</p>

<p>基本上,我想通过 Google Maps SDK 实现 Info Windows 之类的东西:</p>

<p> <a href="/image/63LKR.png" rel="noreferrer noopener nofollow"><img src="/image/63LKR.png" alt="enter image description here"/></a> </p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>您可以通过使用 <code>UIBezierPath</code> 来实现。以下代码在 swift 中,但您应该能够在 Objective-C 中实现相同的功能</p>

<p>而不是用直线开始代码:</p>

<pre><code>path.moveToPoint(CGPoint(x: 300, y: 0))
</code></pre>

<p>我改为从弧线开始(右上角):</p>

<pre><code>path.addArcWithCenter(CGPoint(x: 300-10, y: 50), radius: 10 , startAngle: 0 , endAngle: CGFloat(M_PI/2), clockwise: true) //1st rounded corner
</code></pre>

<p>通过这样做,我有四个圆角,我只需要在之前的代码末尾添加一条直线:</p>

<pre><code>path.closePath()
</code></pre>

<p>这是代码和截图:</p>

<pre><code>let path = UIBezierPath()
path.addArcWithCenter(CGPoint(x: 300-10, y: 50), radius: 10 , startAngle: 0 , endAngle: CGFloat(M_PI/2), clockwise: true) //1st rounded corner
path.addArcWithCenter(CGPoint(x: 200, y: 50), radius:10, startAngle: CGFloat(2 * M_PI / 3), endAngle:CGFloat(M_PI) , clockwise: true)// 2rd rounded corner
path.addArcWithCenter(CGPoint(x: 200, y: 10), radius:10, startAngle: CGFloat(M_PI), endAngle:CGFloat(3 * M_PI / 2), clockwise: true)// 3rd rounded corner
// little triangle
path.addLineToPoint(CGPoint(x:240 , y:0))
path.addLineToPoint(CGPoint(x: 245, y: -10))
path.addLineToPoint(CGPoint(x:250, y: 0))
path.addArcWithCenter(CGPoint(x: 290, y: 10), radius: 10, startAngle: CGFloat(3 * M_PI / 2), endAngle: CGFloat(2 * M_PI ), clockwise: true)
path.addLineToPoint(CGPoint(x:300 , y:50))
path.closePath()
</code></pre>

<p> <a href="/image/yLelu.png" rel="noreferrer noopener nofollow"><img src="/image/yLelu.png" alt="enter image description here"/></a> </p></p>
                                   
                                                <p style="font-size: 20px;">关于ios - 复杂图像(气泡/pin)和,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/38875805/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/38875805/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: ios - 复杂图像(气泡/pin)和[UIImage resizableImageWithCapInsets :]