如何制造泡沫&；iPhone帮助页面中关于使用按钮的箭头？_Iphone_Helper_Drawrect

如何制造泡沫&；iPhone帮助页面中关于使用按钮的箭头？

iphone

如何制造泡沫&；iPhone帮助页面中关于使用按钮的箭头？,iphone,helper,drawrect,Iphone,Helper,Drawrect,如今，大多数应用程序都提供了教程，教用户如何使用应用程序中的按钮。此帮助页面通常为黑色，带有一点alpha值（因此只有背景是半可见的），带有一个气泡框，其中包含定义控件的文本和指向相应组件的箭头这是示例图像。。（来自应用程序）这是正常页面如果从下到上滑动，帮助视图将显示为以下是我的疑问：在这个帮助视图中，哪一个最适合创建图像和文本？使用核心图形或简单地将UIImageView与png图像一起绘制图像和文本？哪一个是有效的使用现成的png图像实现UIImageView没有问题。据

如今，大多数应用程序都提供了教程，教用户如何使用应用程序中的按钮。此帮助页面通常为黑色，带有一点alpha值（因此只有背景是半可见的），带有一个气泡框，其中包含定义控件的文本和指向相应组件的箭头

这是示例图像。。（来自应用程序）

这是正常页面

如果从下到上滑动，帮助视图将显示为

以下是我的疑问：

在这个帮助视图中，哪一个最适合创建图像和文本？使用核心图形或简单地将UIImageView与png图像一起绘制图像和文本？哪一个是有效的
使用现成的png图像实现UIImageView没有问题。据我所知，这里的问题是图像文件大小和加载时间。如果我们考虑绘图方法，我会想到以下问题：
画一个矩形很容易。(). 但是画一个有弯曲拐角的矩形怎么样？？有没有处理这种情况的功能
然后是指向相应组件的箭头。。我们怎样才能找到应该指出的确切点呢？（在iPhone4S之前，我希望没有问题，iPhone5有不同的高度）
如何从矩形中的特定位置绘制此指针

有什么想法吗

只是糊涂了

在您的情况下，我会参考可调整大小和可重复使用的图像。我的应用程序中也有许多重叠屏幕，我最终为uilabel生成了5 6个通用项目箭头、标签背景和矩形背景图像

我知道画矩形很容易，但有时可能会超负荷

如果要更改这些箭头的方向，可以对UIImageview应用层变换，如下所示

        arrowIamgeView.transform = CGAffineTransformMakeRotation(-M_PI / 20);

对于矩形的圆角，我假设您可以使用具有特定背景颜色的文本字段，并设置其图层的cornerradius属性。

IMHO，用CG画气泡和箭头更好。即使您完全更改应用程序（例如，如果您将它们正确地指向按钮的中心），它也会工作。对于图像，您需要有多个副本，用于不同的显示分辨率和比例。此外，如果您更改了任何内容，则需要更新箭头
我看不出任何性能缺陷。这两种方法都会很快产生气泡。另外，您可以缓存CG生成的图像，以备将来使用
查看以下问题了解如何绘制气泡：
用按钮的中心来标记每个泡点似乎是合乎逻辑的。您的绘图方法需要知道箭头指向何处以及当前方向（如果应用程序旋转）。它应该考虑到其他气泡，以避免重叠。可以将空间分成行和列，并为每个气泡指定可用空间
为了获得更好的用户体验，这些气泡不应该消耗水龙头。如果在气泡可见时点击按钮，则应执行预期操作（而不是仅隐藏气泡并需要再次点击）

只需将所需图像创建为png文件，并使用UIImageView显示即可。（但请记住，你应该有一个不同分辨率的相同图像。这会增加你的应用程序大小）
第二种方法是，通过创建标签、文本字段等来显示气泡（或者可能是矩形）。。带有箭头图像。您可以简单地变换图像以更改箭头的指向位置。（正如Ilker Baltaci在先前的回答中所说的那样）
第三种方式是，通过核心图形。你可以在这里画任何你想画的东西。据我所知，通过初始化/分配/保留标签和文本字段来增加应用程序的大小或增加内存消耗，我们可以通过核心图形来尝试

我面临的问题

箭头应该指向按钮的中心（或者按钮的顶部）。所以找到这个确切的位置很复杂。我只在我的应用程序的3个页面中使用了此功能。每页最多包含4个要描述的图标。所以我只是硬编码了这些值（我的另一个幸运是，该应用程序不支持横向模式）。但是，如果你想在这么多的页面上使用这个功能，你应该定义一些数组和一个方法，通过计算图标的中心来找到图标的中心，参考它们的原点、高度和宽度等等
另一个问题是，您应该确保气泡不会在任何地方重叠。在这里，我们还需要一个全局方法来找到每个气泡的位置。气泡的大小取决于要放置在其中的文本大小。这是一个更复杂的问题，对于3个屏幕，我不打算定义一个包含数百个计算的全局方法。所以我又一次硬编码了原点，每个气泡的高度和宽度

最后但并非最不重要。。箭！！箭头的高度可能随气泡的位置而变化。气泡的宽度也可能随高度而变化。另外，您应该知道箭头指向按钮的气泡的边和点。如果你已经把地方修好了

- (void) createRect:(CGRect)rect xPoint:(float)x yPoint:(float)y ofHeight:(float)height ofWidth:(float)width toPointX:(float)toX toPointY:(float)toY withString:(NSString *)helpString inDirection:(NSString *)direction
{
    float distance = 5.0;
    float widthOfLine = 5.0;
    float arrowLength = 15.0;

    //Get current context

    CGContextRef context = UIGraphicsGetCurrentContext();

    //Set width of border & colors of bubble

    CGContextSetLineWidth(context, widthOfLine);
    CGContextSetStrokeColorWithColor(context, [[UIColor darkGrayColor] CGColor]);
    CGContextSetFillColorWithColor(context, [[UIColor colorWithRed:0 green:0 blue:0 alpha:0.9] CGColor]);

    CGContextBeginPath(context);
    CGContextMoveToPoint(context, x, y);

    CGContextAddLineToPoint(context, x+width, y);
    CGContextAddQuadCurveToPoint(context, x+width, y, x+width+distance, y+distance);

    CGContextAddLineToPoint(context, x+width+distance, y+distance+height);
    CGContextAddQuadCurveToPoint(context, x+width+distance, y+distance+height, x+width, y+distance+height+distance);

    CGContextAddLineToPoint(context, x, y+distance+height+distance);    
    CGContextAddQuadCurveToPoint(context, x, y+distance+height+distance, x-distance, y+distance+height);

    CGContextAddLineToPoint(context, x-distance, y+distance);
    CGContextAddQuadCurveToPoint(context, x-distance, y+distance, x, y);

    CGContextDrawPath(context, kCGPathFillStroke);

    //Draw curvely arrow from bubble to button (but without arrow mark)

    CGContextBeginPath(context);
    CGContextSetLineWidth(context, 5.0);
    CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);

    CGPoint startPoint = CGPointMake(x+(width/2.0), y+distance+distance+height);

    CGPoint endPoint = CGPointMake(toX, toY);

    CGContextMoveToPoint(context, startPoint.x, startPoint.y+5.0);

    if ([direction isEqualToString:@"left"])
    {
        CGContextAddCurveToPoint(context, startPoint.x, startPoint.y+5.0, endPoint.x, endPoint.y, toX-10, toY);
    }

    else
    {
        CGContextAddCurveToPoint(context, startPoint.x, startPoint.y+5.0, endPoint.x, endPoint.y, toX+10, toY);
    }

    CGContextStrokePath(context);

    //Draw the arrow mark

    CGContextBeginPath(context);
    CGContextSetLineWidth(context, 5.0);
    CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);

    if ([direction isEqualToString:@"left"])
    {
        CGContextMoveToPoint(context, toX-10.0, toY-arrowLength);

        CGContextAddLineToPoint(context, toX-10.0, toY);
        CGContextAddLineToPoint(context, toX-10.0+arrowLength, toY);
    }

    else
    {
        CGContextMoveToPoint(context, toX+10.0, toY-arrowLength);

        CGContextAddLineToPoint(context, toX+10.0, toY);
        CGContextAddLineToPoint(context, toX+10.0-arrowLength, toY);
    }

    CGContextStrokePath(context);

    .......
    .......
}

[self createRect:rect xPoint:30.0 yPoint:250.0 ofHeight:100.0 ofWidth:100.0 toPointX:48.0 toPointY:430.0 withString:@"xxxxxxx" inDirection:@"left"];

[self createRect:rect xPoint:160.0 yPoint:100.0 ofHeight:100.0 ofWidth:100.0 toPointX:260.0 toPointY:420.0 withString:@"yyyyyyy" inDirection:@"right"];