SVG 覆盖在 UIImagePickerController 之上,UIImagePickerController 响应手势(iPhone/iOS)

Posted

技术标签:

【中文标题】SVG 覆盖在 UIImagePickerController 之上,UIImagePickerController 响应手势(iPhone/iOS)【英文标题】:SVG overlay on top of UIImagePickerController with UIImagePickerController responding to gestures (iPhone/iOS) 【发布时间】:2011-02-16 07:15:27 【问题描述】:

我需要在 UIImagePickerController 上放置一个矢量,最好是 SVG 覆盖。我需要底层的UIImagePickerController 来响应手势,而叠加层应该只是一个非活动图像。

我尝试了 UIImagePickerController 的 cameraOverlayView 来显示带有加载的 SVG 和透明背景的 UIWebView。它确实按预期显示了覆盖,但它响应手势而底层UIImagePickerController 没有。我需要它反过来。

    这可以用 UIWebView 作为覆盖来实现吗?如果是,如何? 如果UIWebView 不是正确的解决方案,我如何从文件(SVG、EPS...)中绘制矢量作为叠加层并实现所需的行为? 即使在快门关闭时,cameraOverlayView 也会在相机上绘制叠加层(快门叶显示在 UI 中) - 我只需要在相机运行时叠加 - 显示实时图像。有没有办法做到这一点?

【问题讨论】:

【参考方案1】:

我正在使用 UIWebView 将 SVG 图像叠加到一些标准的 ios UI 上。在我的 我正在使用 SVG 提供底层 UI 的“游览”。我仍然 正在处理这个问题,所以我有一些未解决的问题。

    SVG 动画似乎没有 工作,虽然我可能会成为 错在这。 我只使用了简单的 SVG,没有 链接到 .CSS 样式表或其他 文件。 我正在使用一个派生自 UIWebView,并让它覆盖 整个表面。你可以 可能有一个较小的 UIWebView, 但我没有尝试过。 这是一个简单的 SVG 示例
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"

  id="tutorialLayout"  >
  <desc>UI Feature</desc>
  <defs>
    <rect id="cover"   opacity="0.3" fill="black"/>
  </defs>
  <g>
    <rect id="top"    x="000px" y="000px"   opacity="0.3" fill="black"/>
    <rect id="bottom" x="000px" y="310px"   opacity="0.3" fill="black"/>
    <rect id="left"   x="000px" y="290px"   opacity="0.3" fill="black"/>
    <rect id="right"  x="200px" y="290px"   opacity="0.3" fill="black"/>   
    <text x="10" y="280" alignment-baseline="bottom"
      style="font-size:32; font-family:Arial fill:black;"
      >The totals are reported here</text>
  </g>
</svg>

5) 这是加载 SVG 的代码片段

NSBundle *bundle  = [NSBundle mainBundle];
NSString *svg     = @"svg";
[svgView_ addRequest: [NSURL URLWithString: [bundle pathForResource: @"Arrow"    ofType: svg ]] seconds:  5];
[svgView_ addRequest: [NSURL URLWithString: [bundle pathForResource: @"t_help"   ofType: svg ]] seconds: 15];
[svgView_ addRequest: [NSURL URLWithString: [bundle pathForResource: @"t_layout" ofType: svg ]] seconds:  5];

实现类

@implementation RAWebView
//! Internal - process next request
- (void)        nextRequest 
    RAWebRequest  *next = [[urlStack_ pop] retain];
    if ( next == nil ) 
        [self setHidden: TRUE];
     else 
        [super loadRequest: [NSURLRequest requestWithURL: [next url]]];
        [super setHidden: FALSE];
        [super setUserInteractionEnabled: TRUE];
        if ( 0 < [next periodSecs] ) 
            int64_t delta = 1000000000;
            delta *= [next periodSecs];
            dispatch_after( dispatch_time( DISPATCH_TIME_NOW, delta),
                           dispatch_get_main_queue(),
                           ^ [self nextRequest];  );
        
        [next release];
        

//! Add RAWebRequest to queue
- (void)        addRequest: (RAWebRequest*) web_request 
    if ( urlStack_ == nil ) 
        urlStack_ = [[D4iStack alloc] init];
        [self setBackgroundColor: [UIColor clearColor]];
        [self setOpaque: NO];        
    
    if ( 0 == [urlStack_ count] ) 
        dispatch_after( dispatch_time( DISPATCH_TIME_NOW, 10000 ),
                         dispatch_get_main_queue(),
                         ^ [self nextRequest];  );
    
    [urlStack_ push: web_request];

//! Add RAWebRequest to queue 
- (void)        addRequest: (NSURL*) display_url seconds: (NSUInteger) period_secs 
    RAWebRequest *request = [[RAWebRequest alloc] initWithUrl: display_url seconds: period_secs];
    [self addRequest: request];
    [request release];

//! On user touch, hide self and empty urlStack
- (UIView*)     hitTest: (CGPoint)point withEvent:(UIEvent *)event 
    [urlStack_ clear];
    [self setHidden: TRUE];
    return nil;

//! NSObject dealloc
- (void)        dealloc 
    [urlStack_ clear];
    [urlStack_ release];
    [super dealloc];

@end

@implementation RAWebRequest
@synthesize url = url_, periodSecs = periodSecs_;

//! Init with set values
- (id)          initWithUrl: (NSURL*) display_url seconds: (NSUInteger) period_secs 
    if (( self = [super init] )) 
        url_        = [display_url retain];
        periodSecs_ = period_secs;        
    
    return self;

//! NSObject dealloc 
- (void)        dealloc 
    [url_   release];
    [super dealloc];

@end

【讨论】:

感谢克里斯的好榜样!【参考方案2】:

您可能还想查看使用 iOS 渲染 SVG 文件的开源 SVGView 项目: https://github.com/mattrajca/SVGKit

我碰巧正在使用这个 fork,它改进了解析器支持,除其他外: https://github.com/reklis/SVGKit

在许多情况下,显示 SVG 应该很简单:

SVGView *svgView = [[SVGView alloc] initWithDocument:
                                    [SVGDocument documentNamed:@"overlay.svg"]];
[self.view addSubview:svgView];

【讨论】:

以上是关于SVG 覆盖在 UIImagePickerController 之上,UIImagePickerController 响应手势(iPhone/iOS)的主要内容,如果未能解决你的问题,请参考以下文章

在 svg 图中覆盖的 x 轴标签

覆盖默认应用程序图标(SVG 或 Fonticon?)

SVG.js Mask覆盖和ClipPath裁剪

反射渲染SVG会覆盖页面上的其他SVG

SVG 相互覆盖 CSS 样式

SVG <circle> 填充覆盖前一个圆圈