在Obj C中，如何添加SVG藍圖圖像並從UIWebView渲染數據？

Question

我已經將SVG圖像加載到了UIWebView中，它具有工作魅力，但是未發生從SVG圖像的選定位置渲染數據的情況。 即使我被搜索了更多的信息，也沒有得到關於此功能的任何信息。 同樣，我嘗試了SVGKit，但是我不了解SVGKit的完整情況，所以選擇UIWebView的原因。如果有人知道此功能，請在此處評論。

SVG地圖似乎如下所示。我發現有關SVG圖片的鏈接很少，但UIWebView並未加載這些鏈接。 SVGKIT和chensheng12330 / SVGKitDemo

Answer 1

//Create a empty test.html and override below html code and reload the Webview.   
   -(UIWebView *)setup{
        self.svgName=@"third";
        //create a webview
        UIWebView *webview = [[UIWebView alloc] init];
        //create a empty html file and convert the svg into html and save dynamically
        NSString *testPath = [[NSBundle mainBundle]pathForResource:@"test"ofType:@"html"inDirectory:nil ];
        NSString *filePath = [self writeAndAppendString:[self getHTMLStringForLoadSVG:[self.svgName stringByAppendingString:@".svg"]] toFile:testPath];
        //load svg file into the webview
        //NSString *path = [[NSBundle mainBundle] pathForResource:@"loadSVG" ofType:@"html"];
        NSURL *fileURL = [[NSURL alloc] initFileURLWithPath:filePath];
        NSURLRequest *req = [NSURLRequest requestWithURL:fileURL];
        [ webview loadRequest:req];
        [ webview setScalesPageToFit:YES];
        [webview setUserInteractionEnabled:NO];
       // webview.contentMode = UIViewContentModeScaleAspectFit;
        [webview setBackgroundColor:[UIColor cyanColor]];
        webview.delegate = self;
        return webview;
    }
    //HTML file
    -(NSString *)getHTMLStringForLoadSVG :(NSString *)svgFileName{
        NSString *jQueryLib = @"https://code.jquery.com/jquery-3.2.1.min.js";
        NSString *idOfJQuery = @"test";
        NSString *type = @"image/svg+xml";
        NSString *id = @"test";
        return [NSString stringWithFormat:@"<!DOCTYPE html>\n<html>\n<head>\n<script src='%@'></script>\n<script>\n  window.clickedId;\n$(document).ready(function() {\nvar embed = document.getElementById('%@');\nembed.addEventListener('load', function(){\nvar svg = embed.getSVGDocument();\nvar pathElements = svg.getElementsByTagName('path');\nfor(var i=0;i<pathElements.length;i++){\n$(pathElements[i]).bind('click', function() {\nwindow.clickedId = $(this).attr('id');\n});\n}});\n});\nfunction clicked(){\n return window.clickedId;\n}</script>\n</head>\n<body>\n<embed src='%@' type='%@' id='%@'/>\n</body>\n</html>", jQueryLib,idOfJQuery,svgFileName,type,id];
    }
    - (void)tapAction:(UITapGestureRecognizer *)sender{
        [self performSelector:@selector(getJSObj) withObject:nil afterDelay:1.0];
    }
    -(void)getJSObj{
        NSLog(@"return value :%@",[self.self.mapWebview stringByEvaluatingJavaScriptFromString:@"clicked()"]);
    }


    //write the code of converting svg to html code dynamically
    - (NSString *)writeAndAppendString:(NSString *)str toFile:(NSString *)fileName {
        NSData *data = [str dataUsingEncoding:NSUTF8StringEncoding];
        NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
        NSFileManager *fileManager = [NSFileManager defaultManager];
        if ([fileManager fileExistsAtPath:fileName]) {
            NSString *testP = [[paths firstObject] stringByAppendingPathComponent:@"testHtml.html"];
            NSString *testPath = [[NSBundle mainBundle]pathForResource:svgName ofType:@"svg"inDirectory:nil ];
            NSString *testSvgP = [[paths firstObject] stringByAppendingPathComponent:[svgName stringByAppendingString:@".svg"]];
            [[NSFileManager defaultManager] copyItemAtPath:testPath toPath:testSvgP error:nil];
            [[NSFileManager defaultManager] copyItemAtPath:fileName toPath:testP error:nil];
            // Add the text at the end of the file.
            NSFileHandle *fileHandler = [NSFileHandle fileHandleForUpdatingAtPath:testP];
            //  [fileHandler seekToEndOfFile];
            [fileHandler writeData:data];
            [fileHandler closeFile];
            return testP;
        }
        return nil;
    }

在Obj C中，如何添加SVG藍圖圖像並從UIWebView渲染數據？

問題描述

1 個解決方案

解決方案1
3 2017-10-17 11:25:27

在Obj C中，如何添加SVG藍圖圖像並從UIWebView渲染數據？

問題描述

1 個解決方案

解決方案1 3 2017-10-17 11:25:27

解決方案1
3 2017-10-17 11:25:27